CXO

Enhancing form usability with instructions and validation

There are many aspects to good form design; it starts with determining what data the form needs to collect and extends through the back-end processing of the form data. This article focuses on what you can do to ensure accurate and complete data entry.


This article is from Builder.com's Design and Usability Tactics e-newsletter. Sign up instantly to begin receiving the Design and Usability Tactics e-newsletter in your inbox.

Forms are among the most interactive aspects of Web sites. They collect visitor information, whether it's a user ID and password in a login form or pages of personal information in an application form. Requiring the visitor to type information into a text box or select an option with a radio button or check box compels a higher degree of user participation than simply clicking a hyperlink to display another Web page. This greater level of visitor interaction makes form usability a critical concern for Web builders.

From a usability standpoint, the worst-case scenario is a visitor who fills in and submits a form but fails to achieve the expected result (e.g., the login fails, the application is rejected, or the database doesn't update). The most common cause of such a failure is incomplete or inappropriate data input from the visitor. However, instead of writing this off as user error, look at it as usability error and take steps to correct the usability deficiency. The goal is to make every user's encounter with the form successful on the first try.

There are many aspects to good form design; it starts with determining what data the form needs to collect and extends through the back-end processing of the form data. This article focuses on what you can do to ensure accurate and complete data entry.

Provide clear instructions
The first step is to give visitors clear and complete instructions that define precisely and unambiguously what information they need to enter into the form. However, you don't need a paragraph of instructions beside each text box or other form element; in most cases, a simple label (e.g., Last Name) is all that's necessary.

Some form elements, on the other hand, need more thorough instructions, either to identify the requested data or to help the visitor enter that data in the proper format. For example, visitors may need special instructions on how to find and enter the security code that's in the signature strip on the back of a credit card. This is a relatively new feature on some credit cards, and the terminology that describes it varies among credit cards and Web sites, so a simple label beside a text box isn't enough. To complicate matters further, the code often consists of four to six digits, even though only the last three digits are significant. A good solution to this particular challenge is to create a separate page of instructions on how to locate and enter the security code, and then place a link to the instructions page beside the form field. This allows for complete instructions, including an example image, without cluttering the form.

Identify required fields
It's a frustrating experience to submit a form only to have it rejected because of leaving a required field blank. That's why it's important to clearly mark any required fields on a form. An asterisk and/or a distinctive color (such as red) often mark these fields. If you use an asterisk, put an explanation about what the asterisk indicates at the top of the page so the visitor can't miss it. Also, don't rely on color alone to identify required fields. Some users may be color-blind or may be viewing your form on a monochrome display.

Help the visitor enter data
Make data entry as foolproof as possible. Usually, that means minimizing your use of text boxes that require the visitor to type in data and replacing them with list boxes that allow the visitor to select an option. The list box eliminates the possibility of the visitor making a typographical error.

A good example of this is a drop-down list box to select a state's two-letter abbreviation in a U.S. postal address. A more elaborate example is a pop-up calendar that enables the visitor to click a date in the calendar and have that date entered into the form in the proper format.

In contrast, a bad example is requiring the visitor to type the city, state, and zip code into a single text box using the proper spacing and punctuation. If your database or other application needs the address entered into one field in that format, you could try giving your visitors explicit instructions on how to fill in the form. A better solution is to use separate form fields for the city, state, and zip code, and then combine those entries into a single data string in your back-end form processing. It means writing more code, but better usability and fewer errors are worth it.

Validate the data entry
Even if you design a form with good labels and instructions, not all users will submit the form with accurate and complete information every time. A validation script can detect when information is missing or isn't in the proper format—before the form data is actually submitted to your database or application.

Typically, a script, which is activated by clicking the form's Submit button, handles the form validation. The validation script checks the form to verify that required fields contain data and, depending on the script's sophistication, may also test field content for proper format. For example, the script might check for the presence of an @ character in an e-mail address. If the script detects a problem, it aborts the form submission and displays an error message.

You can create your own form validation script using JavaScript or your favorite scripting language, or you can use one of the many prefab scripts that are available. Dreamweaver users have a choice of several extensions that will add form validation behaviors with a few mouse clicks. From a usability standpoint, the code you use to validate form data isn't important as long as you use some kind of validation on the form to prevent detectable errors causing your application to reject the form. If the form data is rejected after it is submitted, the visitor usually has to start over from scratch. By interrupting the form submission, a validation script allows the visitor to return to the form page, correct the problem, and try again with minimal hassle.

Create meaningful error messages
In order for a form validation script to do its job, the error messages that the script displays when it encounters a problem must be meaningful to the visitor. The message should clearly identify the form field that contains the error and provide instructions on how to fix the problem.

One common problem is error messages that use HTML ID attributes to identify the form element causing the problem. Don't make the visitor guess which field is textbox1. The error message should say something like: "Missing data in the First Name field."

It's your job to make your forms easy to use. A large part of form usability is taking steps to reduce the data entry errors that users might make as they interact with your forms. Your error-control efforts should include good form labeling and instructions to prevent errors, as well as form validation to catch errors before they're submitted to your Web application.

Editor's Picks