7 ms·
Show HN: Non-Confusing, Visually Correct Slider Toggle UI
- freditup 14y agoThe 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.
- Angostura 14y agoI find similar confusion when confronted by Play/Pause buttons on video controls, before the video has loaded and started playing. "OK, it's displaying a pause icon - is that telling me it's paused, or that I should click it to pause?"
- nitrogen 14y agoIndeed. I've got an enormous monitor; surely they can find another 32x32 pixels for separate play and pause buttons.
- IgorPartola 14y agoNo, 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.
- anonymous 14y agoYes, 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.
- troels 14y agoI 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.
- saurabhnanda 14y agoThis seems so obvious in hindsight, yet this isn't what everyone comes up with!
- countessa 14y agoIt 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.
- andrewla 14y agoI 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.
- znaky 14y agoI 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.
- GuiA 14y agoCongrats, you can add a paragraph about related work and an Usability section about arbitrary observed metrics on test groups and submit to CHI :)
- gpvos 14y agoI think this is more elegant than a radio button.
- simgidacav 14y agoI agree, but elegance cannot replace functionality. Apart from the touchscreen perspective (https://news.ycombinator.com/item?id=4743643 https://news.ycombinator.com/item?id=4743643) I would use only plain old radio buttons.
- mikeknoop 14y agoLockitron also showcases the slider issue in their product video: https://www.youtube.com/watch?feature=player_embedded&v=D1L3o88GKew#t=7s https://www.youtube.com/watch?feature=player_embedded&v=...
- taligent 14y agoWow. After all these decades and countless people we would have seen something like this before. 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_7_lion_developer_preview_3_dials_down_animated_tabs http://appleinsider.com/articles/11/04/29/inside_mac_os_x_10...
- pooriaazimi 14y agoI really liked that design. I was really pissed when they changed it to something (IMO) inferior later on... :(
- ieatfood 14y agoWholeheartly agree. I made a mockup of just this issue a few weeks ago: http://dribbble.com/shots/747199-Night-Day-Slider-Switch http://dribbble.com/shots/747199-Night-Day-Slider-Switch
- nnq 14y ago...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
- jvdh 14y agoI 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.
- seagreen 14y agoReally? 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. [Edited for clarity]
- nnq 14y ago> 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")
- seagreen 14y agoHmmm, I think you and jvdh are right. Simple selection is better than a slider in that case. In general though, I still don't like radiobuttons:) 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.
- huhtenberg 14y agoA simpler option for a binary choice is this - +-------+---+ On | | X | Off +-------+---+
- jvdh 14y agoScroll down to the end of the article, or search for "Another Alternative".
- huhtenberg 14y agoIt's a long article, so it should've started with the simpler options, shouldn't it? :)
- alpb 14y agoNot necessarily, it is better to draw some attention at the beginning so that it motivates reader to keep reading.
- vidarh 14y agoPart 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).
- radley 14y agoIt's certainly confusing as is, but a good designer will use other design cues like color and depth to reinforce the state.
- cheeaun 14y agoThe sliders on the article seems inverted from iOS's sliders. The article shows: [OFF [ ]] iOS: [[ ] OFF]
- ekurutepe 14y agoSomehow 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.
- bobdole2 14y agoDo I have permission to use this concept in an iOS app?
- duncanwilcox 14y agoYou 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.
- joelthelion 14y agoSomeone needs to send that link to the Gnome 3 devs :)
- deleted 14y ago[deleted]
- nathan_f77 14y agoI 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!
- kalms 14y agoNot a bad solution, but I'd still prefer a red or green state (In my experience, color trumps shape). 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.
- Gravityloss 14y ago8% of men are red green blind.
- wangweij 14y agoTotally 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.
- btipling 14y agoHis "solution" is just a tab/nav bar with different styling: http://twitter.github.com/bootstrap/components.html#navbar 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.
- guynamedloren 14y agoThey are slightly similar in design, but solving two completely different problems with different core functionality. And who said anything about dragging? I read the whole post and was under the impression that the selection was made via click...
- sangaya 14y agoI 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.
- denzil_correa 14y agoSweet! 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.
- Zak 14y agoI don't find the two-position slider switch confusing at all; it looks and behaves like a physical object - one of these: http://cdnsupport.gateway.com/s/POWER/SHARED/q0012508.jpg http://cdnsupport.gateway.com/s/POWER/SHARED/q0012508.jpg 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.
- Gmo 14y agoExcept this design does not exist everywhere ... In (continental) Europe, I've never seen it. And I find this type of buttons very confusing.
- Mindless2112 14y agoEven 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?
- deleted 14y ago[deleted]
- i_like_robots 14y agoMuch better, it's obvious in hindsight. Now if you could work some magic on those horrible range inputs…
- joeyh 14y agoCongrats. You've invented the cursor.
- kmfrk 14y agoWill this work in terms of accessibility?
- tyre 14y agoIt certainly was non-confusing to try and slide pictures of sliders.
- endianswap 14y agoI just figured (until the end of the article) that it just didn't work on Android.
- mistercow 14y ago>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.
- ams6110 14y agoTo me the whole thing that makes it confusing for me is that real slider switches are labeled externally: +-------+ OFF | |XXX| ON +-------+ That's much more clear. You could even put a little red "lamp" next to the on which lights up when ths swtich is on and darkens when it is off. Putting the label under the sliding part of the control is what makes it confusing. EDIT: just noticed that huhtenberg posted the same suggestion
- shaunxcode 14y agohttp://jsfiddle.net/LWFg3/6/ http://jsfiddle.net/LWFg3/6/ here you go. I call it ouija. Will probably bundle it as a component shortly.
- taitems 14y agoIf 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: http://taitems.github.com/UX-Lab/ToggleSwitch/index.html http://taitems.github.com/UX-Lab/ToggleSwitch/index.html
- sturmeh 14y agoTake a quick look at ICS/JB on Android, which has already solved this problem. The current state is written on the sliding bit, clicking anywhere will toggle it, but correctly show the current state. The slider will also glow blue if it is on the ON state, and revert to grey on the OFF position. See here: http://i45.tinypic.com/263jypz.png http://i45.tinypic.com/263jypz.png
- deleted 14y ago[deleted]