Forms
Design simple and clear forms

After links, forms are the controls we use most frequently to interact with the Web. As with links, forms need, above all else, to be operable. An operable form is one that can be completed successfully without error, with ease and minimal frustration. If a user can successfully place an order, apply for an account, or request information, then the form design is successful.

An important aspect of form design is labeling. Form elements must be clearly labeled so users know what information is required. Good labels help users understand what information to provide and reduce the margin for error. Appropriate use of form elements is also an important factor. Designers often use form elements such as dropdown menus to ensure data integrity, such as by having users choose their country from a menu rather than typing it into a text field. However, dropdown menus can become unwieldy when there are more than 10 items in the list. In the case of providing country information, users can more easily type in a country code than choose their country from a long list (Figure 9.1).

In general, good form design is a process of simplification and clarification. When designing a Web form, include only the essential elements, and make sure they are clearly described. Use the form element best suited to collecting the necessary information, always from the viewpoint of the user.

Here are some additional suggestions for effective form design:

• Use simple language. Clearly communicate what information is being requested.
• Provide full details. If a field requires a lengthy description, don’t skimp on details to conserve screen space.
• Use appropriate language. Do not use “surname” or “family name” if “last name” will be more broadly understood.
• Provide examples. When information must be entered in a certain format—such as the date format DD/MM/YY for day, month, year—explain the requirements and provide an example for users to follow. If users enter data in an incorrect format—for example, 3/1/2004 instead of 03/01/04—parse the data into the required format rather than ask users to renter the information.
• Mark required fields. Clearly indicate which fields are required for form submission. Make sure required fields are truly necessary to the task.
• Follow a logical flow. Follow established conventions for gathering information, such as title, first name, last name, company, street address, city, state/province, and so on. For keyboard-only users, make sure the tab order is the same as the visual order of form elements.
• Group related elements. Create sections of elements that relate to the same category, such as personal information, contact information, billing information, and so on.
• Avoid redundancy. Do not ask users to enter the same information more than once. If the same information might apply in multiple contexts, such as an address for shipping and billing, allow users to indicate that the same information applies (Figure 9.2).