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

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
This chapter is from the book

Guideline 10

Provide sample entries, pull-downs, and formatting hints to ensure clean data

Few things frustrate a form-filler more than being told an entry needs to conform to certain standards after the form is submitted. Give visitors a break by being upfront about acceptable parameters. Use sample entries, pull-downs, and formatting hints to avoid a breakdown. These tools will minimize confusion and help people quickly complete forms. This guideline will show you how to use these techniques to ensure that data is properly formatted:

  • Limit the range of entries. Use HTML form elements to ensure valid submissions.

  • Give formatting examples. Provide correct sample entries to prevent confusion.

  • Form guidance. Use form layout to guide people in the right direction.


Which Dates Are Valid?

I entered "7/2/03" as a date at E*Trade, but this message informs me that this is an "invalid date." Unfortunately, E*Trade never explained the proper way to enter the date prior to entry or why the date entered was invalid (impossible date, bad format, or so on) after entry.

Even worse, E*Trade's error message still doesn't tell me the right format to use. Should it be 7-2-03 or 07/02/03 or something else? E*Trade's unspecific response is an invitation to additional frustration. The site should clearly indicate the proper date format to use.

Figure 4.7Figure 4.7

Limit the range of entries

Open-ended text fields leave plenty of room for error. When given free range, visitors often wind up submitting entries that are unacceptable for one reason or another.

How can you make sure visitors stay between the lines? Pull-downs, list boxes, and check box lists can limit the range of entries to only those who you deem acceptable. These tools provide a nifty way to nudge customers in the right direction.

United Airlines

Month Pull-Down

There's no way to enter an invalid date at United's site because of the pull-down menus used for date selection. This simple technique prevents mistakes and keeps visitors on track. Pull-downs are also used to ensure acceptable responses for the number of travelers, service class, flights per leg, and other fields.

Figure 4.8Figure 4.8


Improving the Odds

DeepDiscountCDs uses pull-downs to keep credit card type, date of expiration, salutation, state, and country data accurate. This improves the odds that I will successfully complete the form on the first try.

Figure 4.9Figure 4.9

Give formatting examples

If you don't use HTML form elements to limit entries, make sure you explicitly tell visitors the correct format to use.

Expedia and E*Trade


What date format should I use at Expedia? The hint "MM/DD/YY" makes it obvious. Should I use hyphens for my Social Security number at E*Trade? Yes, according to their format hint. Without this information, I would be forced to guess the acceptable formats.

Figure 4.10Figure 4.10

Yahoo! and Citysearch

Sample Answers and

Yahoo! Weather and Citysearch both provide examples of proper search submissions. This lets me know what a "good" entry looks like and increases the odds of a successful search.

Figure 4.11Figure 4.11

Form guidance

Alternatively, you can also use the structure of your form to make sure people don't make mistakes.


Boxed In

What's the right way to enter a phone number at Dell? The site uses separate text boxes to eliminate any doubt. This greatly reduces the possibility of making a mistake.

Figure 4.12Figure 4.12

  • + Share This
  • 🔖 Save To Your Account