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.
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.
2 thoughts on “ Using Toggles in User Interfaces ”
I stumbled upon this article when looking for more information about showing states for switches. You mention not using red for the off state, but I see this everywhere. Also, many people will associate red with stopping. Why not use red for the off switch?
People associate red with stopping when it comes to transportation. The same is not true for most applications. When you come across a red element, it is almost always some sort of warning or destructive behavior.
– Github, Delete Repository
– Twitter, Unfollow User
– Adsense, Remove Campaign
These are all destructive behaviors (to the user anyways).
Thinking about this more, this actually extends into the real world. Think about turning on or off your DVR. If it’s on, there’s a light that appears on the button. When it’s off, nothing—that’s the case for most electronics and appliances around my house.
I’d love to see a few examples of using red in an off state so I can study further.