8 ms·
Turn your checkboxes into iPhone-style binary switches
- eru 17y agoIt's fun to switch a switch.
- aresant 17y agoVery cool, but absolutely don't use for a functional web-app unless you want to confuse your users.
- alttab 17y agoUnless 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.
- wmblaettler 17y agoVery good point, ajax is a must and most likely what aresant was referring to as the confusing part for users.
- mortenjorck 17y agoYou 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.
- wmblaettler 17y agoUnless it is the mobile (read: iphone-targeted) version of said web app where you want to emulate the iphone user experience
- nakajima 17y agoIronically, it doesn't work on an iPhone.
- m_eiman 17y agoAm 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 17y agoThis 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_eiman 17y agoWhat 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 17y agoReally? 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 17y agoNot 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 17y agobut 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.
- pierrefar 17y agoIt's not accessible. In my tests, I attached a label to the checkbox. Clicking the label text doesn't trigger a switch.
- ivankirigin 17y agoTests show standard UI inputs are understood the best. Just use the checkbox for your website.
- daleharvey 17y agoI think most people would appreciate a reference the tests mentioned (I would at least)
- mey 17y agoI 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 17y agoThe iphone isn't nearly as common as, say, any of the top 3 browsers.
- daleharvey 17y agoI think thats what the parent was suggesting, but the same logic gets you nothing new, ever.
- ivankirigin 17y agoThe 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.
- daleharvey 17y agoI used this for http://pastebin.me/ http://pastebin.me/ slightly confusing, but a checkbox didnt quite work either
- frozendevil 17y agoIt's confusing because your labels are backwards.
- staunch 17y agoNot that it's necessarily a good idea, but this is usually handled by having two tabs.
- jcromartie 17y agoThat'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 17y agoIf 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/ http://labs.engageinteractive.co.uk/itoggle/ (Should work on your iphone too)
- ronnier 17y agoI 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 17y agoIncase 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 17y agoThe 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 http://github.com/gcb/iphone-style-checkboxes feel free to fork it and implement his new spify animation.
- jcromartie 17y agoActually, 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 17y agoAnd it does not seem to work if Javascript is disabled.
- Raphael 17y agoWould be cooler if it used CSS transitions.
- jorsh 17y agoI was kind of surprised that something so trivial required JQuery or Prototype. Really now?
- barmstrong 17y agoNice work!