...now seriously, what's wrong with good ol' radio buttons and check-boxes? they seem 100x more intuitive and with some effort (yeah, more than it should...) you can make stylish versions of them that will match you design
I don't think the author was saying this should be a replacement for radio buttons. It's more of an informative exercise in visual design, analyzing the problems of one style and how it could be improved.
The entertaining bit (similar to the standard floppy-disk "Save" icon), is that most people who have grown up with the web always present... have never seen a radio with true "radio buttons".
I'm kind of ashamed to write this, but I had never realized what "radio button" actually means.
I grew up knowing what they were (I was born in the 80s), but English not being my primary language, I never considered that "radio button" might mean "the kind of button you have in a radio". And I never felt the need to look for a definition :)
To be fair, English is my primary language and I've been doing web development for 10 years and I didn't know why they were called radio buttons until very recently!
I also grew up knowing what they were, and even as a native English speaker, I didn't make the connection to old car radios until I was an adult. I always figured it had something to do with "radius", since they have always (inexplicably, come to think of it) been presented as little circles.
I really think this idea that people haven't seen old technology is somewhat over-sold. I mean, I know about the Beatles, and I wasn't alive in the sixties, I know a good bit about classical antiquity which was thousands of years before my birth, I'm aware of room-sized computers from the '50s, and mechanical computers before that, and yes, I've played with old radios that have radio buttons in my dad's old cars, at thrift stores, and in my dad's 8-track player.
I find it quite funny. The author started by demonstrating that sliders are inappropriate when representing 1-of-N choices. I agree. Then he proposed a visual change that makes things better. This change makes the GUI element look like and work like radio buttons. The only step remaining is to stop calling this GUI element sliders and start calling it (fancy) radio buttons.
I see a significant difference between radio buttons and the proposed solution. The change of state with radio buttons require a simple pointing and click. While with the sliding frame, a pointing and a constrained sliding operation is required.
When using a mouse the radio button is the most simple and efficient widget. But when using touch screens, the sliding frame seems a better solution because it avoids accidental state change, while still being a natural and intuitive operation to do with the finger.
So I would say that for touch screen devices (especially phones) the proposed solution is excellent and better than radio buttons.
That's totally a good point. Following this idea, in touchscreen devices there should be only one widget for both radio-button and checkboxes (which can be represented as boolean sliders)
I think the big difference between a slider and radio buttons is how much screen space is taken up. For radio buttons, you have the text description ("ON", "OFF") along with an indicator / selector to the side. Whereas the slider combines these two elements. This is more important on smaller screens, where the text / selection area would have to be enlarged to accommodate finger input.
I thought the same thing. Radiobuttons convey much better that there is a single choice to be made among a list of options. Especially if you have a list of multi-word options, you really really should not be using those radio buttons.
For his example of the different game flavors, it does not make sense at all to have a slider, simply have users click on the option they want to have, and jump to a next page to ask for details and confirm everything. You need to have a confirmation page anyway.
Really? I think your above-average knowledge of the intricacies of web design may actually be misleading you here. My guess is that normal people can't actually tell radiobuttons from checkboxes until they click around and find they can't select two options at once.
I think these look incredible and I can't wait for a usable version.
> normal people can't actually tell a checkbox from a radiobutton until they click around and find they can't select two options at once
this may be true for a certain definition of normal, but the point for this game example is that you don't need EITHER: just have the user click on the desired option and let them be lead to the next/confirmation page... drop dead simple 'cause, as wise men have said before: "no UI" > "less UI" > "your UI" (where ">" = "is better than")
Well, there's no indication the usable click area is limited to the slider. In the games setup, it would make sense that clicking anywhere in the option might trigger the appropriate slider change event.
It adds a single "continue" click from what you seem to propose, but if the rest of the checkout process is streamlined, that may be acceptable.
Every slider implementation I've seen on the web has been inspired by sliders in iOS, where they provide a bigger touch target. iOS sliders also give considerable information about their current state: the word "OFF" is in grey text on white, and "ON" is in white text on a vivid blue background.
I agree that they're not really appropriate on desktop browsers, and I haven't really seen an implementation of them that impresses me or gets it completely "right."
I'm imagining a voting paper made out of cardboard, where you slid a piece into place before stuffing into a ballot box.
In the digitl world? A well thought out and presented slider might actually encourage engagement with a feature, overrelying on abstract radio buttons.
The windowed slider panel is a great idea. I couldn't agree more with the author's assessment of how confusing normal switches as shown can be, as I've felt the same confusion in the past, and know others do too. Interesting post and great ideas.
No, the player should not show play or pause while the video is loading. There are more than two states the player is representing with only two icons. Adding separate buttons would not help that.
Yes, it should, because I might want the video to play immediately after it buffers, or I might want it to just buffer and press play in a few minutes.
Having a play and a pause button which to push to indicate the current state of the video while it buffers is very useful.
Also, to the parent, a button should display its action, so a "play" button will play and a "pause" button will pause. Except when the interface is designed by a web designer.
>However, there are a few times when a slider is warranted and even a Better UI choice:
>
>To switch back and forth between two states that both need to be described, such as a slider in your blog’s control panel with “Published | Unpublished” as the choices for the article draft you’re working on.
But we already have a UI element for that. In HTML, it's known as a "select" input, and it works very well, is extremely compact, and is already familiar to your users.
In fact, if you set the "size" attribute, then it even has the "window" functionality described in this article. The window typically is shown with no border, and it doesn't look as fancy, but other than that, it is exactly the same concept.
I was under the impression that part of the beauty of the design is that a click from my desktop would be supported as well as a touch and drag on my tablet. The UI intuitively supports both mediums.
You have to think of the constraints that informed the original design. There's very little horizontal space on iPhone and iPod touch, 320 points to fit a descriptive label and the control.
So labels on the sides don't work because of space constraints, on iPhone anyway.
The windowed version is also less space efficient than the stock iOS control but I think it has merit because it shows all possible states. What I'd change is reverse the tinting, to make the active state more visible and the other states shaded.
It is nice, but to my mind, a slider is different to a switch. The classic "on-off" switch that the author takes on is like a light switch - to that end, it does its job pretty well, I think, telling you what state it is in.
I don't know about you, but I rarely look at the labels on a light switch. When I find light switches that go side-to-side, I usually have to rely on my knowledge of the current state of the light rather than the position of the switch. Either way, you have to agree that the confusion the article speaks of is a reasonable one, and making interfaces that are resilient to be confusing is the job of the UI designer.
The OP's controls are slightly more obvious visibly, but don't look as much like common physical switches and are more visually cluttered. The color-changing version doesn't resemble anything I've seen in the real world, though I'm sure it's possible to do.
Even the physical object is ambiguous -- do I slide it to the side with the label that represents the state I want, or does the label represent the state?
Totally agree. I find it so difficult to tell my parents to switch an iPad slider to ON or OFF, so I simply tell them to make the capsule blue or gray.
I think the way Apple is doing this is much more elegant. The on state is visualized by a contrast background color and the off state is just a gray background. Much more simple and much more visible. This proposed solution with a slightly lighter color as indicator of selection is not very good, sorry.
Also your solution becomes more of a list than a toggle. There are already a lot of similar designed selectable lists.
Part of the point is that this solution is known to pretty much everyone already, yet it's usually rejected for the reason people choose the unintuitive alternatives up top: It takes up more space for the same font and slider sizes.
I tend to prefer that solution too (or if you're really cramped for space, the old AmigaOS "MX gadget" which shows only the selected state, plus a small icon to indicate it will cycle between states).
If you're interested in adding the left/right style example and you're already using jQuery UI, you can use the ones I built here that inherit your slider styles:
I like. The vertical variant looks very similar to a <select> element with the size attribute set. Maybe you could take some clues wrt styling from these elements? Not sure how that would look in a horizontal version though.
Sweet! This is quite nice. Good job. The best part about the solution is the consistency for different type of options like simple on/off options to ones which require long descriptions.
I just gave up on the idea of using a regular slider to toggle between 'Any' & 'All', because I didn't want the selected text to be hidden. This solution would be perfect!
I agree, but elegance cannot replace functionality. Apart from the touchscreen perspective (https://news.ycombinator.com/item?id=4743643) I would use only plain old radio buttons.
Somehow the blog post does not even mention the iOS sliders, let alone compare the solution Apple figured out for this problem: colors. Grey is OFF, blue is ON.
