Forms are a central part of our web surfing experience. You will find them everywhere you go. You can’t enter your shipping and credit card details when buying online without a web form. Almost every poll and online survey is a web form. Visitors to your own site can’t register for your web application, sign up for your email newsletters or leave a blog comment without using a web form in some way.
While a good web form will go unnoticed, a bad web form can create an impenetrable barrier to entry to your site and services. Web forms are so common that it is very easy to create barriers between you and your customers. A familiarity with what makes a good web form will assist you to create a pleasant experience for your users while helping as many people as possible to complete your forms.
People don’t like filling in forms. They stop them from getting to where they want to go. They can’t leave a blog comment without adding a name and email address. They can’t test the latest web app until they register. They can’t buy something from Amazon until they enter in a shipping address and credit card details. The list goes on. Granted, many of these forms are necessary. The trick is to make the form as quick and painless as possible.
Having said that, what are the principles behind building better web forms?
Ask only what you really need
One of the biggest pain points in filling out web forms is being presented with an endless list of detailed questions, with each requiring a detailed answer. You should aim to provide as little friction as possible. Every second someone spends thinking about filling out your form is one more second for something else to change their mind. Since you presumably need the information you’re asking for (you do have a reason, don’t you?), keep it short and simple. For example, if you don’t need to know your customers date of birth during a registration process, don’t ask for it. While you might have good marketing reasons for asking, consider if there is a better time or place to ask. Perhaps once sign up is complete you can encourage your new user to fill out a user profile (yes, another form. I told you they’re everywhere!) and include date of birth there.
Explain yourself
If you really need to ask for extra information, be clear as to why you need it. It is common for many commerce sites to ask for several contact phone numbers. If you need the extra numbers to provide alternate contact numbers in case the primary number is busy, say so. Don’t just stick the extra fields in the form and hope people will fill it in.
Provide a clear path
If you want your form to be quick and easy to complete, you need to make it obvious how the form is going to completed. When you look at the form, is there a clear and simple path through the form for your eyes to follow, or do the fields and buttons in the form dart all over the place? This is also known as a “scan line”, and it describes the way that a user’s eyes track around a page as they complete a form.
Image Src: http://www.flickr.com/photos/rosenfeldmedia/2367261378
– CC – Attribution – Rosenfeld Media)
It is not just single page forms that need a clear path. Customers can get lost if a form spans several pages. If your form must be this large (for example, a loan application), you should provide progress indicators to give your users an indication of how far they have travelled down the path to completion and, more importantly, how far they still have to go.
When all is said and done, get out of the way
The underlying idea to all of this is simple: get out of the way. Don’t let your forms be a barrier to people enjoying your site. Spending the time developing a better web form helps make the web just that little bit better for everyone.
