Dropdown menus often get a lot of flak from the UI/UX community, and it is usually with good reason. When done badly, dropdown menus can become ugly and overwhelming.

Deciding when to use a dropdown menu or a different interface type such as radio buttons or open text fields can be a bit tricky at times. On an ecommerce website, for example, most users will likely encounter dropdown menus when navigating the checkout flow and probably for a wide variety of inputs.

However, large-scale usability testing has shown that using dropdowns for inappropriate input types may actually slow down checkout completion times, as well as lead to potential field validation errors and users unnecessarily devoting their attention to optional fields. All of this ultimately leads to an increase likelihood of users abandoning the checkout process.

This article will look at how and when you should and should not use dropdown menus and hopefully clear a few things up so you can make better design decisions for the benefit of your users. It will touch on:

  • why dropdown menus should be avoided when there are too few options but also too many options
  • why and when text fields or radio buttons are a better choice than dropdowns
  • what alternatives you should use for three required checkout inputs which are often in the form of dropdown menus – Credit Card Type, State, and Shipping Method

Before delving into that, however, let’s go ahead and take a look at some common scenarios where designers usually use dropdowns:

  • command menus – these are options which initiate actions based on the selected parent option (e.g. the “Publish” option in Microsoft Word which splits into “Publish” and “Publish as Draft”)
  • navigation menus – typically used on websites to indicate that a page has multiple subpages which users can visit
  • forms – in this case dropdowns allow users to select one of multiple options available for completing a form
  • attribute selection – in this case a dropdown menu can allow users to choose a value out of multiple available ones

While initially the terms “dropdown box” and “dropdown menu” were used interchangeably to refer to the same thing, over time the terms have seen a functional distinction between them. Nowadays, a dropdown menu typically covers the first two uses of dropdowns outlined above – command menus and navigation menus, whereas a dropdown box is generally a method of choosing an option inside a form or selecting an attribute.

Dropdown boxes typically look different than dropdown menus in that they have a dropdown arrow next to them and their purpose is to allow users to select attributes or enter data in a form. They are usually supported by a field label or a title which is also the first item in the dropdown box so that users can see it before actually interacting with the dropdown. While Windows and MacOS handle dropdowns differently, they both differentiate between command menus and attribute selection menus.

Dropdown design guidelines

Dropdowns do have some advantages, among them being the fact that they save screen space and are so widely used and understood that everyone knows how to use them. Additionally, when they are used in forms or for attribute selection, they prevent users from entering erroneous data since the dropdowns only show legal choices.

However, despite the advantages that dropdowns bring, web usability would generally increase if they were not used as often. Here are some guidelines worth considering:

  • avoid using interacting menus – this means menus which have options that change based on selections made in other menus on the same page. Options appearing and disappearing can be confusing to users and it is usually difficult to make a desired option appear when this depends on another selection somewhere else.
  • gray out unavailable options – instead of simply removing an option, graying it out is considered a better practice. If you want to go an extra step for your users, consider adding a short balloon message when hovering over those unavailable options to explain to them why exactly they cannot select them and what they can do to make them available. If you remove options, the UI loses spatial consistency and becomes more difficult to learn.
  • long dropdowns – these make it impossible for users to see all their available choices in one glance. Additionally, they may require careful steering so that the cursor does not leave the dropdown.
  • avoid dropdowns when typing may be more convenient – a typical example could be lists of states or countries. It is much easier and faster for users to simply type NY, for example, than scroll down a dropdown and select the state from a long list. Open text forms with restricted options do need validation, but from a usability standpoint, they are a much better choice.
  • avoid dropdowns for highly familiar data – this includes dates. This information can be hardwired into users’ finders and requiring them to find the correct options across separate long lists breaks the previous guidelines and creates unnecessary friction.
  • always keep labels or descriptions in view – titles remind users what they need to choose, and whenever they are obscured or removed when a dropdown is open, they must remember what they need to select.
  • keep global navigation options always visible on desktops – if you bury your site’s top-level categories you may be making navigation difficult for users.
  • support keyboard navigation within dropdowns – whenever users are faced with a dropdown, good accessibility practices state they should be able to navigate the dropdown with both a mouse and just a keyboard. At the same time, users should also be able to press a key and jump down the list to the first option that starts with that letter and subsequently to the next ones.

Avoid dropdowns for more than 10 options or less than 5

The matter of the number of options available is worth looking at more in depth simply because it is such an important factor to consider.

Dropdowns can quickly become cumbersome when users are given too many options to choose from.

Let’s take for example the country selection menu included in so many checkout pages. There are three main issues with dropdowns that have such a large number of options:

  1. no overview – seeing more than 20 uncategorized options can be confusing and intimidating to users, making it difficult for them to find the input they need. Long dropdown lists can be very difficult to get an overview of. While lists of countries may not be as bad because they are sorted alphabetically, they are still not ideal.
  2. scrolling issues – there can be multiple issues that crop up with long dropdown lists. For example, if the cursor is outside of the actual dropdown, users may instead scroll down the page, closing the dropdown list. Other times, the dropdown list will scroll whenever it is in focus, potentially leaving users with erroneous data.
  3. inconsistent UI – the user interface of dropdowns looks different from browser to browser as well as from OS to OS, and it sometimes even works differently. Some websites also use custom UIs for their dropdowns which can bring their own set of issues, such as them being too short relative to the available space.

It is worth noting, however, that there can be exceptions. For example, the “Reason for return” dropdown on Amazon has 12 options, which is a bit more than what is generally optimal for dropdowns. In this case, however, where the input needs to be formatted a certain way, a dropdown outweighs the benefits normally provided by an open text field.

Conversely, if there are just a few options in a dropdown list, the space savings of using a dropdown are small when compared to the friction created by requiring users to click to reveal the available options. Additionally, if the input is optional, most users may still open a dropdown just to see what it contains, but then immediately close it without selecting an option. This tends to happen even when the input is clearly marked as optional.

Whether your dropdowns have only a handful of options or whether they have more than 10 options, they are not an optimal interface choice, as they can be intimidating, difficult to navigate, and can even introduce friction by hiding information which could have easily been exposed.

Alternatives – text fields & radio buttons

If a particular input has more than 10 options, but the input itself does not require validation, then an open text form field will likely be a much simpler option than a dropdown.

For example, a “full name” field eliminates the need for the optional “title” and “suffix” dropdown, while still supporting these additional details.

In other cases where the input does require validation, such as country selection fields, a simple and well-performing alternative is an autocomplete field. This eliminates the issues present with dropdown lists, letting users type the input themselves.

To make things easier for users, as they begin typing their country, the field can suggest possible matches, making the task quicker and simpler. The field can also support typos and sequencing, as well as recognize synonyms or common names or abbreviations to make the process even more user friendly.

Then there are radio button interfaces which are often the better choice instead of dropdowns with few options. The reason for this is that users are not required to open it to see the options available to them.

Checkboxes could also be an option, but these are preferred when users have to choose between opting in or out of something, requiring more attention on their part. For example, they can be used for subscriptions, applying for additional options such as insurance, confirming that the billing address is the same as the shipping address, etc.

Better alternatives to three specific checkout fields

As mentioned above, there are three specific checkout fields which are often implemented as dropdowns during the checkout process but would serve users better if they were implemented differently.

The “State” field is one such example. This field could be eliminated completely if zip code autodetection were implemented, giving users one less interaction to worry about.

Shipping method fields are another example of bad dropdown implementation. These fields are often overlooked and not perceived as important when in a collapsed state, which is why radio buttons are much better suited for this scenario – like on Amazon, for example.

Then there are payment or “Card Type” fields. The first digits of a credit card number are enough to determine what type of card it is. As such, asking users to identify their cards only introduces needless friction.

How to know when dropdowns are an appropriate choice

Testing generally reveals that open text fields or radio buttons are the preferred implementation instead of dropdowns with either too few or too many options. That is not to say, however, that dropdowns should never be used in such contexts, especially when there are too many choices for users.

If there are over 10 possible options and the optional input has to be either submitted in a known, structured format for validation, or if users simply don’t know what the options are upfront and thus can’t type them, a dropdown may be a good choice.

Dropdowns with very few or many options do, however, warrant some extra scrutiny to ensure that they really are the best choice. You should always consider the specific site and the field context when deciding whether to use a dropdown or not.

Most of the time, however, like in the case of inputs such as “Title,” “State,” “Country,” and so on, there are likely better alternatives available which will help users complete there tasks more quickly and with less friction.

Final thoughts

As with most things in design, the best UI elements often depend entirely on the context they are used in. Hopefully, this article will help you choose a more informed and appropriate approach for your specific use case that will most benefit your users.

For more tips on improving your website’s design, check out our other articles on UX: