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?
![switch_uk The sensible switch: press down to switch on](https://i0.wp.com/c306.net/converge/wp-content/uploads/2021/02/switch_uk.jpg?w=373&h=373&crop=1&ssl=1)
![switch_american The American switch: pull up to switch on](https://i0.wp.com/c306.net/converge/wp-content/uploads/2021/02/switch_american.jpg?w=279&h=373&ssl=1)
Or labeled for choosing modes
They don’t do RTL well
Using an RTL language? Which is the on side—turned to the right, or to the left?
![privacy_settings_ltr Android privacy settings, LTR language](https://i0.wp.com/c306.net/converge/wp-content/uploads/2021/02/privacy_settings_ltr.png?w=161&h=322&ssl=1)
![privacy_settings_rtl Android privacy settings, RTL language](https://i0.wp.com/c306.net/converge/wp-content/uploads/2021/02/privacy_settings_rtl.png?w=161&h=322&ssl=1)
![nova_settings_ltr Nova settings, LTR language](https://i0.wp.com/c306.net/converge/wp-content/uploads/2021/02/nova_settings_ltr.png?w=161&h=322&ssl=1)
![nova_settings_rtl Nova settings, RTL language](https://i0.wp.com/c306.net/converge/wp-content/uploads/2021/02/nova_settings_rtl.png?w=161&h=322&ssl=1)
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](https://i0.wp.com/c306.net/converge/wp-content/uploads/2021/02/nova_settings_rtl_winddown.png?resize=512%2C1024&ssl=1)
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:
![android12_on Android 12 switches with explicit state indicators](https://i0.wp.com/c306.net/converge/wp-content/uploads/2021/02/android12_on.jpg?w=326&h=688&ssl=1)
![android12_off Android 12 switches with explicit state indicators](https://i0.wp.com/c306.net/converge/wp-content/uploads/2021/02/android12_off.jpg?w=326&h=688&ssl=1)
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](https://i0.wp.com/c306.net/converge/wp-content/uploads/2021/02/rtl_gmail_checkbox-1.png?resize=512%2C1024&ssl=1)
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](https://i0.wp.com/c306.net/converge/wp-content/uploads/2021/02/wp-1614019647355.png?resize=512%2C1024&ssl=1)
2. Use explicit labels
I love this example.
![light_dark_switch](https://i0.wp.com/c306.net/converge/wp-content/uploads/2021/02/light_dark_switch.gif?resize=300%2C225&ssl=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. ↩