A toggle is a control that allows users to switch between two states (like ON and OFF). For example, on mobile phones, you can toggle airplane mode ON or OFF by tapping a button. Toggles are the preferred way to change settings because they don’t take up more screen space than radio buttons and have a pre-selected default state.
The word “toggle” is also used as a verb, meaning to switch between different settings or alternate between them. For example, when video chatting with two friends at once, you might toggle back and forth between screens to see them both.
In software, toggles are common in options or preferences menus. Any option item that can be marked on or off is a toggle.
For example, if you have a menu that lets you choose between stream and map views when you’re browsing your favorite websites, those are toggles. You can switch between them by clicking on the button with an icon that represents either one of those view modes.
Toggles are often used to perform multivariate or A/B testing. They’re a great choice when you want to test the effect of a feature on a particular cohort of your users. For example, you could use a toggle to test whether or not a particular feature is better received if you change the labeling on it.
While toggles are a convenient control for changing settings, they can be confusing for some users. In a recent study, we compared four different styles of toggles, all of which had the same functionality, but with slightly varying visual cues. The toggle with the most pronounced difference in color performed the best on our 5-second tests, but it was still a bit confusing for many users.
The best way to prevent this from happening is to ensure that the toggles are easy to read and understand. This means writing clear and concise labels that describe the action the toggle controls, as well as what its current state is. A good way to do this is by using a bold-thin font combination, and ensuring that the font size is consistent across both the active and inactive states. Finally, using a more saturated color for the active toggle makes it easier to pick out at a glance. In addition to this, using a more contrasting color for the inactive toggle can help differentiate it from the active toggle even at smaller sizes.
