When creating forms, interaction designers are often faced with having to select an UI element that dictates the interaction of option selection. Of course, we all have rules of thumb that we follow. Nonetheless there are some considerations to keep in mind when you choose the element you would like to use as selection control.
Option selection can be represented by checkboxes, toggles, radio buttons and drop-downs controls. Each of them can be great when used correctly. In this article we’ll focus on checkboxes and toggles.
Checkboxes are used when there is a list of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, and checking one box doesn’t uncheck the others.
The toggle switch represents a physical switch that allows users to turn things on or off.
The toggle switch general use is to represent an action (e.g. start or stop something). It has the analogy of a light switch:
Best Practices for Checkboxes and Toggles
Use Standard Visual Representations
A checkbox should be a small square that has a checkmark or an X when selected.
A toggle should look like a on/off switch.
You should provide a clear visual feedback for user interaction with control. Subtle animation makes the experience feel crafted — it’s especially important for mobile apps which UI controls should appear tangible, even though they are behind a layer of glass.
Lay Out Your Lists Vertically
Try to present your lists vertically, with one choice per line. This rule works both for toggles and checkboxes. If you must use a horizontal layout with multiple options per line, make sure to space the buttons and labels so that it’s abundantly clear which choice goes with which label. Below is an example of set with elements located too close to each other:
Current State for Toggle Should be Outside the Control
When design toggles you should avoid state-action ambiguity. We take the iOS 6 switch design as an example and focus on the state that’s blue and says ON.
Can you tell if the switch is ON currently, or if it will go on if you move/click/tap the slider? Is “ON” here a state(adjective) or action(verb)? Unclear.
You shouldn’t confuse users and it’s important to have a distinction between an action and a state. In fact, the design could be further enhanced for user friendliness by highlighting the current state:
Use Positive Wording For Checkbox Label
Use positive and active wording for checkbox labels, so that it’s clear what will happen if the user turns on the checkbox. Avoid negations such as “Don’t send me more email,” which would mean that the user would have to check the box in order for something not to happen.
Use Label Tags as Click Targets for Checkbox
All checkboxes have labels, but not all use label tags. Checkboxes are tiny in nature, and, thus, according to Fitts’ law, they can be hard to click or tap. To enlarge the target area, let users select an option by clicking or tapping not just that small square, but also the label or associated words.
Use Checkboxes Only To Change Settings, Not as Action Buttons
For a binary choice, the main difference between a check box and a toggle switch is that the check box is for status and the toggle switch is for action. If a physical switch would work for the action, a toggle switch is probably the best control to use.
In the example below, it’s clear with the toggle switch that the wireless is set to “On.” But with the checkbox, the user needs to think about whether the wireless is on now or whether they need to check the box to turn wireless on.
Commit Interaction For Checkbox and Toggle
You can delay committing a checkbox interaction (as part of a form submit, for example), while you should immediately commit a toggle switch interaction.
It is a good UX to immediately change the affected setting by the switch and not only after pressing “save” or returning to the previous screen. We have this expectation for a switch in real life (for example, we know light immediately turns on).
And use a checkbox when the user has to perform extra steps for changes to be effective.
When designing your interface, try to be consistent and predictable in your choice of interface elements. By following design standards you enhance users’ ability to predict what a control will do and how they’ll operate it. Conversely, violating the standards makes the user interface feel brittle — as if anything can happen without warning.