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
