Article overview

Drop-Down Usability: When You Should (and Shouldn't) Use Them

· By · 42 comments ·

Don't use drop-down lists when other formats such as radio buttons are more appropriate.

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.

(Click to see larger image.) Amazon use a drop-down for selecting country. A text field with auto-complete would be a better solution.

Like most e-commerce stores, Amazon force you to select your country from a massive drop-down list. A text field with auto-complete functionality would be a better solution.

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.

Yahoo use a drop-down list for selecting gender where you have to click twice in order to choose your gender.

On Yahoo! you have to select your gender from a drop-down list (users have to click two times instead of one). Two radio buttons would be a better solution.

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

Jamie, Baymard Institute August 5, 2010 Reply to this comment

Just an additional note: when doing synonyms for a country list, you’d want to map multiple countries to ‘America’.

Mr Leo August 7, 2010 Reply to this comment

I agree that huge drop-down lists can be a nightmare… don’t get me started on country lists organised by continent… but if you were to use client-side auto-complete there’s a chance the user will ignore it and type in the country name themselves, increasing the chance of typos. How do we get around that?

UxUa August 7, 2010 Reply to this comment

I think the big list of countries could be overcome by informing the use they can start typing the name of their country as most any modern browser supports this. Also, from a programmatic standpoint, you could try to auto-detect their location and have your best guess selected for them.

tom r August 7, 2010 Reply to this comment

I agree with Mr Leo. If it were just a text field with autocomplete what do you do if the user types jargon? Ultimately you are choosing from a predefined a list so what you’re really doing is searching or filtering. I’m sure it could be overcome, but there’s definitely a bit more experimentation needed.

One other reason drop downs are used instead of radio buttons is that it’s easier to have no selection.

panaghia August 7, 2010 Reply to this comment

@tom_r @MR Leo, just check if the string exists in database.

Caroline Jarrett August 8, 2010 Reply to this comment

Sarah Allen and I wrote an article “Should I use a dropdown?” that goes into this dicussion in more detail. We talk about the benefits of radio buttons compared to dropdowns compared to checkboxes compared to fill-in boxes.

http://www.formsthatwork.com/files/Articles/dropdown.pdf

Although it’s a few years old, I think the discussion still works today.

Gerry Gaffney and I included a revised version of the material as chapter 5 in our book “Forms that work: Designing web forms for usability” www.formsthatwork.com

One way of solving the excessive number of countries problem is to offer a much shorter list of the countries that are typically chosen by the top 80% of your customers, and then offer an ‘other’ selection with a place to type in the name of the country.

This also has the advantage that country names aren’t quite as stable as you might think: countries change quite often, and the names of countries are a matter of political dispute. For example, the “former Yugoslav Republic of Macedonia” has been admitted to the United Nations under that name because of a dispute about the name “Republic of Macedonia”.

There are also some smaller geographical areas where the question of which ‘country’ they are is somewhat complicated. For example, Isle of Man is geographically placed between the islands of Great Britain and Ireland; it is self-governing; citizens are British Citizens but the Isle of Man is NOT part of the European Union; it is a British Crown Dependency and many practical matters are such as defense and diplomacy are dealt with by the British government on its behalf.

I’ve gone into all this detail because it also helps to think WHY you want the information, such as country. Is it purely for postal purposes? For some other reason? Depending on why you want it, you might ask in a different way.

Jamie, Baymard Institute August 9, 2010 Reply to this comment

Thanks a bunch for your comments!

@Mr Leo
As panaghia also points out, back-end validation will solve this (and you really should always do back-end validation if 100% correct data is important to your business).

@tom r
You should include jargon in your country synonyms. And of course, if correct data is crucial to your business, you should of course validate the data in your back-end. Finally, you could just design your auto-complete in such a way that it doesn’t allow entering non-matches.

“One other reason drop downs are used instead of radio buttons is that it’s easier to have no selection.”

I’m not exactly sure what you mean by this. If you write “Blank” or “No selection” or whatever as an option in the drop-down menu, I don’t see why you can’t add this option to a group of radio buttons..?

@UxUa
This is actually one of the guidelines of a usability study we’re currently conducting. Using geo-targeting to automatically select a smart default country is a great way to get around the hassle of selecting a country – whether it be through a regular drop-down field or an auto-complete enabled text field.

@Caroline
I guess your solution with the most popular countries and then an extra text field would solve a lot of political issues. Of course, if you need exact matches for postal reasons, having it all validated against a back-end makes sense. And of course if the data is stored in your back-end for validation, it can also be used in the front-end. But all of this is once again only necessary if absolutely “correct” country names are important to your business.

Another common approach is to put the top 10 countries at the top of the drop-down list so they are available right from the beginning even if they start with a ‘U’ (e.g. United States). It’s important to make this a duplicate, though, as people may overlook this and then get confused that they can’t find United States under ‘U’.

Traveller August 9, 2010 Reply to this comment

“synonyms and abbreviations so you can map ‘US’, ‘America’, ‘United States’”

I think you need to read up a bit on geography. Last time I checked, America was divided into two areas: North America and South America. And USA, US or United States or United States of America is in North America :-)

ALL the countries in North- And South America are inside America.

So people from Cuba, Honduras, Chile, Jamaica, Brazil, Argentina, Venezuela, Bolivia, Canada and Mexico are all americans :-) However, they are not from USA.

Traditional mistakes (USA = America) can not dictate how things should be listed in a website or computer programme.

Christian, Baymard Institute August 10, 2010 Reply to this comment

@Traveller. I can see the original post is a bit unclear on this (no harm intended), which is why Jamie tried to make it a bit more precise in the first comment by saying “you’d want to map multiple countries to ‘America’”.
As such Cuba, Honduras, Chile, Jamaica, Brazil, Argentina, Venezuela, Bolivia, Canada and Mexico should also be mapped to ‘america’ as well.
I have corrected the original post to avoid any further misunderstandings. Thanks for pointing it out.

Jamie, Baymard Institute August 10, 2010 Reply to this comment

@Traveller
“Traditional mistakes (USA = America) can not dictate how things should be listed in a website or computer programme.”

While I certainly appreciate the difference between these two geographic areas, I think if it is a common mistake, then you’d definitely want to display allow for it to be used. At the end of the day, design is about meaning.

If people think of US (or Cuba, Chile, etc.) as ‘America’, then all of these should be displayed, as long as you show the one “correct” version as the result. (So when the user types ‘America’, the auto-complete shows ‘United States of America’, ‘Cuba’, ‘Chile’, etc.)

JT August 12, 2010 Reply to this comment

If scrolling down a long list of dropdown items is “slow and painful” then clearly whoever wrote that software didn’t think properly about how to implement long dropdown boxes. In all windows applications, the dropdown list has a proper scrollbar that you can just grab and throw to whatever position you want. I notice on the mac this is more often not the case (something I’ve always found rather odd actually, dropdown boxes seem to adhere to the same idiom as menus from the menu bar for some reason) – Firefox does seem to have a more sensible implementation which uses proper scrollbars when necessary though, even on the mac.
What software did you use for the usability study you did? Was it just Safari, or was it a combination of different implementations like in Firefox vs. Safari? That would be quite interesting to see, whether there was any difference between the two.

Jamie, Baymard Institute August 12, 2010 Reply to this comment

@JT
It’s true that the Mac’s default implementation of drop downs is awkward. However, we tested this in Firefox so (as you mention) the scrollbar was there.

The slow and painful experience was due to the small, confined space the user had to scroll within, not because the scrolling in and by itself was different from normal scrolling behavior. In the drop down, the user had to scroll 100+ options positioned closely to one another within an area that was approximately 150px wide and 500px tall.

Present that much information in a list with that small boundaries and you end up with a poor user experience which is slow and painful. Since this is how any drop down will present that much information – Windows or Mac, IE or Safari – I believe our conclusions are applicable to drop downs in general.

That the Mac’s default implementation of drop downs lacks the scrollbar just make the experience even more cumbersome I would imagine, although we haven’t tested this so I can only speculate based on my own experience with drop downs in Chrome on the Mac.

Justin August 13, 2010 Reply to this comment

Is it easier on a mobile device to use the select list vs radio buttons?

Roger V August 13, 2010 Reply to this comment

While the auto-complete text input is an OK solution – what if the predefined options are not easily guessed? And what about cases of multiple selections?

Sometimes a large drop-down list that you can BROWSE, not search/filter, is appropriate.

Bob August 13, 2010 Reply to this comment

In extensive drop down lists like country and state entries, you can often type the first letter or two letters quickly with the list opened to find your selection more quickly. Just some insight (which I realize is awkwardly explained to most consumers… “Do what now?”

:-) August 13, 2010 Reply to this comment

on your mobile device get the hand-crank option for those large lists!

Jamie, Baymard Institute August 13, 2010 Reply to this comment

@Justin
It depends on the mobile device you’re using – specifically screen size and browser and default OS drop-down list design. How you design the labels of the radio buttons will obviously have an impact on this too.

If you have 7 or less radio buttons I’d imagine it would be easier but our study was conducted on traditional computer, not a mobile device, so I can’t say for sure.

@Roger V
As mentioned in the post, the auto-complete solution is only relevant in those scenarios where the user already know the options in advance (such as the name of their own country).

Regarding multiple selections, this is supported by many modern auto-complete plugins.

“Sometimes a large drop-down list that you can BROWSE, not search/filter, is appropriate.”

Agreed! This is also mentioned in the post. Drop-down lists can be great as long as you use them correctly.

@Bob
Exactly. We told this tip to a few of our test subjects after the test and almost all of them asked us to show it to them because they didn’t get what we were talking about.

Kawika August 14, 2010 Reply to this comment

Good ideas, really makes one think. Thanks for the guidelines!

Sascha August 14, 2010 Reply to this comment

client side auto complete is a good idea, but you can skip this whole step if you do an ip lookup and prefill the form field.

Kishore August 14, 2010 Reply to this comment

I think screen real estate is also a factor while deciding to go for drop down or radio button.

Keith Humm August 15, 2010 Reply to this comment

Good article, but important for readers to keep perspective. Not every case will be the same, and I think typically the country selector is a slightly bad example.

Two other important considerations here between Radio buttons and drop-down lists are information hiding, and space constraints.

Radio buttons can often display too much information, even when fewer than 7 choices are available. I find (based on very informal research, so no guarantees here!) drop down boxes work much better than radio buttons in cases where both a) a default option is available, and b) alternate choices are very similar or confusing.

The other consideration is space. Sometimes it may be beneficial to have areas of a form visible, and a radio set may push these further apart.

Simple things, and common sense to some degree, but a lot of people forget.

Bennett McElwee August 16, 2010 Reply to this comment

Radio buttons aren’t so good for viewing information. This:

Sex: [Female ∇]

May be quicker and easier to skim than this:

Sex: Ο Male Θ Female

(Please excuse my Unicode art.)

A current project of mine features dropdown menus for everything, including yes/no questions. Initially I thought this was just ridiculous — that’s what checkboxes are for! — but now I see its use. When information is edited once or twice but read many times, the dropdown has the advantage of hiding all unused options. This follows on from Keith’s comment above — there’s no chance of misreading the answer.

Ruben Vandenbussche August 16, 2010 Reply to this comment

My first impression after reading this article was: why 7?

My opinion is that making the choice between a dropdown and radio buttons depends on several factors:

Length of the form: Users are scared of the length of some forms.
Possible answers: You don’t want 2 lines of text in your dropdown menu.
Possible answers: Obvious answers can be in a dropdown. Like a country selection. But if the answer need more attention do it in radio buttons.

Just a few factors that are case dependent.

Jamie, Baymard Institute August 17, 2010 Reply to this comment

@Kawika
Thanks.

@Sascha
Yes, using geo-targeting to auto-select the right country is actually another guideline in our report. Although it’s not always possible for small sites due to the required investment in an IP-database (and upkeep of keeping the database up-to-date).

@Kishore
Very true. In fact, there’s only two reasons to use a drop-down instead of radio buttons: 1) to save space (as you also point out), and 2) to hide data and only display it when relevant.

@Keith Humm
Thanks for your thoughtful input Keith, and you’re absolutely right. Our article is meant as a guideline, not a strict rule. As with any other design decision, you should always take the context into consideration.

Saving space and hiding data until it’s relevant are the two reasons to use drop-downs as opposed to radio button, so if any of those two attributes are important to your design, you should obviously feel free to break this guideline – as long as you know why you’re doing it.

@Bennett McElwee
If you do use forms for viewing data, this is a great insight. However, in most cases I’d use a separate view for reading information, simply because you have so limited design control over form fields, so designing the optimal reading platform will only be possible by having a separate view. In cases where you mostly read but also need to be able to quickly edit incorrect input and/or resource constraints force you to use form fields for viewing data, in those scenarios this definitely holds true and will be a valuable design insight.

@Ruben Vandenbussche
True – context should always trump guidelines.

As long as you have a good reason for breaking a guideline and know why you’re doing this, then by all means, go ahead. This goes for all design guidelines.

Regarding “why 7”, we do state at the very end of the article that you shouldn’t get too hung up on the specific numbers, but rather use them as “guidelines, not strict rules”.

Richard BF September 29, 2010 Reply to this comment

@JT just a quick note that Apple specify that a pop up menu (drop down list) shouldn’t contain more than 12 items, otherwise it should be implemented as a list box, which obviously does have a scroll bar. Mac drop downs that have too many options, are that way because the developer didn’t conform to Apple’s guidelines, not because drop downs are badly implemented.

SandyS November 14, 2011 Reply to this comment

Nice, but how would a screen reader like JAWS handle this?

Kestrel Blackmore November 23, 2011 Reply to this comment

I had this exact issue except it was with suburbs loading up in a drop down select box.

It wasn’t actually the ability to find the suburb that was annoying, it was the time it took to load the drop down select box! Even with caching it was unsatisfactory.

Then imagine having 3 drop down select boxes on one page all which load suburbs!!

I ended up going with a type in box that uses Ajax to return matching suburbs as the result.

Kris November 27, 2011 Reply to this comment

Hi Christian,

Very thoughtful idea. I really appreciate your effects. I have read few comments about the ip config, without selecting the country select. I am working a ecommer website which we have more than 200 countries. Suppose if US user enters different country and try to order a product from our site, the ip config wont work, thought they still clear the cookies it shows only ip selected country. which this solution wont work? Just a thought.

Marc December 1, 2011 Reply to this comment

I really appreciate this article, especially when it’s tied together with your Country Selector redesign. Little things like drop down lists for 3 options (or 100) make the web a less friendly place to use, compound that by registering/purchasing/sending/etc dozens of things on dozens of different websites makes it that much more frustrating.

I took the time to consider all the user actions in a recent project and found that dropdown menus were quite a clumsy user experience.

Jamie December 6, 2011 Reply to this comment

I’ve never had a problem with country selection lists because in all of the ones I’ve used, you can simply type out the country name and it will take you to it in the list.

Normally I just type the first few letters and was moved to that part of the list. I would agree that without this functionality, this would be very problematic.

Fernando February 11, 2012 Reply to this comment

Great points!

I am wondering what would be the veredict on having a multi-select list with the “default” option of “* No Selection *” (that is, the “no selection” is actually one of the options available to pick).

I ask because often we need to give the user a way to “unselect” or reset the selection on a multi-select list and I believe it is better than having a separate “Clear” button.

What are your thoughts on this?

Kevin April 20, 2012 Reply to this comment

Just based my checkout process on this post. It better work ;)

Christian, Baymard Institute June 4, 2012 Reply to this comment

Let me know how it works out for you.

Kevin August 6, 2012 Reply to this comment

Definitely works!

Nathan S January 21, 2013 Reply to this comment

What would be your suggestion for a Date Of Birth entry on mobile? The year dropdown which is usually used is going to be 100+ options long. Is a text entry field a better user experience in that instance?

Miked February 21, 2013 Reply to this comment

It is also important to think of the ‘Please select’ label in drop-downs and how that relates to other input methods…
How about this as a list of guidelines:
Use a checkbox when there is a binary choice, on/off, enabled/disabled, etc
Use radio buttons when there are two or more mutually exclusive choices and you have an intentional preselected or default value
Drop-downs when you have more than two items, but less than 15 (for sake of argument), where none are preselected/default.
Series of drop-downs where there are more than 15 items, i.e. continents/countries, manufacturer/model, etc.
Text field with auto-complete if more than 15 items (the user must obviously know what they are looking for in this case)

UX O2 August 7, 2013 Reply to this comment

“Sometimes a large drop-down list that you can BROWSE, not search/filter, is appropriate.”

Follow-up to the comment above:

For the use case were users do “not” know or is not familiar with the options in a drop down list;

what is a recommended approach for using a drop down list for a very long list of options? One that is a required field,in a data entry form used by Admins for data entry.

Are there example links of recommendations?

mohamed fawzy March 12, 2014 Reply to this comment

it works great but

if it works in a form have other selects,
other selects will work like normal text ,,,

how to make the css just for this control only —→(country)
& not all select in my form.

mohamed fawzy March 12, 2014 Reply to this comment

many thanks it woks great after i change the selector from select to
my select by id … many thanks

Matto November 11, 2014 Reply to this comment

@UX O2 we are struggling with the long list issue. We are currently designing a mobile application for smart phones. On particularly long lists that a user is required to select, We are thinking of displaying the top 15 items based on usage (data in the database for the last couple of months). At the bottom of that list display “other” with all the remaining options.

Elibeth Scott November 18, 2014 Reply to this comment

I love the way in which the three cases for drop-down lists are framed:) Thank you:)

Alicia Stark December 10, 2014 Reply to this comment

I really didn’t know the advantages/disadvantages of radio button and drop down list till the time I read this article. I guess I stumbled upon great content.

Post a comment!

Close overlay