Popularized by iOS settings, the toggle—or switch—has become pervasive in applications everywhere. Toggles save space by controlling two mutually exclusive options with a single element.
It seems like it should be simple to use, but toggles are often poorly implemented. I’ve put together a few basic guidelines to provide the best user experience.
Make disabled states muted
Make it absolutely obvious whether a toggle is on or off. The most common way to do this is to use a muted or gray background for disabled and a colored background when enabled.
Using two colors is bad practice, as it requires the user to determine the dominant color. Also, don’t use red for the off state. Red is generally reserved for destructive actions.
Some designers insist the toggle should have an ON or OFF label indicating the current state. Adding labels may help color-blind users. But if you’ve stuck to a single color and gray, I don’t think this is necessary.
Use verbs to describe what the toggle does
The best way to combat ambiguity is to use verbs. Write a phrase that explains exactly what happens when the toggle is enabled. Here are a few examples. Notice how each phrase starts with a verb:
- Play a sound for new activity
- Send me a weekly summary email
- Share my location
Do not change the phrase once the toggle is enabled. This will likely confuse the user about the state of the toggle.
Make changes effective immediately
So much of interface design is meeting a user’s expectations. When a user enables or disables a toggle, the expectation is that the action occurs immediately.
If you need the user’s input in another field, consider a checkbox in it’s place. Do not use save buttons with toggles. A good rule of thumb—if you have a save button and a toggle in the same view, revisit that form.
Summary
Use muted colors when a toggle is off. Use verbs to clearly describe the toggle. Make changes effective immediately. Do these things for less ambiguous toggles.
Comment