Tag: Buttons

Toggle buttons should do three things — change states, show the current state, and reveal unselected options. If your toggle button doesn’t do all these things, it has poor usability.

Many single toggle buttons fail at either showing the current state or making the unselected option visible. They’re challenging to get right because users only have one button to switch states. Should a single toggle button display the state or the second option?

Many designers make the mistake of displaying the state on the toggle button. This practice is terrible because it hides the second option from users. They have no way of knowing that it’s combined with the state.

In the example above, the action to follow someone combines the state and the second option into a single toggle button. When users press “follow,” the button turns into “following,” but the unfollow option isn’t visible. The user has to press the “following” button to unfollow someone, which isn’t clear.

Sometimes users won’t see “following.” Instead, they’ll only see the “unfollow” option. Now the user isn’t sure whether they’re following this person or not. They have to assume that the unfollow state means they’re “following” that person.

In both cases, it’s clear how to follow someone but not clear how to unfollow them or if they’re following them already. This confusion occurs when you don’t display the current state and reveal the secondary option to the user.

To clear up the confusion, separate the state from the second option by displaying the toggled state in a text badge next to the profile data. Users will notice the “following” badge and know who they’re following. The follow button switches to “unfollow” when pressed, so users see the unselected option.

Toggle buttons are useful controls if you design them right. A single toggle button presents more challenges than multiple toggle buttons. If you make sure it follows these three requirements, you’ll have no trouble overcoming them.

1. Change states
2. Show the current state
3. Reveal unselected options

There’s no better way for changing states on an app than to use toggle buttons. A state change occurs at the press of a button. They save space by presenting two or more options in a single control. But when they’re confusing to use, they’re the worst.

Inverted Vs. Direct Color Scheme

The challenge with toggle buttons is making the current state obvious. Users often have trouble identifying the active state when the visual cue isn’t intuitive. This confusion causes them to select the wrong option and activate an unintended state.

Confusion happens when the visual cue used to indicate the current state is an inverted color scheme. It isn’t clear to users that the darker button signifies the active state. Many of them mistake the lighter button as the selected option because it also has an “on” appearance.

Inverted colors are problematic because they make the buttons too distinct from each other. When the buttons look different, it’s hard to tell which one is given emphasis when users compare them.

Toggle buttons need to have a similar style so users can compare the buttons and spot the active variant. They’ll then assign the variant option as the active state. Without a baseline for comparison, users don’t know what the visual cue is.

Instead of using an inverted color scheme, use a direct color scheme. A direct color scheme displays both buttons with dark text on a light background. The difference is that the selected option has a light shading and a bolded text label to indicate a highlight. Not only that, but the unselected options have a lighter border and text label to accentuate the contrast further.

A direct color scheme provides four visual cues for the active state compared to an inverted color scheme. The selected option has a visible variation, while the unselected option is more minimal. A one-to-one comparison makes it apparent to users which button has more weight.

Make Toggling Less Mind-Boggling

The key to intuitive toggle buttons is to use a direct color scheme. It makes the active state easier to recognize and cuts the confusion. When visual cues are unclear, users make mistakes. Make toggling less mind-boggling by applying a more intuitive style on your toggle buttons.