We've created Zuko, our next-generation form analytics platform. Explore Zuko Explore Zuko > Hide Message

Radio Killed the Drop-Down. (So Why Aren’t More People Doing This?)

Forms

I love unscrambling data and passing on my insight. That’s why I took an in-depth look at the UK home insurance market’s UX. I analysed 33 quotation forms from the industry’s leading providers to establish the similarities and differences in form design and process.

One of the most interesting findings was that radio buttons are an average of 0.8 seconds quicker to complete than drop-downs. With customers seeking speed and ease of form completion, why aren’t all businesses doing more to replace more drop-down lists with radio buttons?

What Are Drop-Downs and Radio Buttons?

A drop-down list consists of a box, with a clickable arrow that drops down to reveal a list of responses. Answers are often listed alphabetically or, for numbers, from small to large, so users can quickly scroll to the right response. The way you interact with the field is different on a mobile device as the drop down appears at the base of the screen.

Source: Stack Overflow

As per the image below, radio buttons are round circles that provide a user with two or more options to select from. On a mobile device they appear almost exactly as they do on a non-mobile device, and the user can interact with them on the page.

Source: Stack Overflow

Named after the physical buttons used to select preset stations on old radios, when one button was selected another would pop out. Online radio buttons replicate this functionality by allowing users to select a single option only.

The Similarities and Differences

While they may look different, drop-down and radio buttons are both used to select a singular response from a list, such as a title. Both options provide a similar selection of titles to choose from and users select a single response, for example either Mr., Mrs., Ms., or Miss.

However, our research found that radio buttons are, on average, 0.8 seconds quicker to complete.

I also discovered that UK home insurance forms contain an average of 15.3 drop-down fields in comparison to 24.7 radio buttons. It seems that this industry has moved firmly towards using radio buttons, so why aren’t more businesses doing the same?

Drop-Down Dead

Saving customers’ time is important, but there are other reasons I recommend using radio buttons over drop-downs.

They Help Users Make the Right Choice

Presenting customers with a range of options and helping them quickly make the right choice, while maintaining data integrity, can be achieved with radio buttons. Take the example below where customers are asked to choose between cupcakes. Clearly, the tick-box list on the left is harder to use than the radio buttons on the right. This selection method allows images to be combined with radio buttons to support the user’s selection process while increasing product desirability.

Source: Formstack

That said, there are times when drop-downs should be used, for example when the list of options is significant (over five). In this example a list of US states is shown using radio buttons, in alphabetical order, but it takes up a significant amount of space on the page and gives a cluttered feel.

Source: Formstack

In this instance, drop-downs offer a better option. Paul Rouke, Founder and CEO of conversion optimisation agency, PRWD, points out that,

“When you only have a small number of mutually exclusive options for users to choose from, presenting all options without any need for interaction through the use of radio buttons can work really well. The more options users have to choose from, the more overwhelming it can be if you continued using radio buttons instead of a dropdown.

Dropdowns can be optimised, typically by showing the most popular options first, followed by a line break and then the rest of the options. Country selectors are a prime opportunity for speeding up users’ pathways to choosing their required option.”

While there are sometimes steps that can be taken to improve the use of drop-downs, users are still required to click to access the answers and then click again to select their choice. Rouke goes on to say that, “anything that reduces the requirements for users when completing forms, both mentally and physically, should be a primary focus when looking to optimise form completion rates.” Clearly, radio buttons, that only require a single click, win hands down.

Less Choice and More Space? Use Radio Buttons

Another area of strength for radio buttons is how scan-able they are. When space isn’t an issue, and the number of options is small, I recommend using radio buttons with options listed horizontally across the page to maximise space-saving.

Responses should be set out with the most-frequently selected responses on the left, as in the example below. This allows users to scan the answers and will prevent some from having to read more than one or two because their answer is one of the first options. Ideally, most customers will scan options one and two, click and move on.

Source: Formstack

Radio buttons also give you the added benefit of being able to include ‘other’ as an option with a text box to gather additional information if required; not something that drop-downs can deliver as easily.

Iterative Changes

Jason Nielson at the Nielsen Norman Group says that a form designer’s job “is to provide the features users need in a transparent interface that gets out of the way and lets users focus on the task at hand.” To achieve this, organisations should identify which fields can be changed to radio buttons without inconveniencing either users or the business. While this may require some questions and answers to be re-worded, the reduced cognitive and physical loads will improve completion rates.