Drop-down lists are great – when used correctly.
If there’s anywhere between 7 and 15 options, a drop-down list is usually a really good fit. You can put a healthy amount of information in your form without cluttering the entire page, because the list’s options are hidden when you don’t need them.
However, many sites are using drop-down lists with too many options (more than 15) or too few (less than 7), resulting in a poor user experience.
Drop-down lists with too many options
When drop-down lists grow larger than 15 options they become difficult to scan and navigate. Some users will have to start scrolling inside the drop-down list which is a slow and painful experience.
A good example of this is a country-selector with more than 100 options! It’s impossible for the user to get a good overview and there’s no quick and easy way to find the option you’re looking for.
As a user, you first have to figure out the sorting pattern – are the options listed alphabetically, or by some other logic? Then you have to try and get a glance of all the options on the screen and figure out if your option is there. If it’s not, then you have to start scrolling. This is slow and painful. In fact, during a recent usability study, one of our test subjects got so confused that he actually started scrolling the wrong way in a country-selector even though the countries were listed alphabetically.
In cases where the user know what she is looking for in advance, consider using a text field with client-side auto-complete functionality instead. Country-selectors are a good candidate for this solution since people know what country they live in (just be sure to support synonyms and abbreviations so you can map ‘US’, ‘USA’, ‘United States’, and so on, to the same match).
Drop-down lists with too few options
When drop-down lists have less than 7 options they suffer from a lack of up-front information. The user has to click in order to see the available options.
In these cases you are better off using radio buttons so your users immediately can scan how many options they have and what each of those options are, without clicking anything to reveal this information.
Another advantage of radio buttons is that you have more control over the design and content of the labels since this is just normal HTML-code, so if the situation calls for it, you can design more advanced explanations of the available options instead of being limited to a simple text string. (Please use this freedom with care though.)
So if your drop-down list has less than 7 options, consider using radio buttons instead.
All in all, while drop-down lists do have a place in web design, you should always consider whether there’s a more appropriate alternative, such as a text field with auto-complete or a few radio buttons.
Share your thoughts in a comment.
Note: don’t get too stuck on the numbers 7 and 15. These numbers are meant as guidelines, not strict rules.
Update 10 Nov. 2011: We’ve developed a flexible solution for replacing drop-downs with a auto-complete field that can handle typos, multiple spelling sequences, synonyms and prioritization. Read more about it in our Smashing Magazine article Redesigning the Country Selector or try a demo here