A Better State-Province Selector for Your Web Forms
Fri, April 23, 2010 at 9:48 AM
Paul Cormier in Design, Usability

I've never liked the standard implementation almost every web site uses to select your State or Province in a web form. Selecting one out of 50 or more items from your traditional dropdown list is a pain in the butt. This morning, I've come across a simple and elegant solution that I'd like to share with you.

Let's begin by reviewing the issues associated with gathering State-Province data in a web form.

Why not use a text input box?

Well, that is a viable option, but then you must deal with typos, capitalization, validation and error display. It requires at least two keystrokes from the user and is inherently more prone to error.

OK, so that leaves a dropdown list or combobox.

Semantically, there can be a slight difference between the two. A dropdown list forces you to make a selection from a predetermined list. A combobox can be configured to permit text entry NOT in the presented list. (e.g. like the suggested search terms in Google's search box.)

It's just too long a list!

Trying to present the 50+ options in a list simply makes it physically too long, requiring scrolling. Scrolling means extra clicks. Extra clicks means extra work for the users. Extra work for your users, creates both an unpleasant experience, and a higher abandonment rate. That's bad.

Incorrectly sorted?

Many users like filling forms using only the keyboard. In fact, some of your site visitors may have an impairment that makes the use of a mouse difficult. Here's an example of a keyboard-only session:

I'm filling out the text entry fields, and I've tabbed over to the State/Province selector field. I want to select "Maryland". The standard behavior of a normal html dropdown list is as follows.

I hit "M" on the keyboard to select Maryland and "MA" Massachusets is selected. What do I do next?

  1. If I hit "A" to continue spelling Maryland, I end up selecting "AK" Alaska.

  2. If I hit "D" to continue spelling "MD", the two-letter abbreviation for Maryland, I get "DE" Delaware.

How many users know you need to keep hitting "M" to cycle through the items that start with "M"?

Even if you knew that, it can still be a problem. Is the list sorted by the full state name or by the two-letter abbreviation? Of course they don't match.

State Selector Panel

An elegant solution

I ran across this solution on HGTV's website. The state selector looks like a traditional selector box when first viewed. However, rather than presenting a long, scrolling list of items when clicked, instead, an attractive, compact panel displays a 6 by 10 array of all 56 US two-letter postal abbreviations.

These can easily be scanned by the user without scrolling, and the desired value quickly selected with a single click. A close dialog "X" hint is also displayed in the top-right corner to cancel selection.

Unfortunately, keyboard selection behaves the same as a regular drop-down list. My suggestion would be to instead use the first keystroke as a filter.

For example, pressing "M" would open the panel displaying only the States-Provinces that begin with "M". The second keystroke would complete the selection.

Is it compatible and accessible?

A quick scan of the source code reveals that there is a standard selector in the underlying code. That means it should be quite compatible, degrade gracefully, and is likely accessible by screen readers.

I found this implementation to be a great improvement over the traditional State-Province selector in both visual appeal and usability. I will start implementing State-Province selectors and other long lists this way in my own site designs.

If anyone finds or can recommend a JQuery plugin to accomplish this, please leave a comment.

Technorati Claim: RF8VQR6QR74X

Article originally appeared on (https://www.webmasterymadesimple.com/).
See website for complete article licensing information.