Join Chris Nodder for an in-depth discussion in this video Creating form fields, part of User Experience for Web Designers.
- Now let's talk about the individual fields on your form. You've probably seen some forms where every field is the same length. That may look neat, but it's actually unhelpful to visitors. When people see fields of different lengths, it gives them clues as to how much information you expect them to provide. Phone numbers are a different length to credit card numbers, which are a different length to card verification numbers. Using fields of the correct size helps people work out what information to put where. You should also help people out by giving them a clue as to which fields are required and which aren't.
The typical way to do this is to use an asterisk, that's a star, next to the required fields. Another way to help people, is to limit their choices. A drop down list box, or a set of radio buttons, means that people get to pick from a set of options, rather than having to think about what to type. In terms of human memory, recognition is much easier than recall. As long as you've put the right options on the page, it's easier for someone to just make a selection, than it is to have to start from an empty field. It also allows you to make a default suggestion. So long as that default is in line with what most visitors want, it'll reduce the time it takes them to complete the form.
When you start putting controls on the page, make sure you use the correct one. Radio buttons and check boxes are different for a reason. Check boxes let your visitors choose one, some, all, or none of the options. Radio buttons only let them choose one. Knowing where the name comes from, will help you remember which one to use. Old car radios used to have buttons to choose a station. These were physically connected to the tuning controls. Only one could be pushed in at any time, because you could only listen to one station at a time. When you pushed a different one in, it popped the currently selected one back out.
Just as a reminder, here's one case where Fitt's law comes into effect as well. The target size of check boxes and radio buttons is really small. The solution is to make sure that the text is clickable too. This should happen automatically in most modern browsers, but please check it's working for your forms. Radio buttons and check boxes are also the exception to the "Labels to the Left" rule. Use the check box or button as a bullet point, so the label goes to the right. And put each option on its own line, because otherwise it's hard to tell which selector goes with each label.
Another way to make form filling faster and more accurate, is to add help text in line. People won't always click on help links in a form, because they're scared they'll be navigated away from the page, and then lose their information. If you instead put the help text alongside the form information, it lets them see what's required without the risk of leaving the page. Before you write any help text though, see whether you can make visitor's lives easier, by making sure the field labels are as clear as they can be. A well laid out form shouldn't need masses of extra help text.
One final thing about form layout. Back in the mists of time, the default buttons at the bottom of the form were Submit and Reset. Please do not put a Reset button on your forms. The pain that this button inflicts on people who accidentally click it is not worth the hassle. Also, try and use a verb on the Submit button that sums up what's going to happen once the user clicks it. For instance, Register, or Sign Up for Newsletter, or Request Information. Any of these are more educational that the word Submit. And they help customers understand what it is they'll get as a result of completing the form.
You might want to put a Cancel option on the page. More as a reassurance to visitors that any data they've typed in won't get sent. But if you do, make sure it has less visual weight, and is physically removed from the Submit button, so that it doesn't get clicked on accidentally. And when people press the Submit button, make sure you reassure them that their data made it through, by providing a confirmation screen.
User experience expert Chris Nodder teaches
- What people want from websites, how they search for information, how they read online, and how to structure your content to take advantage of this research
- How to use graphics to help rather than hinder visitors, how to integrate video, audio, and other media, and when to consider interactive rather than static content
- How to look at your site's homepage, forms, product pages, and content through the eyes of users to build a site that better meets their needs
- How to balance site content with advertising
There are never enough great interfaces in the world. Take this easy introduction to start making wonderful online experiences for your own users.
- Building a site visitors will like
- Using single, consistent, and standard design principles
- Creating good menus
- Working with site maps
- Adding search to a site
- Arranging content in a layout
- Writing for the web
- Creating category pages and landing pages
- Designing product pages and forms
- Using media and interactive content
- Balancing ads and content