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:

  1. Use a simple vertical layout with labels above the input fields.
  2. If vertically aligned labels are not possible, make them bold and left-aligned.
  3. 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.
  4. Emphasize section headings (via color or shading) if you want people to read them.
  5. Only ask for required information. Identify optional fields rather than required fields (don't use asterisks).
  6. Use a single input field for numbers and postal codes, and allow input in various forms.
  7. Avoid displaying unnecessary information and make sure important information stands out.
  8. Real time feedback may be distracting — good implementation is key.
  9. Place instructions to the side of the field.
  10. 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 | 14 Comments

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.

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.

Excellent tips, I was also surprised by #5, I will probably not change that one.

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.

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.

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!

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.

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.

@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

Oh, #10 is very important, yes. Pissing of when u don't know how long it'll take to fill everything.

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.

Nice One. I think the most important point is number 10 .

I think this is a good standard to work towards with forms.

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

Subscribe

Subscribe to my RSS FeedSubscribe to my RSS Feed

Categories

Proud member of 9rules network