Yes, I find them confusing as well. It's because the 2 options are mutually exclusive. So you have to decide to either display the current state (On or Off), or display the possible action (switching to On or Off).
It always takes me a few seconds to figure it out. In the end, I believe displaying two radio buttons is the best option here.
This is a case where Apple got it wrong and everyone copied Apple anyway because Apple. Seriously though, I'm not sure Apple invented these switches but they sure helped popularize them. And yes, I do think they are terrible.
I would point out that in Apple's iOS case, the sliders are always consistent in two ways:
- The slider always displays the current value. So the UI reads quite naturally: "Airplane Mode is OFF".
- The "Off" value is always without color (gray, matching the background of the UI), and the "On" value is shown with a vivid color, indicating it's active.
I never found them to be confusing in iOS myself. But consistency is very important so that you don't break the user's trust.
These things equate to literal switches by design. Has anyone used them to indicate the action to be done when pressed? If so they are clearly confusing buttons with switches. Assuming a switch would steer your right 99% of the time - the other 1% of the time you probably should just close that site's tab and never visit it again.
You cannot control that - but then again I can create a button that is just as confusing.
This has been posted before. I implemented such an on/off switch in an app but the client didn't know which was which so I replaced it with a simple checkbox.
I made something very similar (without the animations) and a blue background for ON/red background for off is pretty readable (I still have to check for color blindness but I think red/blue is not a problem).
- The animation is a bit slower than I would expect.
- If you're dragging the button from left to right with your mouse it sticks to a side when it touches it. This prevents me from playing with it while thinking about my choice.
18 comments
[ 2.9 ms ] story [ 55.0 ms ] threadIn this case it's even more confusing because the "on" color is red, which often indicates off.
That being said, the switches are pretty.
It always takes me a few seconds to figure it out. In the end, I believe displaying two radio buttons is the best option here.
I think that's the post you are referring to. He sums up nicely why this standard style of 'on / off' slider is a terrible UI choice.
- The slider always displays the current value. So the UI reads quite naturally: "Airplane Mode is OFF".
- The "Off" value is always without color (gray, matching the background of the UI), and the "On" value is shown with a vivid color, indicating it's active.
I never found them to be confusing in iOS myself. But consistency is very important so that you don't break the user's trust.
You cannot control that - but then again I can create a button that is just as confusing.
- The animation is a bit slower than I would expect.
- If you're dragging the button from left to right with your mouse it sticks to a side when it touches it. This prevents me from playing with it while thinking about my choice.
Edit: Found out that transform-property should be used for smooth animations.