Dropdown alternatives for better (mobile) forms

  • In a dropdown, the available options are not visible until you click or tap to open it. Also, the length of the list is hidden at first sight, that is, users can’t predict if a dropdown menu would contain 2 or 50 elements.
  • Selecting an option from a dropdown list (especially on mobile) is a multi-step process: you have to tap on the dropdown to open the list of options, then scroll and scan through the items to select one, and then close the dropdown.
  • Dropdown menus might make designers lazy: it’s super easy to just add all the possible options to a dropdown list without any prioritization (which makes it really similar to the hamburger menu, by the way).
  • Longer dropdowns, such as a country selector can be a nightmare to scan through, especially on mobile where keyboard search is usually not available.
  • Scrolling through the options might be painful on some mobile screens where the visible and scrollable area of the list is small:
On iOS, the number of visible options might be surprisingly low at first sight

Consider the number of options

If your dropdown only contains Yes/No or On/Off options, use a simpler switch instead
Segmented controls show the selected and the alternative option(s) at once
The number of visible options depend on the screen width and the length of the option labels but having more than 5 items is not recommended
Instead of scrolling through the list, let the users start typing and only show the filtered options
Although “Other” is not an elegant solution, such prioritization might improve the user experience for the majority of users

Consider the expected input

Entering a birth year on a mobil device is easier with a numeric keyboard than by scrolling through a long list
Even though the sorting order of a numeric dropdown is clear, it might still be easier to type than scroll
When listing the states of the USA, typing only one letter filters down the list well
The sorting order for currencies might be unclear to users so make sure they can search in name and currency code, too
Showing the minimum and maximum value of the scale might help the understanding of the context

Consider designing smarter dropdowns

  • Use a meaningful label: the menu label or description should be clear and available even when the list is open. Inside the select menu, use a descriptive label that tells the users what they’re selecting (that is, “Select type” instead of “Please select”).
  • Sort items in a sensible way: based on user data, try putting the most popular choices on top of the list. Or, even pre-select the most popular one by default.
  • Use smart defaults: phones and browsers knows the user’s location, the date, and tons of other information. Use that data to pre-select the most probable option for every user.
  • Decrease the number of fields and let the computer do the work: if a user enters a ZIP code, the computer could already know the city and state — no need to ask. If a user enters a credit card number, the computer could already know it’s a MasterCard — no need to ask.
  • Consider using APIs: signing up with a Facebook Connect button is easier than filling out a registration form. Paying with Paypal is easier than having to type in your credit card data.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store