Forms that work: Designing web forms for usability

Appearance: labels, buttons, required fields, and making forms look good

Making forms look good

There's a lot of inspiration available now: your form doesn't necessarily have to be plain boxes on a plain background.

For a variety of examples, some realistic and some perhaps best described as 'wild and wacky', try Smashing Magazine's slightly misleadingly titled article: Useful ideas and guidelines for good web form design

Best practice in label placement on forms

We find that many hours of project time get consumed in arguments about where to put labels on forms - time that could be used more profitably in thinking about users. So, Caroline has written about it and also does presentations:

An article on UX Matters, Label alignment in long forms, shows how much effort and backwards-and-forwards discussion can be devoted to this topic. (Caroline admits that she joined in). What we all need to bear in mind is this:

Users don't care very much about the placement of labels.

What users DO care about is whether the questions are easy to anwer, whether they want to reveal that information on your form, and whether the validations prevent them from entering the answers of their choice.

So our advice is:

Arrange the labels in any way that looks harmonious to you.
Make sure that each label is close to the field it belongs to.
Then test your form with your users and change it according to whatever they tell you.

Best practice for indicating required fields

Guess what: users don't care about required field indicators very much either. OK, we admit that a few of us webby-geeky types know what they are, and may even inspect the form before filling it in to assess the intrusiveness and amount of effort. But most everyday people don't really know what those little asterisks are for, even if they notice them at all.

So do this:

  • choose an indicator, preferably a red asterisk
  • explain what it is, in plain language and at the start of the form fields
  • put the indicator in a consistent place relative to the labels
  • decide on a way to tell someone using a screen reader that the field is required
  • if you decide to indicate optional fields instead, use the word 'optional'. Do not use a red asterisk to indicate 'optional'.

Catherine Toole, in her article Ten words I'd ban from all web sites, reports that a travel company got an immediate increase in conversions by replacing the jargon ' * denotes mandatory field' and replaced it with 'you must fill in the boxes marked * '.

Derek Feathersone explains how to ensure the required field indicator is accessible in his article: Will we ever get required fields right?

Legibility of text

We're rather nervous of any specific claims that "this font is better than that one". We recommend  that you:

  • Pick a standard font,
  • Use it at a decent size (larger than your designer wants, probably),
  • Choose a colour that gives really good contrast on your choice of background (e.g., black on white)
  • Make sure that the users can increase the size if they want to.

More discussion about fonts and legibility

Alex Poole has created a scholarly discussion of serif versus sans serif fonts.

Caroline's article explaining why she doesn't believe most legibility research.

Bruce Temkin muses on how text that is easy to read makes concepts seem easier to understand in his piece: A good reason to make it easy for customers.

Using HTML tags

You'll find many sites that explain how to use HTML tags appropriately for forms. One recent one that we like is from Addicot Web: Web Design Tip: Styling Forms to Improve Usability

Stick to a single column; don't use multi-column formats

We've seen lots of problems with two-column forms. Back in 2006, Caroline wrote Two-column forms are best avoided.

More recently, the Baymard Institute confirmed her findings: Form field  usability: Avoid multi-column layouts

Comments

Unfortunately this page is suffering from persistent spam comments so I have had to disable commenting here. If you have a question or comment, please contact us.

Site

Changes
Index
Search
Templates

User

Log In

 
 

Last Modified 2014-12-22