Does this look familiar to you?
If not, this is a drop-down, or select menu. In theory, designers use the drop-down menu to reduce visual clutter, save screen space, and prevent any user from selecting invalid choices by only showing legal, valid choices.
While the drop-down menu is useful for containing a lot of design elements or information in a small space, drop-down menus are also considered one of the worst-used design elements by many designers. But what are the pitfalls of the drop-down menu that make designers consider it terrible?
Drop-down menus can theoretically be used to showcase either two options or 100 options. Both of these use cases are incorrect ways of using a selection menu.
Here is an example of a drop-down menu that has too few options in its selection menu, using sex as an example.*
*This example (commonly) misconstrues male/female as gender as opposed to sex
Any drop-down menu forces the user to click on the menu (thus necessitating an additional step) in order to view the options for the user to choose. With few options (5 or fewer), this can be frustrating for any user since there is less information provided up-front. The action to view these options (clicking the menu) would feel wasted. Consider this example that uses radio buttons.
By using radio buttons, you are able to inform your users of the choices available without needing to use any other action (such as clicking or hovering). However, do keep in mind that you do not want to overwhelm your users with the amount of information you show them upfront! In this case, I would use radio buttons for 5 options or fewer, and drop-down menus for more than 5 options.
If you have ever shopped online, this scenario when asked for your shipping information might be too familiar:
Huge drop-down menu lists (any options greater than 15 options) become extremely difficult to read, parse, and navigate. By forcing the user to scroll down a list of 100+ options, as well as only showing a limited number of options accessible only through scrolling, this creates a painful experience for the user and ultimately slows down their task and process.
Often times in these cases, users will know which option they will be choosing when prompted a list of numerous choices. In this country selecting scenario (or any scenario in which the user knows what option they would pick), utilizing a text field with an auto-complete function would be more effective than a drop-down menu.
Once the user begins typing in the text field, their choices become immensely narrowed, allowing easier visibility and access to the options they’d like to select. As such, using a text field (either with or without an auto-complete option) is more efficient than a drop-down menu when faced with more than 15 options.
Simply put, default options are rarely ideal within dropdown menus. Especially if said section is a required field for users.
Users are more prone to creating mistakes when faced with a default option in a dropdown menu. As a designer, you should not assume that your users will carefully read through the form presented to them. Unless most of your user base will select one value (think at least 95% or higher), showing users an error message for not selecting a value as opposed to your user inputting a wrong value due to a default value creates a better experience.
Due to their smaller sizes, mobile operating systems magnify the problems of drop-down menus. Drop-down menus aren’t too cluttering within desktop systems due to their large screen real estate, and scrolling is mitigated due to the increased amount of space allowing for more options to be viewed at once. On mobile screens, the lack of screen real estate forces the user to scroll for longer periods of time to view all options, which ultimately creates for less than ideal experience.
Image credits: lukew
An old UI of America Airline’s mobile app forces the user to use drop-down menus for nearly all fields. This presents countless of actions for the user: each field requires a click to activate the field, a scroll towards a specific value (often needing more than one scroll movement), and then pressing the specific value to confirm the selection, and finally closing the field screen to move onto the next screen.
If you were confused by all of that, that’s exactly what you should avoid. As a designer, you should focus on simplifying your layout by asking: are some of these inputs/questions necessary for the overall function? If so, try to simplify the form by switching out some of the drop-down menus for other options (sliders, steppers, and radio groups are all fantastic options to help reduce clutter!)
Ultimately, here are the limitations of the drop-down menu that you should consider before deciding to use a drop-down menu:
Articles
