Understand how to better design long dropdown form fields.

Country dropdowns are notorious for being difficult to use. They’re all different, oftenly for no particular reason. We tried two common alternatives and compared them to our control country dropdown in order to see if they were measurably better. We found there isn’t a simple solution to this kind of dropdown problem. But there are some solutions that work pretty well if you consider the actual context of use of your form.

Control

9/14/2016

A dropdown where “United States” appears at the top but does not appear again in alphabetical order.

Methods
Date 9/13/2016
Sample Size 100
Recruiting mTurk
Analytics Mouseflow
Demographics
Location United States
Average Age 35.5
Gender 38% Male, 62% Female
Tech Savvy 1% Strongly Disagree, 3% Disagree, 5% Neither, 58% Agree, 33% Strongly Agree
WHAT WE TESTED

A dropdown where “United States” appears at the top but does not appear again in alphabetical order.

Responsive image
TEST RESULTS

On average, the amount of time it took users to fill out the dropdown form in the control was five seconds flat. In fact, it was this longer than the expected time that caused us to look into the profession field in the first place.

Responsive image

Test A

9/14/2016

Added “United States” as the first choice in the dropdown in addition to alphabetical order.

Methods
Date 9/14/2016
Sample Size 50
Recruiting mTurk
Analytics Mouseflow
Demographics
Location United States
Average Age 35.1
Gender 30% Male, 70% Female
Tech Savvy 0% Strongly Disagree, 4% Disagree, 8% Neither, 58% Agree, 27% Strongly Agree
WHAT WE TESTED

A dropdown where “United states” appears twice. Once at the very top of the list and once in alphabetical order.

Responsive image
TEST RESULTS

For our first test, test A, we kept “United States” at the top of the dropdown list, as well as added it in alphabetical order. This simple change brought the field time down to an average of 3.7 seconds, which is a 25% improvement. The time improvement may be a result of giving the user flexibility to either select US at the top or scroll to the expected placement in alphabetical order.

Additionally, the total time it took to complete the form went down by about a second or so. That being said, other form fields on the form had similar time fluctuations. The time for DOB month went up by one second, and DOB day went up by .7 seconds. Point being, it’s difficult to pinpoint whether or not the change we’re looking at here is significant, or within the margin of differences between tests.

Responsive image

Despite this, the data looks promising and the results make logical sense. Adding the extra selection when our entire sample was based in the US means that people had more options where to look for the same answer, making the user experience more flexible. This works on mobile as well, where the US would just be the first option so users don’t have to interact with that obnoxious iOS dropdown implementation.

Test B

9/15/2016

Introduced typeahead text box with results weighted by relevancy.

Methods
Date 9/16/2016
Sample Size 50
Recruiting mTurk
Analytics Mouseflow
Demographics
Location United States
Average Age 37.6
Gender 27% Male, 73% Female
Tech Savvy 0% Strongly Disagree, 0% Disagree, 10% Neither, 51% Agree, 39% Strongly Agree
WHAT WE TESTED

A typeahead field where users must start typing to activate the dropdown, and the field surfaces a list of best guesses based on what has been typed (autocomplete).

Responsive image
TEST RESULTS

This is where things get interesting. We used a form field implementation here that seems like a really fantastic and usable experience. It’s a typeahead dropdown with weighted options. It accepts multiple entries for a single list item as well, so if you type “America,” the United States still appears in the list of options.

Going into this test we were sure that this input type would drop the field response time for country even further below 3.7 seconds so you can imagine how surprised we were to see the time jump up to 6.8 seconds. We were so surprised we actually stopped the test early to check for bugs and re-run it. This raises a pretty obvious question: Why is a field that seems like it’d be better to use, actually slower?

  1. Maybe speed isn’t actually a great indicator of UX quality.

    Speed is the main metric we have when we’re examining these form outcomes. Because it’s available and easy to understand, it naturally becomes an easy lens through which to view the quality of the design. We don’t think that this typeahead form field is bad. We actually think it’s quite usable and well designed despite being slower, and maybe that’s just as valid.

  2. Our sample geography neutered some of the field’s benefits.

    We deliberately sample from the US for our tests. This means the amazing gains this form field provides by suggesting Japan when a user types in Nihon are lost.

  3. Our sample geography means we didn’t have to be so elaborate.

    Another impact of using the US for testing means that we can anticipate a likely response and design for it. This particular type of field is best used when there’s a large number of equally likely options, but most of the time a country picker is a field with a large number of options where two or three are far more likely. It’s possible that in this kind of situation, simply elevating those options to the top of the list might be the fastest approach, even if it’s not the slickest.

  4. We were asking people to type.

    This means they had to leave their mouse and go to their keyboard, as well as think about what they wanted to type. This change in modes probably had a modest impact on time on desktop, but maybe an even larger impact on mobile.

  5. Outliers might have skewed the data set.

    It’s possible someone just stayed in that field for a minute or longer for no reason.

Our limited access to the raw data means that we can’t pinpoint exactly what caused the increase in time. Believe us, we wish we could.

Responsive image

What we learned

The speed savings aren’t actually terribly significant, so you’ll have to justify these changes by focusing on the qualitative gains.

If you’re working with a US-based audience, it probably makes sense to offer a longer dropdown with the US and maybe some other North American countries as the top option.

If you have an international audience for your product, it probably makes sense to go with what we tested in test B. It’ll lead to fewer wrong answers and decreased frustration. It’s the scenic route.

Responsive image
Responsive image
TYPEAHEAD

Typeahead is the most appropriate solution for a large list of familiar options—like a country—where there aren’t any clear likely answers. The user most likely knows the specific answer and does not need to browse all options, and the ability to type quickly eliminates the hundreds of irrelevant options.

This typeahead dropdown was used for a country selector. The top three countries were listed above the alphabetical list of 249 countries for easy selection. As you type the list filters below.

Common Uses

Country , Address, Zip Code

Key Behaviors

AUTOCOMPLETE

Predictive list options guide the user as they type.

SMART MATCHING

The field can handle typos and various spelling conventions to match the user's input with the specific dropdown option.

WEIGHTED RESULTS

List surfaces most popular list items and shows suggestion as users type. For example, place the top three countries at the top as well as in the list for easy access.

Do's

  • Do use typeahead with a large list.
    Typeahead is appropriate with options over 15 or more to reduce time scanning.
  • Do weigh options by relevancy.
    The list defaults to alphabetical order but by processing the user’s input the list surfaces popular options at the top.
  • Do use a cap height.
    Conserve screen space by setting dropdown display window to a fixed height, not displaying all list items at once.

Don'ts

  • Don’t use typeahead if the list items are not commonly know.
    If the answer can be interpreted in multiple ways do not use a typeahead dropdown, force the user to read and select from of a given list.
  • Don’t select on focus.
    The focused item should display at the top of the list but should not automatically be selected as the answer.
  • Don’t use answers as in-field labels.
    Never assume a chosen answer. For example don’t use “United States” as an in-field label, instead keep it instructional, like “select.”

Next steps

Test the profession field dropdown.

If the country field is a dropdown field where a few choices are far more likely than all of the others, what happens in a situation where all of the choices are equally likely? Our profession field is the slowest one by far with a fill time of above ten seconds. It’s also the only field that caused people to drop out of the one page form design we have. Cutting the time down and making the options more considered seems like a worthy exercise.