Buttons

Why Toggle Buttons Are Confusing

Not all buttons perform actions. Sometimes they’re used to change states on an app. These are known as toggle buttons. They save space by presenting two or more options in a single control. States change instantly at the press of a button. But problems arise if you don’t design them correctly.

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 clear. 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. This style is typical on toggle buttons, but not optimal. It isn’t clear to users that the darker button signifies the active state. Many of them mistake the lighter button for the selected option because it also has an “on” appearance.

toggle_buttons-color_schemes

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 active variant as the selected option. Without a baseline for comparison, users aren’t sure what the visual cue is.

Instead of using an inverted color scheme, use a direct color scheme that displays the toggle buttons with dark text on a light background. The difference is that you can now add more visual cues to the selected option. Use a color, light shading, bold text label, and a darker border to indicate a highlight. For the unselected option, use a neutral color, 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 carries more visual 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.


Subscribe to Newsletter

Books

DV-tout

Toolkits

WP-tout
FP-tout
PP-tout

Affiliates

elegant-themes

Article written by anthony

Author and founder of UX Movement. Creating a better digital world for mankind by teaching and evangelizing best practices, standards, and techniques in user experience design.

This Post Has 8 Comments

  1. Nick Seigal Reply

    The Android toggle buttons are more intuitive. They use a green or red background for the on or off state when the other state is selected. Of course, if we were not so tied to a flat style with no pseudo 3D, we could use the raised state of the button to suggest the button is a slider, not a toggle. Even better, we could label to the right and left and show an arrow in the background of the other state, pointing away from the on state. These are clearer visual cues. I am sure all this has been A/B tested also.

  2. Guillaume Reply

    Glad to read this article, it’s the best and simpler button I seen yet !

  3. Stephen Reply

    With your concept recommendation, how would you display a disabled option, or the entire control disabled?
    My assumption (until proven in testing) is that users would not attempt to click the first option because it currently looks disabled and they are used to exactly that look for disabled controls elsewhere. With a toggle like this, the currently selected option can’t be selected a second time – essentially making the button act like a disabled button. So this would lead me to expect that ‘For Sale’ was clickable.
    Another factor here is accessibility and contrast.

  4. Simon Skilling Reply

    Great summary. I also find that where it’s being used is a factor too. On a traditional form, with a submit/next button – fine. On a webpage, where content is shown/hidden based on the toggle (like a pricing table) – fine. But on a settings screen, that auto-saves options (no submit/save button) but gives no feedback that your change has been noted – ARGH!

  5. David Hackett Reply

    A concise summary on when/how to design great toggle switches. One important component I would add to your list of necessary components is text with clear and direct use of language. Actionable verbs and clear nouns.

  6. Hing Reply

    Good article! Would you also like to share some of the research, statistics and findings on the testing you did to reach this conclusion? I think it will be very useful complement to the article and it’ll help us understand the background better.

  7. Parthan Reply

    the recommendation doesn’t pass WCAG 2.1 contrast for state changes

  8. Paul Wujek Reply

    Use a radio button instead, its state is not likely to be ambiguous.

Leave a Reply

Your email address will not be published. Required fields are marked *