Bulletproof Your Forms
- Provide sample entries, pull-downs, and formatting hints to ensure clean data
- Explicitly state limits to characters, number of entries, and so forth
- About This Article
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Let's admit it: Things will go wrong online. No matter how carefully you design a site, no matter how much testing you do, customers will still encounter problems. Sites must plan for these inevitable breakdowns with defensive design.
Effective form contingency design is a great way to boost conversion rates. Customers don't want to guess, so be sure to provide examples of how to enter information. Too, let visitors know ahead of time what the acceptable entries are.
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 data is properly formatted:
Limit the range of entries.
Give formatting examples.
Form guidance.
Use HTML form elements to ensure valid submissions.
Provide correct sample entries to prevent confusion.
Use form layout to guide people in the right direction.
E*Trade: Which Dates Are Valid?
)
Figure
4.10
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.
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
)
Figure
4.11
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.
DeepDiscountCD.com: Improving the Odds
)
Figure
4.12 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.
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: MM/DD/YYYY and XXX-XX-XXXX
)
Figure
4.13 http://www.expedia.com
)
Figure
4.14
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.
Yahoo! and Citysearch: Sample Answers
)
Figure
4.15 weather.yahoo.com
)
Figure
4.16
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.
Form Guidance
Alternatively, you can also use the structure of your form to make sure people don't make mistakes.
Dell: Boxed In
)
Figure
4.17
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.