How to Use a Toggle Router

The toggle is an incredibly common interface element and a core piece of many popular websites. However, many designers do not use toggles correctly. This leads to confusion for users and creates cognitive issues.

In order to be effective, toggles must clearly communicate their current state and the context it is in. It should also be obvious what will happen when users press the toggle. This is a challenging task, since toggles don’t have text “on” or “off”, so they must rely on other visual cues to convey their status.

One of the most common uses for Toggles is in experimentation and A/B testing. In this case a Toggle Router will consistently send a given user down one codepath or the other based upon the cohort they are in. This allows us to measure the impact of a change on user behavior and ultimately make data-driven optimizations in our application.

Toggles are also used to hide content from certain viewer groups. This can include things like private worlds, subscriber containers and even article vignettes. This feature is great for sharing articles with a limited number of people and provides additional flexibility over other features such as guilds, which only allow a single person to view hidden content.

When using Toggles to manage feature flags it is important to use a mechanism that allows for dynamic in-memory re-configuration of the toggle configuration. Using static files to hardcode the toggle configuration is insufficient once you reach a certain scale and can be cumbersome when managing multiple environments for test/dev. Savvy teams treat toggles as inventory that comes with a carrying cost and are proactive about removing them once they have been tested and stabilized. This is often done via a process called Blue-Green Deployment.