Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Designing Usable Forms

Last updated Oct 17, 2003.

By Sarah Horton, author of Access by Design: A Guide to Universal Usability for Web Designers

Forms make the Web a two-way street, with users taking the wheel in both the inbound and outbound lanes as consumers of and contributors to the information and services on the Web. With good design, users are able to navigate the road to success without encountering bumps or roadblocks along the way that make it difficult or impossible to complete their tasks. In the case of form design, the designer’s role is to clear the way so that users can be successful with form completion and submission. With a variety of form elements on hand to collect information from users, designers need to know how to choose the right tool for the job.

It's important to emphasize usability in form design because forms are for collecting information, and the right approach for usability may not always be the same as that for data integrity. For example, we get better data when users select an option from a select menu then we do when they type information into a field. However, select menus can be difficult to use when they contain many options. For example, try working your way through the country select menu on the British Airways Global Gateway page. It's easier to type in a country name than scroll through the list, particularly if you're from Zimbabwe. Since this article is about designing usable forms, we'll focus on designs that improve usability and ask that the programming gods watch over data integrity.

A whole book could be written on form design. This article touches on only two of the many form usability issues—namely, those associated with element labeling and menus. More form usability information can be found in a related Web Design Reference Guide article on designing forms for keyboard access.

Labels

Perhaps the biggest challenge for Web designers is making efficient use of limited screen real estate. One economy is to leave off form field labels and communicate the purpose of fields through other means: for example, a form field followed by a "Search" button, or a select menu with "Select a page" as the first option. However, when we rely on clues and conventions to communicate the function of form elements, users must decipher the design to use it effectively.

Another approach is to create text input fields using default text, or text that displays in the field. This approach seems ideal—the field is labeled without taking up precious real estate. Typically, the default text disappears when the user clicks or tabs into the field, which means the label only serves its purpose if you read the text before activating the field. For nonvisual users who must activate the field to read the text, the field is essentially unlabeled, and this approach presents usability problems for visual users as well. Try using the search interface at InfoSpace. Click or tab in and out of the text input fields, and then try to remember which information was requested. The limitations of this approach are painfully clear on the White Pages search (see Figure 1), where the required input format is also detailed in the default text. Once that label disappears, we're left to wonder, was it FirstName/LastName or LastName/FirstName, and what was that asterisk about? The only way to regain the labels is to reload the page.

FIG 9.1

Figure 1: InfoSpace uses default text for labeling text input fields

As we can see, efforts to avoid labels and save screen space may lead to misinterpretation, error, and frustration. On the other hand, a form label cuts through all ambiguity by telling users what information is expected in the form field. And form labels benefit both users and developers. The interface is more usable, the information collected is more accurate, and there are smiles all around!

HTML provides a method for explicitly binding labels to form elements. The <label for> tag associates a form label with its form element using the ID attribute (see Listing 1, Example 1, and Figure 2).

Listing 1

<label for="search">Search for:</label>

<input id="search" name="search" type="text" />
<input name="Submit" type="submit" />

FIG 9.2

Figure 2: The label for tag binds label and field

Field labels can also provide prompts about how to complete the form successfully. Often fields require data to be input in a particular format, such as a phone number or date. Often certain fields must be completed for the form to be submitted. By making this information part of the label, you ensure that users know what is required, thereby improving their chance for success and the accuracy of your data (see Listing 2, Example 2, and Figure 3).

Listing 2

<label for="name">First Name:</label>
<input id="firstname" name="firstname" type="text" /><br />

<label for="name">Last Name:</label>
<input id="lastname" name="lastname" type="text" /><br />

<label for="name">Birthdate (YY/MM/DD):</label>
<input id="name" name="name" type="text" /><br />

<label for="email">Email (required):</label>
<input id="email" name="email" type="text" />

FIG 9.3

Figure 3: Field labels with prompts

Menus

Menus reduce the margin for error by presenting users with a set of choices rather then relying on text input. There may be instances, however, when text input is more efficient than menu selection. For example, typing in a birth date is easier and quicker then selecting a month, day, and year from individual drop-down menus. When considering menus, make sure a menu is the best and most usable option for the type of information requested. The following guidelines describe the appropriate use of different types of menu elements, and Listing 3, Example 3, and Figure 4 illustrate those elements in action. Note in this example that "quantity" is not a dropdown menu, but rather a text input field because it is easier to type a quantity than to select one from a menu (and because I might want to order a lot of coffee).

  • Use radio buttons and select menus for menus that support one choice among two or more choices. Radio buttons show all options on the page, which makes them easy to scan, yet takes up screen space. Conversely, select menus use space more efficiently, but are more difficult to scan. Avoid using select menus when the number of options exceeds what can be comfortably scanned and requires extensive scrolling.
  • Use checkboxes for menus that support more than one choice. Use a single checkbox for binary selections (yes is checked, no is unchecked), and do not set the default to checked. Instead, allow people to explicitly request that you save their username and password, send them email newsletters, or share their personal information with other vendors.

Listing 3

<label for="item">Item:</label>
<select id="item" name="item">

<option value="columbia">Columbia</option>
<option value="costa">Costa Rica</option>
<option value="espresso">Espresso</option>
<option value="french">French Roast</option>

<option value="kona">Kona</option>
<option value="mocca">Mocca-Java</option>
</select><br />

<label for="quantity">Quantity:</label>

<input id="quantity" name="quantity" type="text" size="3" />

<fieldset>

<legend>Options:</legend>
<input id="whole" name="options" type="radio" value="whole" checked="checked" /><label for="whole">Whole Bean</label>

<input id="ground" name="options" type="radio" value="ground" /><label for="ground">Ground</label>

</fieldset>

<input id="subscribe" name="subscribe" type="checkbox" /><label for="subscribe">Subscribe to our newsletter</label>

FIG 9.4

Figure 4: Illustration of menu options

Resources

All too often, Web users encounter forms that are difficult or even impossible to complete successfully. Poor designs often arise when other requirements take precedence over usability. And while other factors may be important to your Web enterprise, user success and satisfaction are tied to loyalty, which in turn links directly to outcomes—financial or otherwise. Since forms provide the lion's share of what is experiential and interactive about the Web, user success must be paramount in making decisions about form design.

Check out the following resources to learn more about designing usable forms and to explore the connection between user experience and loyalty:

  • WebAIM has a useful tutorial on Creating Accessible Forms. As with most every instance of universal design, forms that are accessible to people with disabilities are more usable for everyone.
  • Jakob Nielsen talks about the usability problems with select menus in his Alertbox article, Drop-Down Menus: Use Sparingly.
  • The Loyalty Elephant, by Steve Hoisington and Earl Naumann, provides a great overview of the relationship between user success and customer loyalty. Mark Hurst's Good Experience site and newsletter also provide great insights into the benefits of good user experience.