← Back to team overview

unity-design team mailing list archive

When to use toggle switches

 

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Thorsten Wilms wrote on 07/06/12 11:59:
> 
> On 06/06/2012 10:28 PM, Hans Heintze wrote:
>> 
>> The menu specifications for Quantal Quetzal include
>> right-aligned toggle switches. I am concerned that the
>> combination of left and right aligned menu items could make it
>> very easy to accidentally trip over other menu indicators when
>> trying to reach a toggle.
> ...
> 
> If all you have to communicate is On/Off, what is wrong with 
> checkboxes? They do have unclear target areas (in proper 
> implementations, the label is clickable, too), but are well 
> established and do not suffer from the problems switches have, as 
> listed above.

Good question.

For some kinds of boolean setting, a checkbox feels too feeble to
control it -- it leaves you unsure whether it is actually turned on or
off right now. In the past, a pair of radio buttons, "On" and "Off",
was sometimes used to solve this. A switch control does the same job,
in a more compact and reassuring way.

Examples of this include Flight Mode/Airplane Mode in networking,
Bluetooth, automatic backups, and screen reading.

For something to fall into this category, it is important for it to
have, as its label, an understandable noun phrase (or gerund phrase)
with a clear on/off state: "Flight Mode", "Bluetooth", "Automatic
backups", "Screen reading". The sort of label you'd expect to see next
to a switch in the physical world.

Most boolean options either don't need that level of solidity, or
can't be labelled briefly enough for a switch, or both. They should
continue using checkboxes/checkmarks, or a pair of radio buttons/radio
items. "Show Time in Menu Bar", "Record file and application usage",
"In the clock, show: [/] Date and month", and so on.

This is different from how switches are used in iOS, where they are an
all-purpose replacement for checkboxes. That can be awkward when the
option is too nuanced for an on/off switch. Some iOS developers work
around this by adding explanatory captions underneath switches, while
others use custom switch graphics that omit the "OFF" and "ON" text.

You may have noticed, in System Settings, that some designers are
currently overusing switches -- in the same way that they previously
overused icons in menu items, and overused tooltips before that, and
overused group boxes and section headers before that. If the past is a
guide, they'll exercise more restraint in years to come.

- -- 
mpt
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)
Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org/

iEYEARECAAYFAk/0bY8ACgkQ6PUxNfU6ecq2QQCgo/HQb3CbYwPdfWIngdP9JNDv
R7QAn0ZZ6osUqfdDV/exR8Eqwskt+pfd
=AmwB
-----END PGP SIGNATURE-----


Follow ups

References