Toggle Switch position the right way?

Question

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 :)

[UPDATE]

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

Answer 1

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:

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.

*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.

Answer 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.

.

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

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

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.

Answer 4

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'

Answer 5

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?

Answer 6

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

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.