Home : Topics : Forms and dynamic sites : Usability
Introduction
Form controls
Submitting forms
Processing submissions
Technologies
Usability
Summary
< Previous: Technologies

Usability

Form usability is a complicated topic. Here are some basic guidelines that can help you avoid the worst mistakes.

Use appropriate controls

For example, do not use checkboxes when a user is supposed to select only a single option. Do not use radio buttons when there are 20 options.

Validate and restrict input...

You need to make sure (in your server-side code) to check that the form is correctly filled in. If there are any errors, you should return the user to the form page, highlighting those errors.

For example, if a user neglects to fill in an email address, you can return them to a form with the 'Email address' label in red and text at the top explaining that an email address is required.

You can also restrict data prior to this stage. For example, if the user is supposed to indicate whether they are male or female, do not include a text box for them to type 'm' or 'f'; include two radio buttons. If a user is supposed to indicate their country of residence, do not include a box for them to type it (where they might make a typing mistake etc.); include a drop-down list of all countries.

...but not too much

Be sure that your form can be filled in by all users. For example, you might require a postal code; don't attempt to validate this code because users from a different country might have a different format. In fact, you shouldn't require a postal code at all because some countries do not have postal codes.

Similar details apply to telephone numbers; for example, do not attempt to 'validate' a telephone number by checking that it only contains digits, -, (, and ); international telephone numbers are listed with a + at the beginning, and other countries might use additional symbols in telephone numbers.

Do not make the user retype

In cases where the user needs to re-submit a form (because there was some mistake), ensure that they do not need to retype the correct information. When the form is sent back to them, it should already contain all the correct data they entered.

Do not include a 'Reset' button

HTML provides for a 'reset' button which clears the form data. Users often click this button by mistake when they intend to submit the form. The button usually has no purpose, so don't include it just because you can.

Provide all necessary instructions

Forms can be complicated and time-consuming to fill in, so be sure to include all necessary information. For example, indicate required fields in some way, so that the user knows they can't leave those blank.

If a user might not understand one piece of requested information (for example, the security number on a VISA card), explain that information for them.

If an explanation would be too long to fit on the form, include a link to it. Make sure the link pops up in a separate browser window so that the user doesn't lose their form data, and make sure that the link text indicates it will use a separate window so that the user isn't scared to click it.

Let user confirm important actions

Always give the user a 'last chance' stage to confirm any important actions such as a purchase. This stage should give the details of exactly what the user is about to commit to, and should clearly indicate that, when the submit button on this page is clicked, the action will be taken.

Include support contacts

If the form is an important one (for example, an order form for your business) and you care if somebody can't figure it out, make sure that you provide some way to get help, such as an email address, and prominently display it on that page.