How to Make a User-Friendly Dropdown?
At first sight, a dropdown is a very convenient solution: it’s lightweight, supported by all browsers, cheap and easy to implement. It also limits the number of incorrect answers and most users know how to use it. All that is true if you keep in mind a few simple dropdown rules.
People Loathe Filling Out All Sorts of Forms
It’s a fact. The longer and more complicated the form, the lower the chance of its successful completion by the user—especially when it’s viewed on mobile devices.
Why and Where Dropdowns Don’t Work?
Dropdowns are one of the most incorrectly used solutions when making forms. The truth is, they should be used as a last resort only.
Now let’s delve into the why:
- We’re hiding all the options from the users. To see the available options, they are forced to click and expand the dropdown list.
- Choosing one option from a long list is a multistep process. The user has to click to expand the list, scroll to find the desired option, and then click on it to close the list.
- Long dropdown lists are a user experience nightmare, especially on mobile devices (e.g. choosing a country).
Luckily, there are a few solutions you can use to improve the UX of your forms.
Fixing Issues with Long Options Lists
A dropdown list containing more than 15 options becomes cumbersome to the user. A great example of such a list are dropdowns listing almost 200 countries—it’s downright cruel to ask the user to browse through them all to choose a proper country.
A better solution in this case would be to use an autocomplete feature. The user knows where he or she lives—entering a couple or so first letters of a country quickly narrows down the list.
Dropdowns also shouldn’t be used in forms where the required information is well known by the user, i.e., the day, month, and year of birth.
Sometimes it’s better to let the users fill in the required information manually, instead of forcing them to choose the option from a very long list.
Improving Short Options Lists
You can quite often encounter a dropdown list used for fewer than five choices. Using dropdowns for fewer options than that negatively impacts the UX. For such short options lists, I recommend using the radio button, which lets the user make the choice quickly and easily.
With radio button lists, the user sees all the options without having to expand the list. All the user has to do is look at the options and make the choice.
Adding Labels to the Forms
The golden rule: Every form field needs to have a label that stays visible after clicking the dropdown.
In the picture below, the “Feedback Type” remains visible while the user chooses one of the options. This helps the user remember what to look for while scrolling through the “Select Feedback Type” list.
When labeling the form field, use a specific title, not an enigmatic “Please select.” Simply writing “Please select” isn’t clear enough, and you should provide the user with a clear instruction, i.e., “Select profile” instead of “Please select.”
Choosing the Quantity
Instead of forcing the user to choose the number of passengers or quantity of products through dropdowns with numbers, you should give the user the option to add or deduct the quantity by clicking only once.
Care for Your Users
In many cases, using dropdowns is indispensable, so you shouldn’t avoid them at all costs. But try implementing them only where they’re really necessary. Don’t be afraid to use more user-friendly solutions. Invest in solutions that are easy to use not only for the advanced users but also those with disabilities or those less technically versed.