UI Drafter

Radio Buttons vs. Dropdowns

February 12, 2020
Eric Fortis

This post will help you decide between a Radio Button Group or a Dropdown when drafting user interfaces.

In summary, prefer Radio Buttons:

  • it can save clicks, and
  • showing all the options mitigates wrong assumptions.

When dropdowns are OK?

…when its hidden options are guessable. To elaborate, let's analyze the "General" settings of macOS®.

macOS General Settings Panel

Appearance radio

macOS General Settings Panel - Appearance radio buttons

This element has an "Auto" option. Although it makes sense, it isn't intuitive. Therefore, a radio is better suited regardless of being more versatile in graphic terms.

Highlight color dropdown

macOS General Settings Panel - Highlight Color dropdown

Challenge: two color pickers together.

Highlight color has named colors, which adds too much importance. So it probably isn't a radio to avoid confusing it with more Accent colors. For example, named colors are more appropriate for difficult to undo options, such as phone color.

An alternative solution to this scenario is drawing the color pickers in different shapes. For instance, in UI Drafter all of them were rectangles and users confused the Card color picker with the Entry one.

UI Drafter Color Picker Shapes

Recent items dropdown

macOS General Settings Panel - Recent items dropdown

As this is a numeric list, a discrete numeric slider would work too. But it works as a dropdown because the hidden options are guessable.

Also, you may think it should be labeled Maximum number of recent items. But the goal is to label elements unambiguously enough.

Lastly, this dropdown has a secondary label: Documents, Apps, and Servers. If you want to avoid cases like that, split them. For example, one for Recent documents and another for Recent apps.

A dropdown with default selection could be bad UX

As opposed to settings panels like above, in data entry flows, a dropdown without preselection is safer . Besides having less chance of being read, a default option might confuse users into thinking that that's what they have in mind.

A parallel and personal example: I learned about paprika when I was looking for cinnamon, and it ended up on my oatmeal.

Back to dropdowns, on the other hand, a default selection can be safe if the user expects the option, and if the hidden ones aren't needed to disambiguate the default one. For example, the size of a shirt.

Drafting Selectors

In UI Drafter, creating Radio Buttons or Dropdowns start in the same way. For either one, use the Selector template, as explained in this video tutorial.