Bootstrap-switch
github.com
github.com
In 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.