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
selectlist 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.
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.
Here's an example:
<input type="checkbox" name="remember" id="remember" /> <label for="remember">Remember me on this computer</label>
- Howto Build a Form That Isn't Annoying (Part 2) - May 3, 2006
- Accessibility and Usability in Forms Outline - February 14, 2006
- Let the computer do the formatting - December 22, 2005
- Keep in mind that users don't read - August 15, 2005
- ColdFusion returning empty response with server-error: true
- Careful applying CF11u16, CF2016u8, CF2018u2
- Sessions don't work in Chrome but do in IE
- csrfVerifyToken does not invalidate the token
- The cf_sql_ is optional in cfqueryparam
- Cookie Expires / Max-Age 1969-12-31T23:59:59.000Z
- Burst Throttling on AWS API Gateway Explained
- How to Resolve Java HTTPS Exceptions