On my last two trips to Lowe’s and Home Depot I got a survey invitation printed with my receipt. When I took these surveys on their websites I saw a user interface problem that is commonly found in web applications: forcing the user to input data like you (the company) want to see it.
Your web application may require the customer to input data that isn’t familiar or that could be entered in numerous formats. Your job is to make that data entry as easy and quick as possible.
Examples
When asking for user input, provide some examples and hints as to where they’ll find the necessary information. Both my surveys asked for the numbers printed on my receipt. Home Depot was nice enough to show a sample receipt:
Lowe’s provided an example of what the number would look like:
I was able to easily identify which numbers to enter but then I hit a little annoying snag.
User Inputs
Lowe’s insisted that I input the numbers into several sequential text boxes. Home Depot wanted me to include the space between the numbers. Why can’t I just type in the whole number, spaces or not into one box? I could then avoid having to tab between boxes (Lowe’s) or move from the numeric pad on my keyboard to hit the space bar (Home Depot).
When you boil down the inputs both surveys requested, you get an integer. Programming languages are great at parsing data and can even reformat it on the fly. Don’t force the user to input data a certain way when you can handle it programmatically.
Common Inputs
Web users are often asked to format data as they enter it. Data that is frequently displayed with punctuation and spaces can often appear in numerous formats. An individual’s preference will dictate how she would normally write out the information. For example, one could write (123) 555-6789 or 123.555.6789 for a phone number. Other types of data lend themselves to programmatic formatting by the web application as well:
- zip codes with/out +4 extension
- credit card numbers
- dates
- social security numbers
- serial numbers
- decimal numbers (i.e. 1,5 vs. 1.5)
- abbreviations
- license plate numbers
Simple Inputs
Keep your web application’s user inputs as simple as possible. You can use your programming skills (or someone else’s) to format data for company use on the server and out of the user’s sight. Forcing the user to input data a certain way will cause delay, possible confusion, and could lead to errors in your application.
The simpler the interface, the quicker a customer can get through the required steps and get on with their day. Leave the heavy lifting of formatting to your application.