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.