Dropdown menus show a list of collapsible options a customer is expected to to make a choice from. They are among the most popular design elements on the internet. Nearly every site has them. Their widespread adoption is due to their incredible space saving abilities which allow for simple and uncluttered interfaces. However, these darlings of web designers can be a UX nightmare when overused or haphazardly implemented.

 

The length

The sweet spot for dropdown options is 6-10. Any shorter and they become needlessly bothersome, while longer dropdowns defeat their purpose entirely.

 

Short dropdowns

Let’s take a signup form for example. A lot of them contain the sex field with two choices: male and female. When implemented as a drop-down, a customers has to click to expand the dropdown and then click again to select their sex. Two clicks just to make one selection out of two options. The outlay in effort required doesn’t match the available options.

A selection like this could be made by use of radio buttons. They’re more elegant and require less effort since a customer only needs one click to make a selection.

 

Overly long dropdowns

This is where you provide so many options, the user is confused for a while. Super long dropdowns also provide navigational challenges, especially on small screens.

The country field is the biggest offender. You go to select your country and boom! 200+ options. It makes no sense to scroll through 200 options just to make one selection. It’s not like people don’t know where they live. 

Some sites also make the grave mistake of putting the more popular countries at the top of the dropdown list. A US based site may choose to have the USA, Canada, and Mexico at the top of the drop-down and order the rest alphabetically. While this simplifies things for your North American customers, those from other parts of the world will be unable to figure out how you’re ordering the list elements and probably give up.

The solution to this is a simple text field with inbuilt auto-completion. Allow your customers to type in their country name and suggest supported names from a back end database.

Examples