Hacker News new | comments | show | ask | jobs | submit login
Bootstrap-switch (github.com)
54 points by nostalgiaz 1525 days ago | hide | past | web | 17 comments | favorite

I never know whether these switches are on or off. Is it on when it says "on" or does it mean that if I want it to be on I should use this switch?

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.

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.

There was a post on HN with a fix for that problem, I can't find it right now but maybe someone could.


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.

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.

They are not a terrible choice. On the contrary! They are used everywhere in iOS! Would Apple do that if it was not intuitive and perfect?

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.

Sorry, I made a sarcastic comment without closing the tab before posting. Not HN etiquette.

I knew you were being sarcastic. I was just adding my agreeing comment :)

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.

A checkbox is a better option than two radio buttons.

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

Looks nice, but two simple things that I noticed:

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

With noscript (ff extension) it didn't even gracefully fall back to a non JS based switch (checkbox).

Why aren't the animations smooth? Is that because there's no subpixel rendering of DOM elements? Is there any solutions for that?

Edit: Found out that transform-property should be used for smooth animations.

The previous discussion about these: http://news.ycombinator.com/item?id=4594264

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | DMCA | Apply to YC | Contact