Two sets of recently published Web form design guidelines:
The first set, Web form design guidelines: an eyetracking study from cxpartners, looked at ease of completion and user satisfaction for three registration forms with distinct layouts: Yahoo! Mail, Google Mail, Hotmail and eBay. Though there were several different variables between the forms and the team only "looked for trends in best practices when designing forms", they compiled a list of guidelines that closely aligns with previous research I've seen:
- Vertical, not horizontal: Users complete web forms from top to bottom. Therefore forms with a simple vertical layout are always better than multi-column layouts.
- There are some exception cases where the ’single column’ rule can be broken. Users expect to see names (first and last name), dates (year, month and day) and time (hour and minute) written on a single line.
- Use coloured or shaded grouping headers ONLY if they are important. If they are not important, don’t bother to do so to avoid distracting users from filling in the form.
- Don’t use asterisks, make clear optional fields. People go on to a form expecting to fill in everything. If possible, only ask users for information that is absolutely required. If for marketing purpose or for some other reasons where optional fields are needed, we suggest to mark optional fields clearly instead of indicating the mandatory fields.
- Use single field for numbers or postcode. Use single field for numbers or postcodes, allow input in various forms. If not, use a good system validation and provide clear error messages if invalid input is entered
- More in the article...
The second set of guidelines was shared by Caroline Jarrett and summarizes the work of Dr Kathryn Summers of the University of Baltimore on forms for low literacy users.
- We found that the shortish labels worked above or to the left.
- We found that a single column worked best for low literacy users, except for fields that "logically" felt like a group: specifically city, state, zip.
- Name should be all one field if possible.
- We noticed that low literacy users generally abbreviated short form labels to just one word (they would read just one word), so email address became "address" and first name became "name."
- All text associated with the form should be 14 pt in size. The font size makes a big difference in readability generally for low literacy users (the text size in the website should really be 14 pt also, although I've seen 12 pt work.
- All elements of the form should be above the fold, especially for older users, even if that means lots of screens.
- More in this discussion thread...