Howto build a form that isn't annoying (Part 1)

As a web user filling out a form tends to be a most dreaded activity. While forms will always be mundane to fill out, it is possible to create forms that don't drive the user crazy.

I'd like to challenge some common bad practices, and promote some best practices that are often ignored. My hope is that it will generate some discussion, and with any luck - less annoying forms.

This is the first of a multi-part series on building forms that don't suck.

When asking for a country, use the 2 character country code

Unless you live in Afghanistan you're probably aware that scrolling through hundreds of countries to find yours is annoying.

Fortunately the International Organization for Standardization has defined two character country codes for every country. Wouldn't it be a lot easier to just type in two characters?

Yes you would need to do some validation on the server side, but you should be doing this anyways.

When asking for a US state, use the two character code

For the same reasons as above, it is much easier for me to type NY than it is to find NY towards the bottom of the list, after several other states that begin with N.

This leads me to my first generalization, which I am hesitant to call a rule or best practice, because there are always exceptions:

Don't use a select list when the user can more easily type in what they want.

You can even use some AJAX to display the country or state next to the code once they type it in.

Keep in mind that people don't like to read

If your form is so complicated that users have to read descriptions to figure out how to use it, it may be a good idea to go back to the drawing board.

I wrote a blog entry a while back about a form on T-Mobile that asked for the last four digits of your SSN, or your birthday. The form would throw an error if you entered both. It took me a few tries before I noticed the OR in the instructions.

Use the label tag

I love the label, and I'm not sure why more people don't use it. Not only does it improve accessibility, in most browsers when you click on the text it gives the focus to its associated form element. This is really makes checkboxes and radio options more user friendly because you can just click on the text to select the option.

They also make it really easy to style your forms with CSS.

Here's an example:

<input type="checkbox" name="remember" id="remember" />
<label for="remember">Remember me on this computer</label>