
Turn your checkboxes into iPhone-style binary switches - r11t
http://tdreyno.github.com/iphone-style-checkboxes/
======
m_eiman
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"?

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

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

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

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

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

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

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

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

------
nakajima
Ironically, it doesn't work on an iPhone.

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

------
jcromartie
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
And it does not seem to work if Javascript is disabled.

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

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

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

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

------
daleharvey
I used this for

<http://pastebin.me/>

slightly confusing, but a checkbox didnt quite work either

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

------
Raphael
Would be cooler if it used CSS transitions.

------
barmstrong
Nice work!

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

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

------
eru
It's fun to switch a switch.

