This chapter is from the book
This chapter is from the book
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.
E*Trade
Which Dates Are Valid? http://www.etrade.com
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.
){kind=small}
Figure
4.7Limit 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 http://www.united.com
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.8DeepDiscountCD
Improving the Odds http://www.deepdiscountcds.com
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.9Give 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
MM/DD/YYYY and XXX-XX-XXXX http://www.expedia.com and http://www.etrade.com
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.10Yahoo! and Citysearch
Sample Answers weather.yahoo.com and http://www.citysearch.com
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.
){kind=small}
Figure
4.11Form guidance
Alternatively, you can also use the structure of your form to make sure people don't make mistakes.
Dell
Boxed In http://www.dell.com
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.
){kind=small}
Figure
4.12