Deciding when to use a drop-down — or when to use another interface type, such as a radio button interface or open text field — for a specific input can be tricky.
In e-commerce, most users will encounter drop-down menu inputs while navigating the checkout flow, for a wide variety of inputs.
However, our large-scale usability testing reveals that using drop-down menus for the “wrong” input types can lead to slower checkout completion times, field validation errors, and unnecessary user attention being devoted to optional fields, all of which increase the likelihood of checkout abandonments.
The issues caused by drop-downs being used for the “wrong” inputs were observed during our very first rounds of checkout usability testing dating back to 2010. Since then we’ve reconfirmed this user behavior during all subsequent checkout usability testing we’ve performed, including our most recent Cart & Checkout usability study.
In this article, we’ll discuss the test findings from our Cart & Checkout testing related to deciding when to use drop-downs, including:
- Why drop-downs should be avoided when there are too-many or too-few options
- Why (and when) opting for text fields or radio button interfaces is often a better choice (e.g., “Country” and “Title” selection)
- What to use instead of a drop-down for three required checkout inputs that are often implemented as drop-downs (the “State”, “Shipping Method”, and “Credit Card Type” inputs)
Note: though specific numbers are used to illustrate “too many” and “too few” options in a drop-down, it’s important not to get hung up on what exact number of options in a drop-down should trigger using an alternative input interface. The number of options used in this article are for general guidance only — each site and input type has an individual context that should be taken into consideration. Furthermore, all these findings apply for e-commerce checkout flows; other contexts, like survey forms and application software, may deviate.
In General, Avoid Drop-Downs When There Are More Than 10 or Fewer Than 5 Options
Drop-downs quickly become difficult for users when they are presented with an overwhelming number of options to choose from.
Take, for instance, a commonly included input in checkout forms, the “Country Selection” drop-down. 47% of sites in our benchmark include a country-selector drop-down in their checkout.
Testing revealed 3 main issues caused by massive drop-down inputs such as the “Country Selection” drop-down:
1) Lack of Overview. Seeing more than 20 uncategorized options can be bewildering and intimidating, and make it difficult for users to find the input they’re looking for. Long country drop-downs (seen here at Urban Outfitters), which often include over two hundred options, can be very difficult for users to get an overview of.
2) Scrolling Issues. Multiple problems are related to scrolling large drop-downs, seen here at Crate & Barrel. If the mouse cursor is outside of the drop-down, users will most likely scroll down the page instead of the drop-down, hiding the drop-down options from the screen. In some browsers, however, the drop-down will actually scroll as long as it has focus, likely leaving users with erroneous data.
3) Inconsistent UI. The UI of drop-downs differs from browser to browser and OS to OS, and the drop-down will not only look different, but will also work differently. For example, on a Mac, Safari and Chrome force users to hover on an arrow to scroll up and down, whereas Firefox provides a traditional scrollbar. Some sites also use custom-designed drop-down UIs, which are also frequently observed to cause issues. Here, American Eagle Outfitters offers a custom state drop-down. Note how the length of the drop-down interface is suboptimal as it’s too short compared to the available space.
At Build.com, some drop-downs contain only a few options — an inefficient way to present these inputs to users.
On the other hand, if there’s just a handful of options for a particular input, a drop-down will similarly nearly always be a poor interface choice because the space savings are small compared to the amount of friction created by not providing users with sufficient information scent — users must click the drop-down to see the 1–4 values it contains.
At Cabela’s, 39% of users opened the drop-down and then closed it again right after having seen the options it contained, without selecting an input.
Furthermore, when the input is optional, 55% of users across our testing were observed to open a drop-down, just to see what it contained, and then immediately close it again without changing the input. This occurred even when the drop-downs were clearly marked as being optional.
Therefore, drop-downs with many options, and drop-downs with only a handful, are both suboptimal interface choices, as they are intimidating and hard to navigate, or introduce unnecessary friction into the checkout process by hiding information that could simply have been exposed.
What to Use Instead: Text Fields and Radio Button Interfaces
If, for a particular input, there are many more than 10 options, but the input doesn’t have to be validated, an open text form field will often be simpler than a drop-down, as users don’t have to read and understand all options before making a choice.
A “Full Name” text field, seen here at Wayfair, eliminates the need for “Title”, “Middle Name”, and “Suffix” drop-downs.
For example, a “Full Name” field is a very flexible way of supporting optional “Title” and “Suffix” fields (inputs often wrongly displayed in a drop-down). Similarly, an optional text field for delivery instructions will often be simpler than an optional drop-down.
For some fields, such as the “Country Selection” field, where the input often does have to be validated, we observe that a well-performing alternative to a drop-down is an autocomplete field.
This addresses the issues of drop-down selectors by letting the user begin to type their country themselves. As they begin typing, the possible matches are suggested, which simplifies the task of locating and selecting a value, and is observed to greatly speed up the country-selection process altogether.
A country autocomplete solves the issue of having a massive drop-down that’s difficult to use, while it can also support typos and sequencing, synonyms, common names, local spellings, and abbreviations.
(For those who are interested in exploring autocomplete country selectors further, we’ve developed an open source jQuery plugin that turns a standard drop-down into an advanced auto-complete field. To try a demo or get the code see Redesigning the Country Selector.)
At Etsy, a radio button interface is used when there are only three possible responses.
For drop-downs with few options, a radio button interface will often be a better choice, as it doesn’t require users to open it just to scan how many options they have and to see what each of those options are.
A note on checkboxes: checkboxes are good when users have to choose between opting in or opting out (a single yes/no option), and when the majority of users should pay close attention to this choice. Common examples include newsletter opt-in, up-sell opt-ins (insurance, subscriptions, etc.), and for choosing “shipping address = billing address”. Thus, it’s often better to go with open text form fields or radio buttons when addressing the issue of drop-downs with too-many or too-few options.
How to Handle Three Specific Checkout Fields Often Implemented as Drop-Downs
There are three checkout inputs (not including “Country” or “Title”, discussed above) that our benchmark reveals are often implemented as drop-downs in the checkout, when there is in fact a better alternative.
“Okay, it already recognized this is in Dallas. Great”, one user during testing said, happily surprised when the state and city were autodetected based on the typed ZIP code. Other users had similar remarks: “ZIP…it found itself…that is very nice” and “It found ‘Dallas, Texas’. It appeared after I typed the ZIP code. That’s okay. That’s quite okay”.
Shipping Address, “State” Field. The importance of “State” field drop-downs can be reduced by implementing zip code autodetection, which will allow the vast majority of users to skip interacting with the “State” field altogether. Yet, we’ve found that only 33% of sites have ZIP code autodetection for “State” and other similar region inputs.
Shipping Method Selection. During testing, drop-downs for shipping selectors were often overlooked entirely, not perceived as important, suffered from a lack information scent in the collapsed state, and rarely had sufficient information hierarchy. Instead, a radio button design is a better choice. (Happily, only 4% of e-commerce sites use a drop-down for the shipping method selection.)
At Northern Tool, users are asked to select their card type from a drop-down.
At H&M, however, the user’s card type is autodetected from the card number IIN range.
Payment, “Card Type” Field. Based on the first digits of the credit card number, it’s possible to determine the card type, hence it’s needless friction to ask users to select their card type themselves. Instead, the card type should be autodetected from the IIN range. Yet, our benchmark reveals that 23% of sites use a “Card Type” drop-down.
Note: one type of drop-down input where it’s acceptable (even preferable) to use a drop-down, even though there are many more than 10 options, are numerical inputs (e.g., expiration date fields and product quantity fields). In testing we observe users interacting with these drop-down inputs don’t have the same usability issues as users interacting with text-based drop-down inputs.
Deciding Whether a Drop-Down Is the Appropriate Choice for an Input
At Amazon, a “Reasons for Return” drop-down contains 12 options. While it has slightly more options than is generally best for drop-down menus, in this instance the need for an input in a structured format may outweigh the benefits provided by an open text field (which can include more accurate and comprehensive information from users).
Our testing reveals that, in general, opting for an open text field or radio button interface instead of drop-downs with many or few options (respectively) is a better choice.
That’s not to say that drop-downs should never be used in these contexts, especially when there are many options to choose from. If there are many more than 10 options, and the optional input either has to be submitted in a known and structured format for validation and analysis, or where users don’t know their options upfront (hence, can’t type it), a drop-down can be a completely warranted choice.
It’s important to consider the specific site and field context when making a decision on whether to use a drop-down interface. However, it’s safe to say that drop-downs that have many options, or very few, warrant extra scrutiny to determine if it’s really the best interface choice.
In the majority of cases — like inputs for “Title”, “Country”, “State” or “Region”, “Shipping Method Selection”, and “Card Type” — it’s likely that there’s a better alternative to drop-downs with many or few options that will help users move more quickly with less friction through checkout and other processes that require user input (e.g., online return flows).
This article presents the research findings from just 1 of the 650+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.
