What am I talking about when I say drop-downs and select boxes? A drop-down is a list in a web form that ‘drop downs’ when clicked on by a user. A select box is another term for the same thing.
You’ll see them in loads of forms. The image below shows three examples where drop-downs are used. One, used to allow customers to select their flight class, only contains one option.
While drop-downs may seem like a good way of housing content in web forms they actually cause a lot of issues. Find out how drop-down menus and select boxes can hurt the user experience and in some cases make your form unusable.
Drop-downs cause users to interact multiple times
Form analytics shows that drop-downs cause problems for users in forms. Take a look at the report below, which shows fields that users drop off at i.e. the last field they interacted with before leaving the form.
The top three results are drop-down fields, as shown by the icon in the Field column. On this form, drop-down fields account for at least 65% of total dropoffs.
We give each field a health score too. In the report below the worst drop-down field only scores 5% in the health rating.
Drop-down fields consistently appear high up in our client’s Most Corrected reports too. This report tells clients which fields their users revisited in order to correct data.
Find out exactly where and why users struggle in your form with a free trial of Formisimo
Persistent usability problem
What we see in form analytics is reflected in usability tests. Caroline Jarrett, a user experience and usability consultant specialising in forms and surveys, sees users struggling with drop-downs and select boxes all the time.
Yet again watching a video of participant unable to proceed past a drop-down/select box. Burn your select tags.
— Caroline Jarrett (@cjforms) August 25, 2015
15 years ago the advice from the user experience community was “use drop-downs sparingly”, and it still stands based on the quantitative and qualitative examples we see where drop-downs cause issues for users.
Now I’ll show why drop-downs are bad for forms and users and how you can avoid friction.
Don’t assume everyone knows what to do with a drop-down
The public-facing website for the government in the UK, https://www.gov.uk/, has worked very hard to design content, including forms, that is easy for anyone, with any knowledge-level of computers, to access. The way Gov.uk functions has to be capable of being understood by absolutely anyone in order to fulfil its purpose.
Drop-down boxes, by their very nature, hide information and it must be unpacked and sorted through by the user in order to find the correct response. It’s obvious, once you know how.
Drop-down menus are not the most appropriate solution
A long list in a drop-down makes it harder to pick out the answer you’re looking for. A short drop-down could be presented so all the options are immediately visible and thus faster for the user to select the right one.
It’s less a case of one size fits all and more one size fits none. Where there are many possible options e.g. in a list of countries, you should implement a search feature that allows users to filter the options.
A long list becomes narrowed to one option as the user types:
Caroline gives the nod to testing some of the alternative solutions that Luke Wroblewski (Luke W) proposes:
— Caroline Jarrett (@cjforms) July 20, 2015
Take a look in the next section at some of the different design solutions Luke W explored when working to improve forms on American Airlines’ website. These solutions aimed to reduce the number of drop-down menus used, reduce the length of the form visually and reduce the effort for users.
Drop-downs are harder to interact with on mobile devices
Luke W, author of Web Form Design, says drop-downs should be a last resort in user interfaces. He explored different ways of presenting information in forms to reduce, if not eradicate, the need for drop-downs.
The examples he uses are all illustrated on mobile devices, emphasising the additional difficulties drop-downs create on small, touch-based screens.
Each select box requires multiple operations by the user.
When considering how to improve the American Airlines’ website for mobile users, Luke W looked at the information each drop-down was attempting to gather. For different elements, different solutions applied.
To specify dates, a calendar provided greater context, if not fewer interactions. To specify number passengers, a stepper to increase the numbers created a simpler method of increasing the figure.
These and other design changes made the form shorter and easier to complete. In some cases, the user would not be required to change the default selection, if the most common options are pre-selected.
Recently another blog post highlighted a form with a large number of drop-downs in it, HSBC’s credit card application form.
This is an extreme example of a long form (this is just the first of a six-step process), with several drop-down fields to complete.
In this form, limited choice selections such as marital status and employment status could be presented as button inputs. The image below shows an example of buttons used to present available time slots.
Creates poor accessibility
I want to expand upon on a topic I briefly covered in Building Accessible Forms 101. That is the barriers that ‘controls’ i.e. buttons, radio buttons, checkboxes and drop-down menus create for web users. Users who
- have decreased motor skills,
- have low vision or
- who are blind
will find these controls difficult to interact with. Here’s why:
Selecting a list item requires a steady hand
Luke W has already shown that list items in a drop-down/select box are hard to select with our fingers, which are imprecise. A user with unsteady hands and who finds it hard to control a mouse will experience the same problem.
Make the options large or keyboard accessible
Consider how the options could be presented in an alternative format that doesn’t require precise focus. If a drop-down is still the best solution then make sure the list is keyboard accessible i.e. the user can navigate through the list with their keyboard and the focus is visible on the screen (as opposed to obscured within the select box).
Multiple choice options don’t make sense out of context
Options often lose their meaning out of context of the heading or label, meaning blind users might not understand the purpose of the list.
The list of suggestions isn’t naturally accessible to screen readers because the user must leave ‘forms mode’ to navigate the list.
Associate the label with the list
Mark up labels so that they’re properly associated with their corresponding control or list. Keep this in mind if you implement filtering with search. Autocomplete options will also take users out of forms mode, if not coded in. Follow Vision Australia’s guide to accessible autocomplete to ensure it’s usable by everyone.
On-focus shouldn’t select
Some client-side scripts cause drop-down options to be selected upon focus, a problem for keyboard users who have to move through a list.
Only select based on user intent
Nielsen Norman Group explain keyboard navigation should let the user scroll through the list. Only when they perform another operation should an option be selected.
Ted.com execute this well in the drop-down list for upcoming events.
Nielsen Norman Group say
“The drop-down list on Ted.com works well by keyboard. Users can tab to their filter of choice, in this case Events, then hit Enter which brings them inside the drop-down. Then the arrow keys work to select their item, and another Enter makes their selection.”