Understand how to better design a profession dropdown field.

Profession dropdowns are a great example of forcing a best fit selection—making a user select an answer from a given list even when the answer can take multiple forms. Because the answer can be interpreted differently from user to user, the dropdown helps to standardize those answers. We tested a traditional dropdown of 23 occupations against an alternative approach using a progressive reveal, hoping to make the content more consumable and prescriptive. The test's findings evolved into being less about behavioral elements and more about appropriate content.

Control

9/19/2016

A dropdown with a list of 23 occupations. “Other” is not an option.

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 of 23 professions in alphabetical order.

Responsive image
TEST RESULTS

The profession dropdown field took 13.2 seconds to complete, the longest by eight seconds. In fact, it was this longer than expected time that caused us to look into the profession field in the first place. This being our first test, we are looking to see if this influx in time is a bug related to being the last question.

Responsive image

Test A

9/20/2016

Progressive reveal selection that starts with a field dropdown followed by radio buttons for specific profession. Professions are shown after a field is selected. “Other” is an option.

Methods
Date 9/19/2016
Sample Size 50
Recruiting mTurk
Analytics Mouseflow
Demographics
Location United States
Average Age 33.34
Gender 32% Male, 68% Female
Tech Savvy 0% Strongly Disagree, 0% Disagree, 8% Neither, 60% Agree, 32% Strongly Agree
WHAT WE TESTED

Using progressive disclosure you first select a job field then based on that selection only relevant professions populate below in a radio button list.

Responsive image
TEST RESULTS

In this test we simplified the first dropdown to 11 broad job fields, the scannability is much quicker and surfaces up only a list of relevant professions following the selection. The profession question was also moved up to the ninth question to eliminate any bugs from the last question, like in the control test.

The profession dropdown (main category) averaged 7.0s and the radio buttons (subcategories) averaged 1.3s. In total, the profession duration improved from 13.6 seconds to 8.3 seconds in Test A.

Responsive image

This was a very large improvement so we took a closer look what might have caused this—the field behavior or the list content. After breaking down the profession field selections we found that 40% of users selected “other.” With that said, this test was not a fair measure of progressive disclosure because the control we are testing against did not have “other” as an option. Also, once “other” is selected, the question is complete, no subcategories radio buttons are surfaced. Our next step is to go back to the control list and add “other” as an option to get a better comparison.

Responsive image

Test B

9/20/2016

Added “other” to the control profession dropdown to see if people complete it faster and default for the easy “other” option.

Methods
Date 9/20/2016
Sample Size 50
Recruiting mTurk
Analytics Mouseflow
Demographics
Location United States
Average Age 35.39
Gender 57% Male, 43% Female
Tech Savvy 4% Strongly Disagree, 2% Disagree, 4% Neither, 41% Agree, 49% Strongly Agree
WHAT WE TESTED

A dropdown of 23 professions in alphabetical order with “other” listed at the bottom.

Responsive image
TEST RESULTS

In this test we went back to our original profession dropdown, the only difference being “other” at the end of the list. We saw the best time for a profession field yet, 7.3 seconds. The time is not a necessarily a good indication of success, because we are comparing a singular dropdown to a two-part progressive disclosure that inherently will take longer to complete.

Responsive image

The measureable success is in the content selected. Here, we saw that only 12.2% selected “other” as opposed to 40% from Test A. This means that the list items provided were more pertinent to the users and they did not need to depend on “other” as an option. You can see how more evenly the selection is using this list. To reassure Test B’s profession categories we are going to test the broad categories from the dropdown list in Test A.

Responsive image

Test C

9/21/2016

Testing a more limited set of 11 profession field options in non-progressive dropdown (no radios) along with “other” option.

Methods
Date 9/21/2016
Sample Size 50
Recruiting mTurk
Analytics Mouseflow
Demographics
Location United States
Average Age 32.06
Gender 48% Male, 52% Female
Tech Savvy 0% Strongly Disagree, 2% Disagree, 10% Neither, 48% Agree, 40% Strongly Agree
WHAT WE TESTED

A single dropdown with a shorter (11 options), nonspecific list in alphabetical order, with “other” at the bottom.

Responsive image
TEST RESULTS

This test simply compares dropdown content. We tested the dropdown list from Test A without the radio buttons that follow. This gives us a clear comparison between the two lists.

We found that 22% selected “other” compared to 12.2% from Test B, which has the original profession list. While the profession field time was the fastest it has been at 4.6s, 9.8% more people selected “other” compared to the previous test, Test B. This test had pros and cons; the profession options were broader job fields which may have been a more consumable read, resulting in the quicker time. But more people relied on the “other” category than with the original list.

We were surprised to find these series of tests evolved into more of a content study. We learned that giving “other” as an option, especially with with options that aren’t obvious before a user interacts with a form field, allows users not to be forced into a choice they feel is not best fit.

Responsive image

What we learned

Making an effective profession dropdown—and working with options that aren’t obvious before a user interacts with a form field—is really more of a content problem than a design problem.

Sometimes while testing out a form field, we discovered that a form design problem is actually a content design problem. This was exactly what happened when we started working on the profession field dropdown that was in our control form. After thinking about it, we realized the reason this field was difficult for users to fill in was that the content was uncertain and the list was long. This long uncertain list is a content type in the 2x2 below:

Responsive image

The issue that long uncertain lists present is that users cannot directly map their mental model to the options presented, and so must read every single option to determine what the best match is. The combination of reading, mapping, and deciding is far more mentally taxing than most form fields. This leads people to either take much longer than normal, or just drop out. Including options like “other” allows users not to be forced into a choice. While it may seem nice to have all of your data perfectly sorted, consider that not giving users the option to not select something will mean the data you collect is less than perfect.

Common Uses

The profession field may be the most common type of form field to contain a long uncertain list. That being said, it’s definitely not the only one. Generally, we’d recommend avoiding these types of list as often as possible as they lead to drop-outs and long user input times. If the input needed can be captured in a text field and then normalized across all other entries that would be preferred. For example, you could have users enter their profession into a text field and then organize and categorize the data on the back-end to arrive at a list bottom-up instead of top down.

Considerations

SIMPLIFY AS MUCH AS POSSIBLE

The more concisely you can present your options to users, the more likely they’ll be to complete the form.

INCLUDE AN OPTION LIKE “OTHER” AT THE BOTTOM OF THE LIST

It’s difficult to think of all possibilities for a vague list like career or profession types. Including an “out” at the bottom of the list means that people who read through it but didn’t find a match won’t have to reread the list to find the next closest one. This option will also let you know if your list has the right options in it. If a lot of users are selecting “other” you may want to reexamine your choices.

ALPHABETIZE YOUR LIST

It may seem obvious, but when you have a list of items that don’t necessarily follow a prescribed order, it makes sense to lend some sort of structure so that people can scan the list as quickly as possible. Alphabetizing is the most basic way to organize a list of elements, and it’s very easy to understand the underlying pattern from the first few elements.

Next Steps

Test date of birth selector.

Next we are testing variations of date of birth picker. We are reevaluating our analytics service to get more accurate and detailed numbers. Testing the date of birth selector with the new service will be a quick test we can set up and run.