A toggle is a switch that has two opposing states. It’s found in all aspects of computing when there is an options or preferences list and uses a different appearance to indicate each state (on and off).
Toggles are great for letting people update preferences, settings, or other types of information. However, like all user interface components, they must be used properly. If not implemented correctly, they can create cognitive problems for users that may lead to confusion, errors, or frustration. For this reason, it’s important to evaluate the context in which toggle switches are being used and ensure that they meet the following criteria.
Clearly identify the setting, view, or content the toggle is affecting. This helps ensure that users understand what will happen when they click the toggle.
Use a toggle only when the option has a default value and when it’s appropriate to have an immediate effect on the state of that element. For example, toggles shouldn’t be used as a replacement for radio buttons or checkboxes, which are better suited for letting users choose from multiple items.
Beware of relying on color alone to convey meaning! It’s common to see designers add colors to toggles in order to help users distinguish their current state, but this can be confusing for users. For example, using the color red to signify an “on” position can be a misinterpretation for users who have color vision deficiency.
Toggles are often confused with sliders, which also have the ability to move between two opposing states. To avoid this confusion, design your toggles so they look more like a switch and utilize movement to help users identify their current state.
Ensure that the toggle’s label describes what will happen when the switch is in its current state. This will prevent users from mistakenly thinking they’re changing a setting or action when the switch is in its current position.
Toggle switches can be an effective tool when they’re being used to allow users to manage the state of content or a view, but it’s important that they’re used consistently across platforms and that the labels are descriptive. If you’re using a toggle to show/hide content, for example, make sure this is clear to all users by ensuring that the content is only visible when the toggle is in its on position. For more on this, see Platform Considerations. To learn more about how to optimize your toggles, visit the Content Toggle Item advanced options.
