Join Chris Nodder for an in-depth discussion in this video Making forms as painless as possible, part of User Experience for Web Designers.
- If a form looks too daunting, people won't fill it out. If the form is forced on them when they aren't ready to share, they'll be likely to fill it in with false information. Several years back, I worked closely with a Hotmail e-mail team. When people registered for a Hotmail account, they had to give their ZIP Code. This was mainly to help Hotmail target adverts. It was amazing how many users of the service apparently lived in Beverly Hills, California. Obviously, they didn't really, but lots of people had entered the ZIP Code 90210 because they knew it from a popular TV show called Beverly Hills 90210.
Basically, they circumvented the form with false information because they didn't see the value in providing their real data. The way to avoid these issues is to make the form as concise as possible, and to make sure people realize the reason you're asking for each piece of information. Sometimes it might even be better to hold off on asking for some information until you have a better relationship with your customer. How do you make sure people give you the data you need? Well, first make sure you're asking sensible questions. Just like the other pages on your site, give the form a descriptive heading, and a summary line of text explaining its purpose.
If the form asks for more than one type of data, you can use subheadings within the form to separate the areas. Again, these subheadings should be descriptive, telling users what you are asking for and why. And then make sure that the labels you use act as instructions to help people fill out the form. For instance, just putting the label "password" next to a field doesn't help people as much as if you add the context of, "Enter a new password." Now anyone filling out the form knows exactly what you want from them, a new password, rather than spending time worrying about whether they already had a password set up for this site.
As an aside, let me just point out that it doesn't really matter whether you put the labels above the fields or to the left of them. If you're using instructional-style labels, they're going to end up a bit longer. That suggests putting them above the fields. If you have a longer form, putting the labels to the side will make it appear a bit shorter. Left aligning all the labels makes it slightly harder for people's eyes to scan between the label and the associated field, so I'd suggest right aligning, and aligning all the items in the form along the left edge of the form fields.
Whatever style you end up choosing, above or to the side, stick to it throughout your form, and use the same style on every form on your site. That keeps the interface consistent and helps visitors quickly learn the layout of your forms. What is important is to only use a single column of fields. If you put two columns side by side, it makes the form harder to scan, and often people will completely miss filling out the right hand column.
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