Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

For address entry forms, should "State" be a text field or a dropdown? Personally, I find a 2-character text field to be much faster to fill out than selecting from a dropdown. However, the majority of forms that I come across use a dropdown (some showing full state names and others just showing the abbreviation).

Is there some reason why a dropdown would be preferred or is it just a matter of convention?

share|improve this question
    
When I encounter a drop down state choice, I hit the letter 'M' five or six times until "Minnesota" appears. That's a lot more typing than "MN". But it eliminates mistakes (and the resulting error messages) that come from mistyping an invalid entry such as "MB". Any time you eliminate an error message is a usability win. –  John Deters Feb 3 at 21:32
    
@JohnDeters If you had typed 'min' instead of hitting 'm' multiple times, it would have jumped straight to 'Minnesota' (provided there are no other entries that begin with 'min'). Most users don't realize this, but now you do :-) –  cimmanon Feb 3 at 21:57
    
@cimmanon What if the dropdown has states formatted like "MN - Minnesota" or just "MN" instead of "Minnesota"? Then they won't find it and have to start over. –  Matt Feb 3 at 22:13
    
@Matt Try it for yourself? It will stop at the last matching entry. If I try to type 'MN' and it is formatted using the full name, then it won't advance beyond 'Manitoba' (the form I'm using has Canadian provinces listed first). The majority of state/country select boxes use only the full names (especially since many users don't even know the proper abbreviation for their state. Nebraskans, for instance, will use NE, Neb., or Nebr.). –  cimmanon Feb 3 at 22:23
    
Don't forget that you are not the user. You are probably computer-affine and do lots of keyboard input, maybe you are a touch-typist, maybe you have internalized some great keyboard shortcuts. But this is rare among users. Many can work with the keyboard alright, others are only hunt-and-peckers, but outside of the IT demographic, mouse-primary users (hate to take their hands off the mouse to reach for the keyboard) are much more frequently found than keyboard-primary users. –  Rumi P. Feb 4 at 11:35

3 Answers 3

Use a text box, then validate the input.

I'm a developer at SmartyStreets, where we deal with this issue a lot. Dropdowns are notorious for slowing down users because they're hard to navigate with the keyboard. For example, some state dropdowns use "NV - Nevada", others just "Nevada", and some just "NV" -- in any case, it's hard for users to predict what to type. You mentioned this inconsistency yourself. So, users frequently use the mouse, destroying their form-filling groove.

Not only that, but a dropdown with 50+ states in its list is hard to read. The user will spend more time scrolling and have more eye movement than if they can just type their state as "Nevada" or "NV" or whatever they want.

Now, about validating: ensuring that the user typed a valid state is pretty easy since there are just 50 options, and there are several dozen implementations around the web which are ready-to-go. But few truly lend themselves to a good user experience: you'll have to "shop" around and be the judge of that. If the user is typing their address, make sure you validate the address. Here's a jQuery plugin which can be used for free that makes this quite trivial (but see the previous link: dropdowns can be problematic).

As part of my personal vendetta against improper use of dropdown menus, I have a personal mission at work to not only standardize addresses, but also address forms. Again, I'm taking liberty to assume that you're asking about forms which collect not only state names (few do), but in the end, I believe all address forms can be consolidated to just 1 field (see the jQuery plugin linked to above, which supports parsing and validating freeform inputs). Using a single text box or text area makes the whole process smoother and totally normalized: a user can type their input any way they want, and since the input is being validated, using the form no longer becomes a stopper.

For further reading, see my article on my website about the jQuery plugin which, about half-way down, has a pretty thorough rant against dropdowns in address fields (which I mostly just re-typed here; oh well).

I'm rambling now. But you get the idea.

share|improve this answer
    
There's nothing wrong with navigating in a select box with a keyboard (its actually faster than trying to use a mouse for a very long list): the average user just don't know how to do it. All the fiddly JavaScript plugins that recreate the functionality of select fields do is make it more obvious that all you have to do is type. –  cimmanon Feb 3 at 22:03
1  
I like this. Auto-completion directs the user to type the next character you need, rather than what they guess. And for the most part, it helps the user avoid the dreaded "Invalid state" error. –  John Deters Feb 3 at 22:11
    
@cimmanon Unless users know how the field is formatted (e.g. "NV - Nevada" or just "Nevada"), it's slower. They have to guess, and if they guess wrong, they have to start typing over again, because browsers will persist the keystrokes as they "type into" an entry, that turns out doesn't exist. I don't even know how to tell the browser to "forget" my previous keystrokes in a dropdown and start over from the beginning without using the mouse, or tabbing away, then shift+tabbing back. –  Matt Feb 3 at 22:12

I would argue that a good number of people think of the two-letter abbreviation when they think of their state(s). A form that accounts for both short and long-form manual input and a traditional drop-down list would be ideal in my mind. I'm imagining something like a standard text field that validates on either the abbreviation or the full name, and if there's a typo, the field gets an error state and a traditional dropdown list. The dropdown list is always available for the users that prefer to use the mouse.

Input validates on either abbreviation or full name

On error, drop-down opens for manual selection

share|improve this answer

I don't know many "normal" users who navigate forms using their keyboard. Most people I know use their mouse (from interacting with/helping people I work with), and a drop-down/select fits this use case. I personally tend to use my keyboard to tab to the select and then type "C" 3 times to get to "Connecticut". The only problem I see with a text field is that a good number of people may not know the two-letter abbreviation for the State (they're not always selecting the state in which the live, depending on the form), and typing the wrong abbreviation and then submitting the form only to receive a "invalid state" message would slow them down even more. A select limits the choices for the user, and thus prevents errors in validation.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.