0

We are implementing a toggle to switch between two different ways of showing data in a table. I created a mockup for the toggle but shortly afterward realized that people are very divided in how they interpret toggle buttons. There seem to be two camps:

  1. Toggle as depressed button. The darker side in this case indicates the current selection as it replicates the model of a pushed button or side of a switch. For example: this one this one
    (source: designmap.com)

  2. Toggle as a slider. The lighter side in this case indicates the current selection as it replicates the model of a slider being moved to one side to indicate preference. For example, this one

Obviously, these two methods contradict one another. Currently we are using method 1 but before we get any further along in development I wanted to confirm with a larger audience, which of these do you think is a more universal way of understanding/interpreting a toggle button's state? Or is this just a nebulous issue and it might be better to avoid toggles for this altogether?

marked as duplicate by Alvaro, Mayo, locationunknown, Devin, SteveD Mar 24 '17 at 11:23

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

3

According to this answer:

Checkbox vs toggle

Toggle switches are anti-usability

Despite their relative popularity (eg, Apple use them as a standard interface control) toggle switches have an inherent state-action ambiguity; that is, it is unclear whether the label ('on' for example) is the current state, or the action.

Another issue with these switches is that the layman can easily conclude that in order to change the state one should drag the handle (like in the real world) rather than click anywhere on the whole control.

But, it is a very common interface element and in the case that you would like to use it, my opinion is that both ways of representing toggle button seem fine. I have a problem understanding the first image of the method 1 because for me it is ambiguous what is selected and what is not.

As a user, I would say that the second option is better because it is more clear the state of the button than the first. It is easier to understand also that it is an exclusive option.

  • 2
    Trying to work out whether "on" means "I am on, click me to turn me off" or "Click me to turn me on" can be a nightmare. Especially confusing if they mix a declarative button ("I am on") with other UI elements that are actions ("Edit settings" or a pencil symbol). The examples with the light-blue highlight work reasonably well to indicate they are declarations, not invitations to action, but I'd still prefer a check-box. – TripeHound Mar 23 '17 at 16:01
  • Definitely, a checkbox is a good option. I honestly believe that users are quite used to toggle switches, but there are better ways to do that. My answer covers the case that you want to use toggle switches vs buttons – Dimitra Miha Mar 23 '17 at 16:04

Not the answer you're looking for? Browse other questions tagged or ask your own question.