Lights-out. Switches Are Weird

What do they do?

Let me be honest, I can’t turn on or off the lights properly in my room.

It was poorly designed; I always forget which way is on — for god’s sake — there is no label either. The only clue that I have are only “God dammit! I’m blind!” when the light is on and “F**k! ! ! My toe!” when it’s too dark.

Or — ”Diana, go away!” Question: How many time I have to switch to understand that the lamp was broken? TWICE.

Then I met the switches again within our UI components. Son of a switch!

Organizing the mess

When you build a design system with your team, part of the process is to organize the mess. Rethinking how certain UI components work; Why did we even use it at the first place? Most of the answers were not surprising:

We asked around

“What do you think switch-toggles are? What do they do?”

“Switches are checkboxes for mobile app. Checkbox is so web 2.0, you know.”

“I‘m not sure, I tapped this, and things happen.”

“Checkboxes are for agreeing, right? Like ‘☑️ I agree’… while switches are for, activate something.”

We dig around some more.

iOS Human Interface Guidelines

Switches: A switch is a visual toggle between two mutually exclusive states — on and off.

Material Design

Switches allow a selection to be turned on or off.
Switch: On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.

Not so helpful. So… When do we use them?

“Switches are checkboxes for mobile app” sounds like a good argument at first, but we can’t have that when building a design system. Why having two practically same controls?

Eliminate one or have a very good reason to keep two.

Switches are not here to replace checkboxes

✨ After a heated discussion, we realized something. Switches usually paired with a noun label:

Label for switches rarely said: “Turn on your wi-fi” because the switch itself is showing current status while offering a mutually exclusive option. It can be read as one full sentence:

So we made simple rules to treat the switches;

  1. Can you reduce the label to one simple noun without any additional helper text?
  2. Does it make sense to read it out-loud?

For example the good old “I agree” checkbox when translated to mobile-app would supposedly look like:

So yeah, switches aren’t here to replace checkboxes only because they look better. They’re here to tackle specific use case and interaction pattern (even though most of the time misused — also sub-par usability).

Shall we use the switches? Yes, wisely.

How’s your design team’s way of handling switches?

This article is a personal note on buiding a design system and will be updated when the weather is good and the coffee is strong. Pardon the language and how disorganized it is.

Show your support

Clapping shows how much you appreciated Arie Aulia Nugraha’s story.