Getting online forms right
Posted in Design on: Monday, November 7, 2005 by Paul Boag
At the end of last week, I was integrating an online survey into a client’s site. It started me thinking about how difficult it can be to get online forms right. In this post, I outline just some of the many things you should take into consideration.
forms require a higher degree of interaction than any other part of a site and so there is more room for error
With the exception of the home page, online forms are probably the biggest challenge to us as web interface designers. This is largely because online forms require a higher degree of interaction than any other part of a site and so there is more room for error.
Web Forms Checklist
With that in mind, here is my checklist for designing an effective web form:
Make a form look like a form
Too many designers mess with form fields so that it is nearly impossible to identify them as editable. Sure, form fields can look ugly but there visual appearance helps people identify them as a form. Some styling is fine but don’t make them unrecognisable.
Stay focused
Everybody hates getting spam. We are suspicious of giving out personal information online for fear that the information will be used to send us junk. Do not ask users for information that you do not absolutely require. They will tend to see anything extra as an invasion of their privacy and an attempt to spam them.
Keep it short
Marketing departments have a habit of wanting to know everything about their visitors. The result is that forms become overwhelmingly long and users just don’t bother completing them.
Turn long forms into applications
Once an online form goes beyond two screens, it’s often a sign that the underlying functionality is better supported by an application, which offers a more interactive user experience.
Provide timescales
If the user cannot see how long the form is, they will assume it takes a long time to complete. In many cases, they give up before they begin. Reassure the user that the form will take only a few minutes of their time.
Inform of progress
If a form is split over multiple pages, the user can be left wondering how many more screens there are to go. I have seen people give up only one click away from finishing! By telling them how much of the form is left, you encourage them to persevere.
Only show relevant fields
Some fields in your form maybe conditional on other answers given. For example, you may have a question "Do you have children?" and a second question "How many children do you have?" Obviously if they answer no to the first question then the second becomes irrelevant. Make your form appear shorter by either combining these questions or only revealing the second one if they answer yes to the first.
Use the mandatory fields sparingly
Forms failing to submit properly because mandatory fields were not completed can be an annoying experience. It is therefore advisable to use required fields only when entirely necessary and to mark clearly, which fields are required.
Avoid re-entry
There is nothing more annoying than constantly inputting the same information. Store users details so that reoccurring fields are pre populated. Also make sure that information is not lost if the user accidentally navigates away from the page.
Clear validation
It can often be hard to spot which fields you failed to complete correctly. By clearly marking the problem fields, you dramatically improve the user’s experience.
Avoid reset buttons
Personally, I don’t think it is worth having a reset button on a form anyway, but when you do ensure you don’t put it near the submit button. It is very easy for users to click the wrong one and find themselves back at square one.
Highlight the current field
On long complex forms, it can sometimes be hard to spot which field contains your cursor. Use CSS or JavaScript to highlight visually the current field.
Ensure a logical tab order
Many visitors use the tab key to move between fields in a form. Make sure the fields tab through in a logical order and where possible remove tabs from elements such as labels or links where that interrupts the flow of the tab order.
Use fieldsets and labels
Usability for speech and text browsers is dramatically improved by marking up your form with the relevant fieldsets and labels.
Place labels before fields
Because visually impaired users cannot see a form field, they are reliant on the label associated with the field to describe it. However, if the label appears after the field they are not told what the field is for until they have moved past the field itself.
Offer an incentive
Because forms often require users to part with personal details, they are naturally reluctant to complete them. Users need a clear incentive to part with their information. What that incentive is depends on your site. For some it could be as simple as access to site features such as a forum, for others it might be an entry into a price draw or a free reward of some kind.
Explain the need for information
When you are requesting personal information, explain why you require it. For example, if you request an email address for an ecommerce purchase, explain that it is required for informing the user of their orders status and nothing more. If you don’t explain, they will presume the worst.
Clear help
For more complex fields make sure you provide clear instructions. For example if you require the security number from a credit card, explain where this can be found and what part of the number you require.
Saving forms
It is generally good practice to allow users to save forms and return to them later. This is particularly true of longer forms where the user might have to look up some of the information required.
Your opinion
So, that is my checklist for designing forms. Did I miss anything? Do you disagree with anything I have said? Let me know what you think.
3 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
hmm… this is not the most interesting article ever but i totally agree with what you say! I heard you say, as i was going over old podcasts, that this was an area that mattered but everyone seemed board with and i thought a well lets go and see what so boring about it so i listened to the better forms podcast and read the articles and i can see why from you and the viewers point of view it is very important and very boring at the same time!
Cheers,
Grant Mc
What about the order of buttons? We had a discussion about this at work. Is there a standard order? For example, say these are the options at the end of the form: Back, Next, Cancel, and Finish. Would it be more intuitive to the user if they were placed “positive to negative,” for example
Back | Next | Finish | Cancel
because the user is likely to do what the button on the left says, or would it be better to have it arranged with the most likely buttons placed to the right, for example
Cancel | Back | Next | Finish?
Thank you.
Personally I always try to put the “primary” action button in the bottom right hand corner because this is where an English speaking persons eyes finish when they have read the page.
I would personally not have a cancel button… at least not in with the primary buttons. It just doesn’t seem logical to me to encourage people to cancel what they are doing on a website (especially when they can just stop doing it with no real penalty).