8

Just having a debate about what is the good position for an activated toggle.

Also looking for some answers why left? why right?

To me it makes sense to have it on the right when activated as it's closer to the text, but looking for some sane different answers :)

enter image description here

[UPDATE]

To make this clearer for some of you this is the ON State in 2 versions, not a on and off version :)

  • 1
    I don't think it is because the "on" would be closer to the text, If the label were on the left, or above it, I would still think to have "on" be on the right. It think it may just be because that is the common way of representing it in many frameworks/plugins. – DasBeasto Aug 11 '16 at 16:38
  • I'm not sure direction should be the biggest concern here, but in the current format I'd make sure "on" is closer to the state that is being switched on. I'll provide more detail in an answer... – Mattynabib Aug 11 '16 at 17:54
  • 1
    It's an interesting question: You might try removing the tick and just asking 10 people which position represented 'on' and which 'off' – PhillipW Aug 11 '16 at 17:55
  • @PhillipW I don't think that's a good way of doing it. It's not a guessing game, it's if the UI is descriptive enough with all the context in place. Instead of doing that, ask if the on and off UI clearly display which one is which. – Majo0od Aug 11 '16 at 18:38
  • Asking people isn't guessing. You are doing research to collect data. The data will answer the question. – PhillipW Aug 12 '16 at 9:59
8

Avoid ambiguity

The control should clearly tell the user where to click / swipe and what the result will be.

Take these iOS toggles for example:

iOS style toggle controls

In juxtaposition, a user can easily tell which setting is on and which is off. But if you watch users interact with them (especially when all are in the same state or there is only one) you'll notice that they pause to consider how to change the setting.

Apple has consciously chosen style over usability (much like Mac OS' invisible scroll bars). Once you learn it the control is obvious, but the novice has to pause.

Make the choice obvious

If you embed the "value" directly in the control, you give up some style in the name of clarity. This is less sexy than the iOS example, but the user will understand at a glance what's expected.

In the example below, I've reversed the most common position (on on the right) but no one is going to be confused.

I've also used a common "positive" color for on. Your use of red for on breaks with convention in a way that may further confuse the user.

Toggles with embedded check and x icons

*UPDATE* in response to commenters' observations, I took a second look at my quick mock. I think this does a better job of indicating state. Thanks for the critique!

One other purely anecdotal finding of mine: Position the setting label to the left and the control to the right. This allows the user to scan the label before worrying about the control's state.

  • 6
    I find the second picture confusing. I get that the colored circle shows the active state, but the opposite option is also on the smae line right next to it, which makes me think that it is also somehow active. – David Grinberg Aug 11 '16 at 21:28
  • @DavidGrinberg very interesting! You would be the first user to ever consciously make note of that (though lots of undetected thoughts pass through the brain). Do you also struggle when presented with a list of radio options? – plainclothes Aug 11 '16 at 22:50
  • 3
    I'm afraid I also think Apples approach is more intuitive. – PhillipW Aug 12 '16 at 21:10
  • @PhillipW are you an iOS user? – plainclothes Aug 12 '16 at 21:14
  • No. I guess I'm working from the logic of "green = on" which means the actual switch position is irrelevant – PhillipW Aug 13 '16 at 15:18
2

The toggle should be on the right when activated. Almost all ON/OFF toggles work that way and users probably had experience with similar toggles.

I strongly advice though, to use some extra signs which state is OFF or ON. The toggle right position is a weak standard and many people will not be sure which state is ON/OFF. This will create more cognitive load and increase errors.

Use labels i.e. ON/OFF or YES/NO. Use bright red for ON, dimmed gray for OFF.

.enter image description here

You should also consider using more standard controls like a radio buttons or a check box.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1

There is no clearly correct pattern where right or left have been established as being correct. There is quite a bit of confusion around this, and I think it is best to consider them neutral for this purpose.

Backgrounds and Culture:

As one expert notes, a non-trivial percent of the population already struggles with determining left from right:

John R. Clarke, a professor of surgery at Drexel University in Philadelphia, estimates that about 15 percent of the population faces some degree of left/right challenge.

http://www.washingtonpost.com/wp-dyn/content/article/2008/07/18/AR2008071802704.html

Also consider that some cultures read right-to-left. This could introduce a certain level of bias into the user's perception.

UI Recommendations:

I believe it is far more important to include other visual cues to indicate state, than it is to be concerned about left/right positioning.

For example:

  • You could use an 'X' to indicate the opposite of your checkmark
  • You could use colors such as green & red to indicate on & off. Or in your case you could continue to use pink as 'on', and use gray to represent 'off'. In either scenario, make sure to take color-blindness into consideration.
  • You could modify the text color of the corresponding label. Pure black for 'on', and a muted gray for 'off'
1

I don't believe there is a "correct" direction that designates a toggled switch.

With that said, I think the most important consideration is ensuring distinct and obvious indicators for both a toggled state and for an untoggled state without relying solely on direction.

1

There are a lot of different ways to provide a toggle, and some may work better than others depending on your situation.

While there IS some social/cultural difference in the way left and right are perceived and preferred, rather than worrying about the direction of your toggle, I'd worry about the other factors such as what it looks like in the different states, icons, how to better label and identify those states, and how to make it all very clear visually.

I'll refer you to this very similar question I asked a couple of years ago, which has several variations:

Best Practices on toggle switches and defaults in forms?

1

First, having the button on the right (first image) is the accepted options on the most websites and recommendations. Please see Material Design Blog.

enter image description here

Then, here is the logic for me: It makes sense that "Off" has the value 0 / false by default. "On" is true, so has the value 1. On an axis, 0 is on the left, then is the value 1, on the right.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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