Over the last few years we have conducted usability testing of many web applications and forms and have observed some common behaviors.
First of all, most users won’t read instructions until they get stuck. After buying a new electronic appliance or piece of consumer electronics, how many of us actually read an instruction manual from start to finish before pulling the item out of its box and trying to get it to work? Very few, apart from a few technophobes, terrified of breaking the device. Most people try to get the device working; when they get stuck they turn to the instruction manual as a last resort. People behave the same way when using a form or web application. They rarely read instructions until they get stuck or make an error. Then they look for help.
This leads us to our second common observation: users not only ignore instructions, text, buttons, and “Help” links, they especially ignore (or don’t notice) instructions if they are located too far away from relevant form fields and functionality. This is a very common usability issue we observe when testing web applications and forms, and can be explained in part by Gestalt theory. The Gestalt principle of proximity states that objects which are closer together will be seen as belonging together. We often observe usability issues when instructions or help are not in close proximity to the input field, as people don’t relate them with the relevant field. A common example is an important instruction, such as instructions for creating a new password, placed at the top of a form and distant from the password field.
So taking these behaviors into account, we set out to explore the question: “Where do users look and expect to find help when filling out a form?” We conducted testing with eighteen participants in Brisbane, Australia. Our goal was to determine user expectations regarding the location of both inline help in forms, as well as broader help relating to the whole form or web application function.
Our Approach
The participants were shown a screen with a generic form with no help links, buttons, or icons and were asked to use the mouse to quickly point to where on the form they would expect to see a help button, link, or icon you could click for more instructions or information if you were having trouble completing:
- The entire form?
- A specific question on this form?
Their click point was then recorded and mapped on our prototype using a circle. Similar to a heat map, red circles indicate the “hottest” and most common location selected, grading down to blue to indicate the least commonly clicked locations.
What We Found
About trouble completing the form, the findings were conclusive: 78 percent (14 of 18) of users expected to see help associated with the whole form located in the top right quadrant of the screen (indicated with red circles in Figure 1). Three of these users clicked in the global header area which would be persistent throughout the entire website.
Only 17 percent (3 of 18) of users expected to see help associated with the whole form located in the top left of the screen below the global header (indicated by yellow circles in Figure 1). The remaining user click location is indicated by a blue circle.
In regards to the expected location of a help button, link, or icon that a user could click for inline help or assistance with a specific question, 67 percent (12 of 18) of users expected this to be located directly to the right of the field they were seeking assistance with (indicated using red circles in Figure 2). 11 percent (2 of 18) of users indicated they would expect it inside the same form box and to the top right of that box (indicated using yellow circles in Figure 2).
Only 11 percent (2 of 18) of users indicated they would expect it before the field label they were seeking assistance with (indicated using yellow circles in Figure 2). No users expected to see a help icon after the field label but before input field.
Recommendations and Conclusion
Users generally look for help at the point of confusion. They read a question in a form, look at the input field, using cues that may help them answer the question such as the values in a dropdown box, then seek further help or instruction if they still don’t understand how to complete the question. As most western users’ visual flow is left to right, the next logical place to look for help relating to a specific question is after the input field, for example, to the right of a dropdown box or text box. Based on our ongoing observations and limited research, we recommend that inline help relating to a specific question in a form appear to the immediate right of the input field and using a meaningful symbol such as the question mark icon (see Figure 3). This is where two-thirds of the users in our study indicated they would expect to find inline help. We also recommend that inline help be user activated (for example, appear upon mouseover) to reduce screen clutter while allowing easy access to help when needed by the user.
On the other hand, if users are having trouble understanding the overall purpose of the form or the web application screen, they tend to look for help in the top right corner of the screen. A help button, link, or icon relating to the whole form or screen function should be located on the top right corner of the screen but below the global header (see Figure 3). Help relating to the entire application or website, such as phone help, support numbers, or global tips, should be placed in the global header.
Some argue that there is a need to provide all form instructions and information before the form starts and not between form controls, to ensure the form is accessible. As discussed, most users would not use, or would ignore, these instructions initially, so there are obvious drawbacks to this approach. A viable alternative might be to provide instructions for filling the form on a separate web page and place a whole form “Help” link at the beginning of the form to help users who prefer or require “up front” instructions to complete the form easily. Validating inputs and providing clear and constructive error messages that help users recover from errors may also assist all users, including people using assistive technologies, in the event they fail to answer the question correctly
