The word toggle describes switching back and forth between two things, for example, going from one application to another or between stream and map views in a photo-sharing app. It can also refer to a hardware button or switch that has only two settings: on or off. For instance, the caps lock and num lock keys on most keyboards are toggle switches for those specific functions. The same concept is used in software when a user selects an option and toggles it on or off, such as turning the Wi-Fi function on or off on a smartphone.
In UX design, toggles are a preferred control for adjusting system settings and preferences (i.e. states of functionality) because they take up less screen real estate than two radio buttons and are clearer for users to understand (since they always have a default state). However, toggles are not the best choice when users must answer a yes or no question; for these types of situations, it’s better to use a checkbox that doesn’t require any action to update its state. When using toggles, make sure that their labels are direct and use standard visual designs to avoid confusion. Also, when possible, use high-contrast colors to indicate the toggle’s current state. Additionally, if it takes more than a few seconds for a toggle’s state to change, a processing status loop animation can help users understand the delay.
Toggle is a registered trademark of Houghton Mifflin Harcourt. Copyright
EDITOR’S NOTE: The opinions expressed in this article are those of the authors and do not necessarily reflect those of the Advisory Board, Cambridge University Press or its licensors.