Why Toggle Buttons Are Confusing(uxmovement.com)

over 4 years ago from anthony thomas, ux designer

  • Igor StumbergerIgor Stumberger, over 4 years ago

    While I agree with the aspects you write about, I'm not sure making the inactive state lighter (4) is an improvement. At the first glance, I'd think that option is disabled, and thus presented as faded out. Basically, if you'd make the active label bolder, the left option would work better in my opinion.

    2 points
    • Michael RurkaMichael Rurka, over 4 years ago

      the left option would work better in my opinion.

      I disagree. From personal experience, I've interacted with the left option on various sites, having different qualifications for what is "active". iOS uses this style, but for some reason my brain still thinks the white portion is the active mode.

      One big up would be to reduce the amount of accent colour, and use more "neutral" / inactive colours, like black. Inactive (but tappable/clickable) can be blue/accented. Active (not tappable/clickable) is black/neutral. Kind of like the prevailing breadcrumb pattern.

      3 points