Turn your checkboxes into iPhone-style binary switches

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

by r11t • 16 years ago

61 42 16 years ago

tdreyno.github.com

eru• 16 years ago

It's fun to switch a switch.

aresant2• 16 years ago

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

alttab• 16 years ago

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.

wmblaettler2• 16 years ago

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

mortenjorck• 16 years ago

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.

wmblaettler2• 16 years ago

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

aresant2• 16 years ago

Good point!

callahad• 16 years ago

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.

nakajima• 16 years ago

Ironically, it doesn't work on an iPhone.

Nwallins• 16 years ago

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.

Tichy• 16 years ago

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

m_eiman2• 16 years ago

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"?

panic• 16 years ago

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.

m_eiman2• 16 years ago

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.

faramarz• 16 years ago

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.

ajross• 16 years ago

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.

there• 16 years ago

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.

lanstein• 16 years ago

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.

pierrefar• 16 years ago

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

ivankirigin5• 16 years ago

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

daleharvey3• 16 years ago

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

mey• 16 years ago

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.

ivankirigin5• 16 years ago

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?

irrelative• 16 years ago

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.

daleharvey3• 16 years ago

I used this for

http://pastebin.me/

slightly confusing, but a checkbox didnt quite work either

frozendevil• 16 years ago

It's confusing because your labels are backwards.

staunch2• 16 years ago

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

jcromartie2• 16 years ago

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.

chunkyslink• 16 years ago

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)

ronnier• 16 years ago

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.

truebosko• 16 years ago

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

gcb• 16 years ago

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.

jcromartie2• 16 years ago

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.

aw3c2• 16 years ago

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

Raphael• 16 years ago

Would be cooler if it used CSS transitions.

jorsh• 16 years ago

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

barmstrong• 16 years ago

Nice work!

Turn your checkboxes into iPhone-style binary switches

Related Stories