Turn your checkboxes into iPhone-style binary switches | Hacker News Reader

Turn your checkboxes into iPhone-style binary switches

tdreyno.github.com

61 pointsr11t42 comments

Am I the only one who has to think twice every time I see one of those controls; "does the text mean that it's currently off, or does it mean that sliding it over there will turn it off"?

This makes sense if there is a button labeled "off", but in this case the middle of the slider is unlabeled. The part you interact with (at least if the slider were a physical object) is different from the part that displays the state, which sidesteps this ambiguity in a pretty clever way.

What I see is a button with a grayed out text next to it that says "Off" (or even worse, just "O"). Maybe I'm just damaged from having tried to understand more or less broken GUIs the last twenty years and overthink it :P

Another thing that annoys me with them is that the buttony part doesn't really stand out as a button, I think part of my problem is that I actually interpret the button as the background - and then what I see is an empty space with a button labeled "Off" next to it.

Really? If anything, over the years the use of computers and standard UI's have trained us you to associate light-shades to OFF/inactive and bright-contrast or colour with active/ON.

Not as much as they've trained us to associate check boxes with a mark in them with "enabled/on/yes" and empty boxes with "disabled/off/no".

I agree with the grandparent post. This feature trades usability for eye candy. Bad idea.

but in this case you don't see the bright color and "on" part until you slide it, and having to do that just to figure it out is not very intuitive.

Nope, and the worst one I remember offhand is the mute button on the Treo. Nothing worse than making a comment, looking at the phone, and not being able to tell if you were muted or not.

It's not accessible. In my tests, I attached a label to the checkbox. Clicking the label text doesn't trigger a switch.

Tests show standard UI inputs are understood the best. Just use the checkbox for your website.

I think most people would appreciate a reference the tests mentioned (I would at least)

I have no idea what parent's reference test are, but posit that things that are familiar are easier to use.

Now considering how widespread the iPhone/iPod are in use, I doubt many people would have trouble putting 2 and 2 together.

The iphone isn't nearly as common as, say, any of the top 3 browsers.

I think thats what the parent was suggesting, but the same logic gets you nothing new, ever.

The parent said: - well known things are good - the iphone is well known

Relative to other technologies, it is not.

Also, changing the platform might require interface changes that are clearer and easier on that platform. I'm not saying iphone checkboxes are bad. I love them. But they stink when they aren't on the iphone. They even stink when they are on the iphone but in a web app.

The issue here is whether something from a new platform should be used on an old platform. No, if the tools aren't standard.

Note that new browsers and browser versions render checkboxes differently, which yields incremental changes over time.

Yeah, I don't have one handy. I've heard this about a dozen times though. It is a commonly accepted best practice at places I have worked.

But on a meta level, doesn't this feature strike you as a bit cargo-cult?

You're blindly following advice you've "heard", while calling this cargo-cult...

Cargo cult is when you copy what something looks like, without it working like it should. Iphone-looking checkboxes not on an iphone fit that really well.

I apologize for not having a link to the words that have come out of the mouth of every designer I've worked with.

Additionally, the iPhone checkboxes were created because clicking checkboxes is hard to do with the iPhone interface, not because they're better than plain old checkboxes.

Just because Apple does it, doesn't mean it's the best way to do things all the time.

Ironically, it doesn't work on an iPhone.

Score one for Android, then!

However, I find it only works reliably with sliding, not touch-clicking. Which is interesting, given that clicking seems to be sufficient in Firefox.

Bummer - I thought it would be interesting for iPhone web apps.

Actually, don't. I can't tab to them and hit space to select them. They take up more room. They break labels. They are ambiguous.

And it does not seem to work if Javascript is disabled.

If you are interested in a jQuery style plugin see our tutorial we did a few months back which does the same thing

http://labs.engageinteractive.co.uk/itoggle/

(Should work on your iphone too)

I actually have your site open in a tab now (since last night), kind of funny that I noticed this post on HN and then your comment. I actually prefer your method over the others I found for one reason, it's only clickable, not dragable.

Incase some don't know, jQTouch.com has this functionality, and many other native-looking iPhone effects.

I realize the purpose of this one is for non-mobile web browsers, but just putting it out there. ;)

Very cool, but absolutely don't use for a functional web-app unless you want to confuse your users.

Unless behind the scenes it does an ajax call to the server to update the value.

I think that web apps that behave like embedded runtime applications are going to be more prevalent as time goes on.

Very good point, ajax is a must and most likely what aresant was referring to as the confusing part for users.

You allude to an important point of distinction between the Cocoa Touch binary switch and the traditional form checkbox: The former is presumed instantaneously effective, while the latter may or may not require a form submission.

Unless it is the mobile (read: iphone-targeted) version of said web app where you want to emulate the iphone user experience

Good point!

But then again, you'll never be able to perfectly replicate native iPhone UI in a browser. It's best to avoid creating that expectation with your users.

I used this for

http://pastebin.me/

slightly confusing, but a checkbox didnt quite work either

It's confusing because your labels are backwards.

Not that it's necessarily a good idea, but this is usually handled by having two tabs.

That's really confusing. A control that says what will happen when you click on it is a button. What you have there is a button that is trying to look like a switch.

Would be cooler if it used CSS transitions.

Nice work!

The only usability advantage over a regular checkbox would be if you could copy and paste the ON or OFF state. but this solution you end up with "option ONOFF" on the clip board.

here is my solution, done when he first announced this gadget.

http://github.com/gcb/iphone-style-checkboxes

feel free to fork it and implement his new spify animation.

I was kind of surprised that something so trivial required JQuery or Prototype. Really now?

It's fun to switch a switch.

Reply on news.ycombinator.com