Toggle is a verb meaning “switch or alternate.” We use it to talk about switching between different settings, apps, or screens on a mobile device. It’s also a term used in software to describe the process of hiding and showing features to users. But when used on the web, toggles can be confusing and lead to user frustration. They’re easy to miss, and the visual cues they use can make them hard to understand.
This is partly because toggles don’t resemble the physical switches we’re all familiar with from our desktop hardware or even phones and tablets. They look more like sliders, and we’re used to using them for tasks that involve scrolling. That’s why it’s important to make them as visible as possible—and that means incorporating visual cues like movement and color. Ideally, they should resemble sliding controls. In addition, it’s crucial to ensure that toggles are cognitively OK. They’re simple enough to use, but the lack of a mutually exclusive state (on and off) can cause confusion. Designers often add colors to help users distinguish the current state, but WCAG advises against relying solely on color to convey meaning.
A good way to prevent this confusion is by making sure that the toggle has a clear name and context to explain what it does. The name should be clearly displayed, and should include both the label and the current state (on or off). A name also makes it easier for developers to debug and understand why a toggle has changed states.
Then, designers should use high-contrast colors to signal a change in state. In addition, they should evaluate societal and cultural contexts—using red, for instance, might not be a great idea for an audience who associates it with stop signs or traffic signals. Finally, they should also consider the nuances of accessibility. Many people rely on screen readers and other assistive technologies to read the content of web pages, and it’s important for toggles to be accessible for them as well.
Ultimately, the goal of a toggle is to let users easily control what they’re seeing and do in an app or website. By implementing best practices and avoiding pitfalls, designers can create toggles that make it easier for users to interact with their product and achieve their goals.
Toggle is a digital trade magazine that explores the vital role technology plays in companies and organizations across the spectrum of industry, and the men and women who make it work. From data privacy and cybersecurity to cloud solutions and emerging applications, we dive into the unique challenges these leaders face on a daily basis.
Toggle is a project of the Digital Media Lab at Stanford University. For more information about the team and how we’re helping people navigate the ever-changing technology landscape, visit our about page. You can also subscribe to our newsletter or follow us on Twitter. If you have questions or feedback, reach out to our team.