How do I express these instructions to a user in the most user-friendly way?



  • Here I have a screen which is intended for the user to search for and outline their yard with a set of tools in the toolbar (The pen and scissor tool is toggled when tapped).

    enter image description here

    I need to explain the use of each button in the toolbar as well as instruct the user to outline the entirety of their yard with the pen tool and then outline the part of their yard with the scissor tool which is not grass (houses, sheds, driveways, etc.)

    enter image description here

    enter image description here

    enter image description here

    What would work best here? Interactive tutorial? A video? How and where do I explain the functions and steps to keep it as simple as possible? I have tried creating a dialog with slides explaining each button's function but didn't really like the outcome. Since I wrote the app, it's really hard knowing if what I write is simple enough and/or user-friendly.



  • During each of the phases of this operation, have a persistent (or semi-persistent, see details on that below) message that tells the user what's going on.

    Before the operation display (alter the tone to match your brand):

    Here's how we measure your yard:  
    
     1. First, outline your entire property in green with the pen tool (mentioning the color and the shape is helpful - multiple sensory anchors help the sense of solidity)
     2. Then, outline the parts that aren't grass in red with the scissors tool
    

    When they're in Phase 1, display:
    Step 1. Outline your entire property in green using the pen tool

    When they're in Pase 2, display:
    Step 2. Outline any non-grass areas in red using the scissors tool

    (These could be shortened too: "Step 1: Outline your property", "Step 2: Outline non-grass areas to subtract them"

    A few things to note about the wording:

    • In the full sequence "primer" before their operation, I don't use the word "Step" because when the full sequence is being viewed it's obvious it's a sequence.
    • In the instructions displayed during the operation, I've removed the words "First" and "Then". Those words make sense when considering the sequence as a whole. During the operation the word would just be "Now" which doesn't need to be stated.

    What I mean by semi-persistence: Something similar to your controls that appear or disappear with a tap. Maybe the current-step instructions appear with an x so they can dismiss it, or they fade in after a period of inactivity.

    Finally, you can add some tiny green words inside the colored regions to remind them what the regions represent.

    During Step 1: green text inside the green region that says "Your property"

    During Step 2: green text inside green region that says "Grass". Red text inside the red region that says "Not grass".



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2