26Aug2009
10 Web Form Design Guidelines Based on Eyetracking
cxpartners have produced a useful set of form design guidelines based on an eyetracking study they did on the signup forms of 4 major websites: GMail, Hotmail, Yahoo! Mail, and eBay.
It's worth noting that the study only used 8 participants, so its findings may not stand up in a court of law.
The guidelines:
- Use a simple vertical layout with labels above the input fields.
- If vertically aligned labels are not possible, make them bold and left-aligned.
- If you put more than one field on a row (e.g. first and last name) make them look like a single piece of information.
- Emphasize section headings (via color or shading) if you want people to read them.
- Only ask for required information. Identify optional fields rather than required fields (don't use asterisks).
- Use a single input field for numbers and postal codes, and allow input in various forms.
- Avoid displaying unnecessary information and make sure important information stands out.
- Real time feedback may be distracting — good implementation is key.
- Place instructions to the side of the field.
- For multi-page forms tell users how many steps remain before completion.
I was a little surprised by the second part of #5 as I've been conditioned to use asterisks to indicate required fields on forms that have both required and optional fields.
If it's better to only identify optional fields, this raises the question of how best to do so for fields other than input fields — such as checkboxes and radio buttons — without causing information clutter.
[via GUUUI]
Posted on: August 26, 2009 |
Recent Entries in "Usability"
14 Comments Posted
Point 5 is suggesting a re-think about how you present your forms. Why give the user a big list of fields to fill out if they're not necessary? Just give them the fields that they need and the rest can be asked later or updated at their discretion.
1. Posted by Evan Skuthorpe on August 27, 2009
I would like to see the actual evidence for these conclusions. Many are well known principles but what was it about user behaviour within this particular eye tracking experiment.
2. Posted by The_Reveller on August 27, 2009
Excellent tips, I was also surprised by #5, I will probably not change that one.
3. Posted by Pliggs on August 27, 2009
I agree with Evan, however unfortunately the tempation is too great to include some others. I certainly would never start asking for phone numbers, address etc... unless it is crucial to the process (which it rarely is).
I'm a firm believer in only putting information which you yourself would feel necessary. Find similar companies/situations, use their forms and see how you feel about them. Eye tracking doesn't necessarily give you a difinitive answer.
There's nothing wrong with being distracted as long as it aids the final sign up, IMO.
4. Posted by Rob Hallums on August 27, 2009
People are accustomed of that an asterisk means a required field in a form. It is not intelligent to change this if you have no good reason (or a good way to substitute it).
The design must be simple, and asterisks are simple.
5. Posted by Renne Rocha on August 27, 2009
I've experimented with this quite a bit, I've gone from really complicated forms with a bunch of instructions and cleverly defined required fields with checks, to just simple contact forms. And in the end, you contact form becomes a barrier to entry for potential clients. So while it may be great to have emails come in from these forms with really detailed information, often if you just keep it simple you'll double the number of submissions. It is a fine line, but most of these rules are in line with what I've found. Nice post, thanks!
6. Posted by Bryant Smith on August 28, 2009
The challenge with indicating optional fields is how do you show that a checkbox is optional?
Many sign-up forms give the user the option to sign up for a newsletter. They usually look like this:
[ ] Sign up for our newsletter.
Where would the 'optional' indicator go here? It would have to be before the checkbox, I guess.
7. Posted by Christian Watson on August 28, 2009
I've a few problems with this list, such as making labels bold & left align. I agree making labels bold, but if they vary in length, the eye has to work harder running all the way back to the left of the page.
How do you make the first & last names look like a single piece of information? Use two textboxes and one label?
This is a good review.
8. Posted by Chris Howell on August 31, 2009
@Bryant - I wouldn't worry about stating "optional" since it's already implied -- you're not forcing them to sign up, you're asking if they want to sign up.
Great post, though I'm worried about the sample size. Eight people is not nearly enough to show beyond a shadow of a doubt what most people prefer. But it certainly gives us something to think about, and at least underlines the fact that the way you format your form really does make an impact.
~Graham
9. Posted by Graham Strong on August 31, 2009
Oh, #10 is very important, yes. Pissing of when u don't know how long it'll take to fill everything.
10. Posted by Kate on September 02, 2009
In a very timely follow-up to #8 on real-time validation, A List Apart has a great article outlining best practives for web form inline validation based on eye-tracking research.
11. Posted by Christian Watson on September 06, 2009
Nice One. I think the most important point is number 10 .
12. Posted by rbts on September 08, 2009
I think this is a good standard to work towards with forms.
13. Posted by Logo Bliss on September 09, 2009
I agree with both ideas and in the past have subscribed to the view of having required fields marked with an asterisk. Though recently have moved towards the ideology of having a second optional page for people who are interested in providing more information. It really depends on the application, but I think we can take wisdom from the old saying that, "Everything should be made as simple as possible, but not simpler." ~Albert Einstein
14. Posted by Richard Eric Mayfield on September 23, 2009