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.
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.
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.
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.
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.
...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 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.
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 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 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)
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'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.
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.
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."
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).
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.
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.
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!
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 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.
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.
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?
83 comments
[ 6.6 ms ] story [ 155 ms ] thread"OK, it's displaying a pause icon - is that telling me it's paused, or that I should click it to pause?"
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.
Also your solution becomes more of a list than a toggle. There are already a lot of similar designed selectable lists.
Reminds me of this little change that Apple made and then quickly reverted:
http://appleinsider.com/articles/11/04/29/inside_mac_os_x_10...
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.
I think these look incredible and I can't wait for a usable version.
[Edited for clarity]
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")
Thanks for sharing the UI quote. I hadn't heard it before and I immediately see the, ah, practical application it has to my own work.
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.
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.
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 :)
(are you done laughing?)
In the digitl world? A well thought out and presented slider might actually encourage engagement with a feature, overrelying on abstract radio buttons.
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."
Edited: I distinctly remember being confused about what kind of control they were the first time I saw them.
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).
The article shows: [OFF [ ]]
iOS: [[ ] OFF]
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.
Of course that doesn't work for more than two options, but I have a hard time finding a decent use case for that anyway.
http://twitter.github.com/bootstrap/components.html#navbar
Given that a click is simpler and quicker than a drag, I think this suggestion is a worse user experience than a tab bar.
And who said anything about dragging? I read the whole post and was under the impression that the selection was made via click...
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.
In (continental) Europe, I've never seen it. And I find this type of buttons very confusing.