The ultimate guide for selection controls in UX design
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.
Usage of Each Control
Checkboxes
Checkboxes can be used in two different ways:
- With a group of checkboxes, users can select any number (zero, one or more) of independent options from a predefined list.
- 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.
Choose and Use the Selection Controls Correctly
#1 Answer the following questions, choose the right control
- How many options are included?
- How many options can users choose?
- What the correlations of each option?
The table below shows which one you should choose based on your answers to those questions.
#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
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.
Mircosoft
Use toggle switches to:
- allow users to turn things on or off, like a light switch.
Use checkboxes to:
- Select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from.
#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.
#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.
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.
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.
Further Reading
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.
