Table of Contents
There are many ways to describe what a UX designer does, but to keep it simple: our job is to make things easy and enjoyable for people to use.
So, how do we make things user-friendly? Presenting a design to users is like introducing yourself; you need to communicate who you are and set the right expectations. We as UX designers need to help users understand where they are and what they need to do next.
Toggle switches are efficient, they save space by controlling two mutually exclusive options with a single control. Despite their popularity, toggle switches usually fail to fulfill the first rule: to inform users of its current state.
Where did GUI (Graphical User Interfaces) toggle switches come from?
GUI toggle switches come from physical switches like light switches that we use at home. These light switches operate with two mutually exclusive states, such as “On” and “Off.”
When computers started using pictures and graphics, designers wanted to make something similar to those light switches for software. They created digital toggle switches that work just like real switches, letting people easily turn things on or off in apps. This makes it simple for everyone to understand and use.
Digital switches also adopt the physical switch characteristics that their interaction is instantaneous.
One significant advantage of light switches is their visual indication of the current state, which is determined by the room’s brightness rather than the switch’s position. For instance, flipping the switch in a dark room turns the lights on, while flipping it in a lit room turns the lights off. This surrounding environment provides immediate feedback, making it clear whether the lights are on or off.
While some software toggles, like the Dark Mode toggle, offer similar cues, many others lack immediate feedback regarding their enabled or disabled states, which can lead to confusion.
I have noticed that there are two types of toggle that usually cause challenges for users when not used right: toggle switches and toggle icons.
1. Toggle Switches
Toggle switches let users toggle between “On” and “Off” states, just like regular light switches do in real life.
One challenge with these switches is clearly conveying their current state. One common solution has been to place labels inside the switches, but it’s clear that this hasn’t been very effective.
With this design, can you tell which state the switch is currently in? Is “ON” an action or a state? If “ON” is a state, why is it displayed at the switch’s off position? For those of you familiar with this design pattern, it might seem like an easy question. However, for others, it can be quite confusing. You can only figure it out correctly because of the switch’s color, which indicates that it’s in an active state.
How about this situation? Where there is no color as an indicator, the question becomes incredibly more tricky.
This physical switch is no exception. Its state is still not clear and the label inside the switch also doesn’t help. We still do not know if the on is a state or go-to action. reading “on” next to a toggle could mean “this toggle is turned on” or “click here to turn it on” there” .
So what can we do to deliver a better switch without ambiguity?
No On Off label at all
You can simply use a brightly colored switch to indicate when it’s on. If the label inside the switch only serves to confuse users, why include it at all?
However, this design choice could pose challenges for individuals with Achromatopsia, a form of color blindness where people see only shades of gray. While this condition affects approximately 0.0033% of the population, it’s important to consider it if you aim to create an inclusive product.
Adding tooltip/ toast message
Adding tooltips is a great way to clarify toggle switches. However, if the product is a website or intended for mobile use, this may not be the best approach since tooltips typically require a hover action.
In this case, a toast notification could be more effective. It provides immediate feedback upon interaction, informing users about the switch’s state while remaining unobtrusive enough to ignore if they choose.
Showing both label outside
Displaying labels outside the toggle switch is an effective way to clarify its function without relying on color. By placing the labels outside, there’s no chance for confusion. The switch’s state is clear, whether ‘On’ and ‘Off’ are used as adjectives or adverbs. OS X has successfully employed this design and eliminated any ambiguity.
Change state label position
Microsoft has recognized this issue and moved the label outside the toggle switch.
However, the labeling remains ambiguous: since the ‘Off’ label is on the right and the toggle dot is on the left, users might mistakenly interpret the switch as being ‘On’ (moving away from the ‘Off’ label).
According to Gestalt Principles of proximity, we tend to perceive elements that are close together as belonging to the same group. To improve clarity, we can position the ‘On/Off’ labels closer to the switch description, as shown in this example:
Here, the ‘Off’ label is associated with the switch description rather than the switch itself, allowing ‘Off’ to function strictly as an adjective rather than an adverb.
A better approach is to change the phrasing. In this example, instead of using the standard ‘On’ and ‘Off’ labels, the alarm app utilizes ‘Tomorrow’ and ‘Not Scheduled’ to eliminate any confusion regarding the state or action.”
2. Toggle icon
Products frequently utilize toggle icons to switch between options beyond just ‘On’ and ‘Off.’
Toggle icons, such as a plus sign (+), chevron, play, or pause, signify interactive elements that can toggle between two states. When clicked or tapped, these icons typically change in appearance, such as expanding or collapsing a section, revealing or hiding additional information, or switching between different views or modes.
However, toggle icons can sometimes cause confusion. Some icons indicate the current state, while others represent an action. For instance, the play/pause icon reflects the action that will occur, while the dark mode/light mode icon shows the current screen state.
Another common example is the eye icon, which is often used to toggle the visibility of elements like passwords. Different systems may have varying conventions for these icons, adding to the complexity. Generally, the eye icon indicates the action ‘show,’ as seen on platforms like X.
You can still find other systems that use the eye icon as an the current state indicator, like on the Adobe Cloud login page.
Such ambiguity is the bane of many UX designers’ lives. What’s the best choice? Does it impact how effectively users complete the form?
I think the eye icon poses more of a challenge for designers than for users. The reason is simple: much like a light switch, the cues indicating whether it’s on or off come from the surrounding context, not the icon itself.
For instance, do you ever check the position of a switch before turning on a light? Probably not. People typically assume the switch is off when the room is dark, so there’s no need to check. This can lead to confusion in tasks like turning on a light in another room or adjusting the water heater, as we don’t see immediate effects.
When you see dots in a password field, you can tell that the password is hidden without relying on the eye icon. The same logic applies to light/dark mode toggle icons.
State indicators can extend beyond visual cues. For instance, with the play/pause icon, the state is represented by the music or sound from your device. You can determine whether the audio is playing simply by listening, without needing to rely on the design itself.
Action or state?
If the toggle represents an action, such as Play/Pause, it should indicate what will happen next. For example, while paused, it should display “Play,” and when playing, it should show “Pause.”
Conversely, if the toggle represents an option, like Shuffle/Linear, it should reflect the current state.
Using segmented control
If the toggle icon represents an option, consider using segmented controls. Segmented controls are ideal when all options need to be visible simultaneously for easy comparison.
On the other hand, use toggle icons when space is limited and you want to offer a compact way for users to switch between states.
Adding label
If the toggle icon isn’t immediately clear or could be ambiguous for users, adding a label can provide essential context and help them understand its purpose. For example, on Mailchimp’s login page, the eye icon is accompanied by the label “show,” indicating that it represents an action.
Using checkbox instead
Many of you may be familiar with the guideline that checkboxes require a second confirmation and do not take immediate effect like toggle elements. However, in certain situations where clarity is a priority, you can still use a standalone checkbox. This approach is also referenced in the M3 design system. A standalone checkbox can be used to execute an immediate action.
Conclusion
Toggle switches or icons in products need to be clear about what they do and what state they are in.
To achieve this, we must consider various design strategies, such as eliminating ambiguous labels, utilizing color cues, and providing contextual feedback through tooltips or notifications. The distinction between action-oriented and state-oriented toggles is crucial.
But remember, whether a toggle element shows an action or a state can be a personal choice, as there is still conflict among designers and many design systems have different approaches. I am not trying to dictate what you must or must not do. As long as the buttons work well, apps can create their own rules for how they look. What’s most important is that they are consistent in their design.
Design is all about questioning the usual ways of doing things and seeking better solutions to both new and old challenges. Without this challenge, there is no progress.
Without it, we would still be painting the same shapes on the same cave walls, not daring to think it can be done differently.
