Despite all the advantages of dropdown menus they obviously have some limitations. Let’s take a look on them and find the alternatives for dropdown forms.
Many of UI enthusiasts would say that dropdown menus are the most attractive and easiest variant. They don’t take much time, automatically validate the input, all browsers and platforms support them, they’re easy and cheap to implement, and the users know them well enough. That is no-brainer. At the same time others think that dropdown forms should be used as rare as possible. Why so?
- User can not predict the number of elements in select menus
- Selecting an option from a dropdown list (especially on mobile) is a multi-step process: you have first to open the list of options and then scroll, choose and close
- Dropdown menus might make designers lazy: it’s super easy to just add all the possible options to a dropdown list without any prioritization
- Longer dropdowns, such as a country selector can be a nightmare to scan through
- Scrolling through the options might be painful on some mobile screens where the visible and scrollable area of the list is small
The good news is that there are plenty of alternative input controls that will work better for you in many cases. Consider the number of options. So the alternatives:
- For binary (on/off) decisions, the dropdown menu is a really bad choice. What you need is a checkbox or a toggle switch.
- For a small number of mutually exclusive options, radio buttons or segmented controls are recommended: all available options are visible at once, without having to open the list.
- For a large number of well specified options consider a “start typing…” solution where the list of filtered options is displayed after the first one or two letters.
- For large and diverse lists, try to use existing user data to prioritize the options and only list the first few most popular choices to the user. Users will find their preference instantly and only 10% have to select Other to specify it.
Consider the expected input. One of the benefits of a dropdown list is that users don’t have to type much. However, if the expected input is not too long and is frequently asked (such as personal data) it’s usually easier to type in rather than select it from a list.
Anyway, if you already decided that select menu is ideal for you, please, consider designing smarter dropdowns. You can do it with using a descriptive label that tells the users what they’re selecting, sorting items in a sensible way, with smart defaults like phones and browser’s knowing the user’s location, considering using APIs and so on.
To find the examples read the original article Dropdown alternatives for better (mobile) forms by Zoltan Kollin.