The ultimate guide for selection controls in UX design (2024)

The ultimate guide for selection controls in UX design (1)

The ultimate guide for selection controls in UX design (2)

Published in

·

5 min read

·

Mar 20, 2019

--

The ultimate guide for selection controls in UX design (3)

Selection controls allow users to select options among a list or switch setting on or off.

There are four types of selection controls: checkboxes, toggle switches, radio buttons and dropdown list. In today’s article, we will discuss how to choose and use them correctly.

The ultimate guide for selection controls in UX design (4)

Checkboxes

Checkboxes can be used in two different ways:

  1. With a group of checkboxes, users can select any number (zero, one or more) of independent options from a predefined list.
  2. A stand-alone checkbox is used to turn a setting option on or off.

Toggle switches

With a toggle switch, users can change the state of a setting between two opposing states, like yes or no, on or off.

Radio buttons

Radio buttons are used to choose one option for a set of mutually exclusive choices. It means once one option is selected, the previously selected option automatically deselects. Users can choose one and only one option at a time.

Dropdown list

Similar to radio buttons, dropdown lists allow users to make a choice among a list of mutually exclusive options. However, dropdown lists can be used for wider purposes, like command menus, navigation menus, form filling and attribute selection.

#1 Answer the following questions, choose the right control

  1. How many options are included?
  2. How many options can users choose?
  3. What the correlations of each option?

The table below shows which one you should choose based on your answers to those questions.

The ultimate guide for selection controls in UX design (5)

#2 Single checkboxes vs toggle switches

From the table above it seems single checkboxes and toggle switches are interchangeable. After doing a little research about each platform, I found out they have their own guides for single checkboxes and toggle switches:

Apple — MacOS:

No toggle switches in MacOS environment

Use checkboxes to:

  • Let the users choose between two opposite states
The ultimate guide for selection controls in UX design (6)

Apple — iOS:

Use toggle switches to:

  • Toggle a single option between two mutually exclusive states — on and off

Use checkboxes to:

  • Select any number of items from a list

Material design

Use switches to:

  • Toggle a single option on or off, on mobile and tablet
  • Immediately activate or deactivate something

Use checkboxes to:

  • Select one or multiple items from a list
  • Present a list containing sub-selections
  • Turn an option on or off in a desktop environment

Google still uses toggle switches to turn an option on or off in the desktop environment.

#3 Single checkboxes vs radio buttons

Another case where I find difficult to determine which one to use is when you are asking users to choose one option between two choices. There are three controls you can use in this case: single checkboxes, radio buttons or toggle switches, so how to make the decision?

Use radio buttons if the two options are different alternatives rather than the opposing state. Use single checkboxes or toggle switches to turn an option on or off.

The ultimate guide for selection controls in UX design (7)

#4 Stick to the Square Checkboxes

Checkboxes and radio buttons work differently. Users can only choose one option for a radio button, but they can select any number of options for a checkbox. If you make checkboxes look like radio buttons, users would expect they only can choose one option at a time.

The ultimate guide for selection controls in UX design (8)

Google and Apple use rounded checkboxes rounded with a checkmark. I don’t know how many users are confused by it. Personally, I would stick to the convention unless I have a great reason to break it, looking good isn’t one of the reasons.

Traditionally, checkboxes are square, there is not good reason to deviate from this pattern. Don’t make them diamond-shaped or round.

— About Face by Alan Cooper.

The ultimate guide for selection controls in UX design (9)

Creativity isn’t about breaking the rules for being different from others, it’s about solving a complex problem in a simple and intuitive way, not in a way that would confuse people.

#5 Avoid dropdown list when there are more than 10 options

47% of E-Commerce sites use a dropdown list for the “Country” field in their checkout process. This long dropdown that requires scrolling makes it hard for users to choose their choice. It would be so much easier for them just to type their countries.

Selection Controls — Material Design

Check Boxes — Windows Design Guideline

Thanks for reading. I hope you enjoy it and find something useful. Feel free to leave your comments below.

Find me on Linkedin or Dribbble

The ultimate guide for selection controls in UX design (2024)
Top Articles
Latest Posts
Article information

Author: Fr. Dewey Fisher

Last Updated:

Views: 5796

Rating: 4.1 / 5 (42 voted)

Reviews: 81% of readers found this page helpful

Author information

Name: Fr. Dewey Fisher

Birthday: 1993-03-26

Address: 917 Hyun Views, Rogahnmouth, KY 91013-8827

Phone: +5938540192553

Job: Administration Developer

Hobby: Embroidery, Horseback riding, Juggling, Urban exploration, Skiing, Cycling, Handball

Introduction: My name is Fr. Dewey Fisher, I am a powerful, open, faithful, combative, spotless, faithful, fair person who loves writing and wants to share my knowledge and understanding with you.