UI Drafter

Usability
Radio Buttons vs. Dropdowns

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 and although it makes sense, it isn't intuitive. Therefore, a radio button 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, and they add too much importance. My guess is that it isn't a radio button to avoid confusing it with more Accent colors. For example, named colors are appropriate for difficult to undo cases, such as the phone color.

As an alternative solution you could draw 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: one day I was looking for cinnamon for my oatmeal, and instead I learned what paprika is.

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.

Sponsored by: