How to Use Toggles in a Savvy UI Design

A toggle (also called a switch or button) is an interface element that helps people manage the state of content or a view. It’s commonly used to control things like options menus in software. For instance, when you press the caps lock or num lock keys on a keyboard it’s a toggle that turns those functions on and off. It’s important to use toggles sparingly because they can be confusing for users, and can often cause cognitive stress if not used correctly.

When you use a toggle, make sure that the UI clearly communicates its current state and provides a clear path forward if a user changes their mind. A good way to do this is by using a direct label, standard visual design, and a distinctive appearance for each toggle state. In addition, it’s helpful to provide a tooltip when the toggle is active, so that the user knows exactly what action they’re taking.

It’s also wise to ensure that the toggle configuration is tested during each QA iteration. This is especially true if the toggles will be used to manage a feature flag in production. Savvy teams view Feature Toggles as inventory that comes with a carrying cost and seek to keep their inventory low by being proactive in removing toggles as they become obsolete. For example, some teams have a rule that they add a task to remove the toggle in their backlog whenever they release a new version of their product. Others put expiration dates on their toggles and create “time bombs” that will fail a test run if the toggle hasn’t been removed by an upcoming QA iteration.

Finally, when you are managing a large number of toggles it can be tricky to maintain consistency across different environments. If a toggle needs to be changed, it can be difficult to do so quickly if you need to edit configuration files in each environment. This can have a significant impact on the cycle time of your QA testing process and the all-important feedback loop that CI/CD provides. For this reason, it’s worth considering a dynamic runtime config system that allows for the rapid in-memory re-configuration of specific toggle states.

For example, a Canary Release could be exposed to a randomly selected cohort of users while a Champagne Brunch would only be exposed to a paid user segment. This type of dynamic toggling is much easier to manage in a runtime config system than in a static file.