UX Drill 18 — Switches/Toggles vs. Check & Radio & Segmented control

Do not use a “switch” just because there are “two” things.

This is part of my drill-down journey of UX design during my graduate program in Human-Computer Interaction. Despite rigorous 4 years of work experience, I realized there are “some gaps” in my knowledge… Still!

My work was primarily focused on branding and user engagement. Working in an advertising agency for a big tech company like Samsung meant that most of my work revolved around meeting our clients’ needs rather than focusing on the usability or accessibility of our end users. This motivated me to return to school to study Human-Centered Design.

From today, I will hone my skills in UI/UX by specifically focusing on the parts that were always confusing or vague to me, even as a design practitioner. Just to help my memory — and yours as well!

TL;DR

There are 3 main selection controls.

• Checkboxes for multiple selection options, but a user’s check behavior doesn’t trigger immediate action.
• Radio button for a single option in a list.
• Switch for on/off, yes/no binary options, which will trigger immediate actions.
• Segmented Control for opposing options (just separate), not for binary options like yes/no.

What is a switch/toggle?

Google M3 Design

At first, I thought I was the only person calling it a toggle. I realized I wasn’t wrong. While most design systems call it a “switch,” Apple calls it “Toggles.”

Apple HIG

Switches are relatively simple and intuitive UI.

They are based on a physical light switch that immediately turns a light on or off. So, the user’s action must lead to immediate action—zero wait.

Switches can be used with/without icons.

Anatomy of a switch

Google M3 Design

This is what Google uses. The movable area is called “Track.”

The circle inside is called “Handle.” Uber calls this a “knob.”

Uber

They use “track” the same but call the handle the “knob.” Also, they use 2 styles of switches (Thicker/ slimmer ones)

Switches are so simple. However, when using them on screens, you should consider whether they are the best choice compared to radio buttons and checks.

(1) Switch vs. Checkboxes

Switch/Toggle triggers immediate action, while checks don’t.

Uber

For example, even if you check the checkboxes, nothing changes immediately. Changes occur only after clicking the CTA.

(2) Switch vs. Radio Buttons

Both Switches and Radios choose one option. However, the radio button can be more than 2 and not Yes/No options.

(3) Switch vs. Segmented Control

However, here comes a slight headache. Having two options is not enough reason to select switches.

According to Google, “Switches” are for binary options but not for opposing options. Opposing Options are options that aren’t yes or no. So, use switch/toggle for binary options and Segmented control for opposing options.

Google

Uber

Personally, I want to learn more about segmented controls, so please stay tuned!

Summary

There are 3 main selection controls.

• Checkboxes for multiple selection options.
• Radio button for a single option in a list. (2–5 options)
• Switch for on/off, yes/no binary options, which will trigger immediate actions.
• Segmented Control for opposing options (just separate), not for binary options like yes/no.

Google

Thank you for reading this.

Your support and applause really mean a lot to continue pushing myself!

Let’s connect. Here is my LinkedIn profile.