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

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Form Usability

Last updated Oct 17, 2003.

My local area was one of the first to require dialing the area code for local calls. Remembering was difficult at first, but not after a short time since this practice spread to other locations. This change also impacted a brand new telephone that had a cool feature where you add a phone number to the address book straight from caller ID.

One problem, it recorded only the latter seven digits of the local caller's phone number; or it included all ten digits plus the 1 in front turning it into an invalid number. The feature rendered useless.

Forms are frequently left out of the usability equation especially for telephone numbers.

Picky Phone Numbers

When there is one box for the phone number, do you use dashes to separate the three parts of a phone number or put parenthesis around the area code? I've seen sites requiring the phone number in the following formats:

  • (XXX) XXX-XXXX
  • (XXX)XXX-XXXX (no space)
  • XXX-XXX-XXXX
  • XXXXXXXXXX

Or they provide three boxes, the first for the area code, the second for the prefix, and the last four digits. Some forms automatically move the cursor from box to box without tabbing while others expect you to do it. Although it's easier to enter a number without tabbing, many often tab anyway because they never know whether or not the cursor moves automatically or manually. Smart forms handle both. I've seen it.

The designers of such sites anticipated my "mistake" or "way of handling the situation" and ensured entering the phone number would work whether or not I tabbed. However, is it easier to use one box instead of three?

Yes, it is. In such situations, we don't tab and it saves us two steps in entering the phone number. However, when using a single box, the design should anticipate and accept all variations instead of a following a specific format. This is defensive designing. Preparing for user mistakes or approaches.

Cursors Foiled

When going to google.com, what's the first thing you're likely to do? Enter search keywords. Google knows this and places the cursor in the search as soon as the page loads. Amazon doesn't do this. When going there, I either use the search box or click a link or tab. It depends. Amazon can save a step if it'd put the cursor into the search box. If I click a link instead, no harm done. It still works.

Amazon has two search boxes: one for the site and the other for A9. Tab a few times, and the cursor is in the A9 box.

When a form begins lower on the page, it may not be a good idea to have the cursor appear in the first box because some navigate using the tab. They wouldn't want to discover the tab starting way down the page. No straight rule exists (when does it ever?). Hear the chorus reciting, "The key is to think about accessibility and the user's needs. Keep it simple."

Invalid Entries

Have you gotten an error after accurately completing a form? This happened with a form stating to enter either a zip code or a state. Despite providing a zip code, an error message appears, "You must enter a zip code." Trying again and selecting a state this time and same results. Enter zip code and state. Still errors. This formula leads to one annoyed user. Ouch.

Then to make matters worse, finding contact information proves impossible. This occurs too often especially when submitting the form and getting a server processing error.

The form may have worked during the testing phase prior to launching the Web site or updated Web page, but servers and dynamic Web sites hiccup and create errors. My site experienced such problems without my touching the code or markup. Spot checking on a regular basis helps as well as providing an no brainer way for people to contact you.

Your site has worked hard to lead the users to registering, filling an order, or requesting data; a misbehaving form could lead to a lost sale, lost customer data, or lost reader. The extra time spent on "defensive forming" pays off when forms cooperate and expect user mistakes or different ways of completing a task.