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.