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 present two or more options in a single control and allow users to change states instantly. Problems identifying the active state can 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.


Book

Affiliate

elegant wordpress themes

This Post Has 15 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.

    • Andrew Croce Reply

      I’d like to second this request. Your conclusions seem logical, but I’m curious if there’s any usability testing you can reference to back up these suggestions.

  7. Parthan Reply

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

    • Lawrence Reply

      You can meet 2.1 by making the active border 3:1 against the inactive grey border and also havign the active text bolder than the inactive text.

  8. Paul Wujek Reply

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

  9. Neeraj Tiwari Reply

    I want to show 2 options to user related to sorting –
    Oldest to newest
    Newest to oldest

    I dont want to use radio buttons because it will need more space (2 rows). Neither do I want to use combo-box because it will need more clicks to change the state. Instead, thinking of using a toggle button just showing the current state and when clicked changes state. Is there a better intuitive way of representing this? Please suggest.

    • anthony Reply

      I would not use the labels “oldest to newest” and “newest to oldest” as they are too long. Use “newest first” and “oldest first” instead.

      You can use a single toggle button for both states, but you’ll need an icon to indicate the change of state.

      My suggestion is something like this:
      ( ↑ Newest first ) — user clicks, button toggles to — ( ↓ Oldest first )

      • Neeraj Tiwari Reply

        Hi Anthony, This is perfect, like your suggestion of using an icon and a shorter text making it more apparent. Thank you.

  10. sayed babu Reply

    I love it And very useful for button toggling.

  11. Mark Smith Reply

    Your direct color scheme is too subtle- I seen buttons like that and cant tell their state. Sliding toggle buttons are aping on the ancient websites where they didnt have any choice just stop using them especially since physicsl toggle are total unlike them physically imposdible so unintutuve just use a button- toggles should only be for opposites For Sale? and the button says No( cross) or Yes(tick). The comparison button could have had 4 visual points such as greying out rhe other choice, changing the button’s border and making the choice’s text bold. It is only lazy programming being highlighted not the visual scheme.

Leave a Reply to Lawrence Cancel reply

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