Toggle Switch: 5 Simple Design Tips For Better Design

Nick Babich

·

Follow

Published in

UX Planet

·

5 min read

·

Aug 5, 2020

--

Toggle switch (known as “toggles”) is a UI control that has two mutually-exclusive states, such as ON and OFF. The design and functionality of this control is based on a physical switch that allows users to turn things ON or OFF (i.e. light switch). Even though that toggle switches have been in user interfaces for a while, many designers still misuse them.

In this article, I will review 5 best practices for using toggle switches in UI design and illustrate them with some excellent visual examples.

1. Use toggles to change settings

Toggles are best suited for changing the system settings or preferences (i.e. states of system functionalities). For example, a toggle is right control when you want to allow users to turn the Airplane Mode ON or OFF.

Enabling Airplane Mode in Apple iOS. Image by Apple

Toggles are the preferred way to adjust settings on mobile because they take less screen estate (in comparison with two radio buttons).

2. Toggle should always have a default value

Toggle comes with a pre-selected default state (either ON or OFF). If you need to allow users to make a choice (i.e the user needs to answer ‘yes’ or ‘no’), it’s better to use a checkbox because the checkbox doesn’t have a default value.

Do: ‘Stay signed in for a week’ is a checkbox because it’s a yes-or-no question. Image by Stripe

3. Write good labels

Good labels make the toggle switch easy to understand. Label makes it clear what option the toggle controls, as well as what state the toggle right now.

Here are a few things to remember when writing labels:

• Write clear labels. The toggle labels should describe what the control will do when the switch is ON.
• Write short and direct labels. Limit the total number of words. Label should have one or two words, preferably nouns, that describe the functionality of the toggle controls.

Don’t: Do you want to see average price?

Do: Show average price

• Use the left-aligned inline label. Place labels to the left from the switch to make it easier for users to comprehend the meaning. Left-aligned labels will work best as they fit the way users scan the layout (in the Western culture, people read from left to right).

Do: Left-aligned inline label in Apple iOS

• Avoid adding labels to describe the values of a toggle. Toggles are either OFF or ON. Adding extra text labels that describe these states (‘On’ or ‘Off’) will introduce unnecessarily clutters to the interface.

Don’t: Use “On” and “Off” text labels. Image by Microsoft

4. Any action triggered by the toggle should immediately take effect

When users interact with toggles, they shouldn’t need to click Save or Confirm button to apply a new state. For the very same reason, it’s better to avoid using toggles in long forms where other types of form fields are present, and the user needs to tap the Submit button for changes to take place. In this case, it’s safer to replace a toggle switch with a single checkbox.

If immediate results are not achievable due to system delays (sometimes it takes a few seconds for the system to change of state), it’s possible to add a processing status loop animation. But remember that the operation should take no more than a few seconds.

Do: A processing status animation on the switch. Image by Material Design

5. Strive to create familiar design

Similar to any other UI elements, the visual appearance of the UI element help users predict what will happen when they interact with this element.

• Don’t be too creative. Any unusual style can easily confuse users.

While checkboxswitches is a fascinating concept, it can easily confuse some groups of users. Image by Oleg Frolov

• Avoid creating a toggle that includes the text “ON” and “OFF” within the graphic itself. It makes it harder for users to decode the current state.

Don’t: Put ‘Off’ and ‘On’ text within the graphic. Image by Zhenya Rynzhuk

• Utilize color to create familiar design. Use a contrasting color to denote the state. Most users are familiar with the following behavior — a switch shows that it’s OFF when the switch appears grayscale and ON when the accent color is visible.

Do: Use color to denote the state. Toggle in Apple iOS. Image by Apple

• Be careful with motion language. Avoid fancy animated effects for frequently used UI controls. While fancy animated effects can impress first-time users, they can also introduce extra visual noise and have a negative impact on regular usage.

Don’t: Use fancy animated effects for your functional UI controls. Image by Aaron Iker

• Use consistent visual appearance. Inconsistency will force users to stop and think about how to interact with UI control. Ensure that the visual language that you choose to use for toggles is used consistently. All toggles should be implemented in this style across your app.

Don’t: Use a few different styles of toggles within your app. Image by Alex Muench

• Follow the platform’s default visual design. It’s a safe bet when the style of your toggles corresponds with platform standards. It helps people who familiar with a platform decode the meaning of this UI control.

Do: Follow platform default visual styles. Toggles in Android and iOS. Image by Material Design

References

Learn how to design better products

Interactions between computers and humans should be as intuitive as conversations between two humans. Interaction Design Foundation will help you to learn how to design for efficiency and persuasion.