Switches and checkboxes

tldr: Say no to switch toggles. Say yes to checkboxes. (Unless you are Airbnb)

Switches

Switches can be ambiguous about their state and their intent.

IRL, they are usually vertical

Which side is on?

Or labeled for choosing modes

switch_mode

They don’t do RTL well

Using an RTL language? Which is the on side—turned to the right, or to the left?

The accent colours on the switch are a helpful clue.

But the colours can’t help when Digital Wellbeing turns on the grayscale mode.

switch settings rtl grayscale
Grayscale turned on by wind down mode. Which switch is ON, again?

But Google uses them

Yes, they do. They also appear to be learning the folly of their ways. Check out these screenshots from upcoming Android 12:

Checkboxes

If it’s filled, it’s on. If it’s empty, it’s not.

There’s no right, left, up or down. Language doesn’t matter. Colour doesn’t matter. No ambiguity1. No confusion.

rtl_gmail_checkbox
Gmail. No colours for hint. No RTL support on an RTL device. Yet, no confusion. Checkboxes FTW!


But we still wan’t to use switches

My hippo/designer/PM/developer wants to use a switch instead of a checkbox, and I can’t/won’t convince them otherwise.

There’s still two options. Both are more work, but the users will (quietly) thank you.

1. Use explicit state indicators

Don’t just use the default switch, put some effort into it. (Or just copy the best — Airbnb do it really well.)

wp-1614019647355.png
Airbnb app — switches with explicit state indicators

2. Use explicit labels

I love this example.

light_dark_switch
Theme toggle switch with labels and indicator

  1. There’s a third mode often seen: the ‘dash’ed checkbox. First advice: never use it. If you have to use it, only use it to show a mixed state of a sub-group of checkboxes. Even then, don’t use it.

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.