Show HN: Non-Confusing, Visually Correct Slider Toggle UI

http://www.chrisnorstrom.com/2012/11/invention-multiple-choice-windowed-slider-ui/

by ChrisNorstrom • 14 years ago

441 79 14 years ago

freditup• 14 years ago

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.

Angostura2• 14 years ago

I 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• 14 years ago

Indeed. I've got an enormous monitor; surely they can find another 32x32 pixels for separate play and pause buttons.

troels• 14 years ago

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.

saurabhnanda• 14 years ago

This seems so obvious in hindsight, yet this isn't what everyone comes up with!

countessa• 14 years ago

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.

andrewla• 14 years ago

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.

znaky• 14 years ago

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.

GuiA• 14 years ago

Congrats, you can add a paragraph about related work and an Usability section about arbitrary observed metrics on test groups and submit to CHI :)

gpvos• 14 years ago

I think this is more elegant than a radio button.

simgidacav2• 14 years ago

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.

mikeknoop• 14 years ago

Lockitron also showcases the slider issue in their product video: https://www.youtube.com/watch?feature=player_embedded&v=...

taligent• 14 years ago

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

pooriaazimi• 14 years ago

I really liked that design. I was really pissed when they changed it to something (IMO) inferior later on... :(

ieatfood• 14 years ago

Wholeheartly agree. I made a mockup of just this issue a few weeks ago: http://dribbble.com/shots/747199-Night-Day-Slider-Switch

nnq2• 14 years 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

jvdh2• 14 years ago

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.

seagreen2• 14 years ago

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.

[Edited for clarity]

alttag• 14 years ago

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.

vlasta2• 14 years ago

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.

derekp7• 14 years ago

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.

indiecore• 14 years ago

"fancy radio buttons" doesn't slide off the tongue quite as well though.

chmike• 14 years ago

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.

papalalu2• 14 years ago

give me a touch screen and i will prefer the slider

SCdF• 14 years ago

And your mobile browser could (if it agreed with you of course) actually render that checkbox as a slider. Semantics!

kelnos• 14 years ago

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

_pferreir_• 14 years ago

Oh sh*t. It all makes sense now.

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?)

notJim• 14 years ago

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.

genwin2• 14 years ago

Don't car radios still have station preset buttons, e.g. labelled 1 through 5, with one (and only one) being lit when you press it?

panacea• 14 years ago

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.

lifeformed• 14 years ago

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.

stinky613• 14 years ago

Perhaps (as pure speculation) it's cognitively less taxing for average users to interact with an element that reminds them of a physical switch.

bonzoesc2• 14 years ago

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

TazeTSchnitzel• 14 years ago

The iOS slider is so good, that one site I use literally just screenshotted its on and off positions... and used them as a checkbox.

ams61102• 14 years ago

I still find them confusing.

huhtenberg2• 14 years ago

A simpler option for a binary choice is this -

      +-------+---+
   On |       | X | Off
      +-------+---+

jvdh2• 14 years ago

Scroll down to the end of the article, or search for "Another Alternative".

huhtenberg2• 14 years ago

It's a long article, so it should've started with the simpler options, shouldn't it? :)

radley• 14 years ago

It's certainly confusing as is, but a good designer will use other design cues like color and depth to reinforce the state.

cheeaun• 14 years ago

The sliders on the article seems inverted from iOS's sliders.

The article shows: [OFF [ ]]

iOS: [[ ] OFF]

ekurutepe• 14 years ago

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.

papalalu2• 14 years ago

something which you need to learn, and does not necessarily work with your design

Angostura2• 14 years ago

Still room for confusion.

duncanwilcox• 14 years ago

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.

joelthelion• 14 years ago

Someone needs to send that link to the Gnome 3 devs :)

nathan_f77• 14 years ago

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!

kalms• 14 years ago

Not 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• 14 years ago

8% of men are red green blind.

wangweij• 14 years ago

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.

btipling• 14 years ago

His "solution" is just a tab/nav bar with different styling:

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• 14 years ago

They 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• 14 years ago

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.

denzil_correa• 14 years ago

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.

Zak• 14 years ago

I 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

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• 14 years ago

Except this design does not exist everywhere ...

In (continental) Europe, I've never seen it. And I find this type of buttons very confusing.

Mindless2112• 14 years ago

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?

i_like_robots• 14 years ago

Much better, it's obvious in hindsight. Now if you could work some magic on those horrible range inputs…

joeyh• 14 years ago

Congrats. You've invented the cursor.

kmfrk• 14 years ago

Will this work in terms of accessibility?

tyre• 14 years ago

It certainly was non-confusing to try and slide pictures of sliders.

endianswap• 14 years ago

I just figured (until the end of the article) that it just didn't work on Android.

mistercow2• 14 years 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.

ams61102• 14 years ago

To 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• 14 years ago

http://jsfiddle.net/LWFg3/6/ here you go. I call it ouija. Will probably bundle it as a component shortly.

taitems• 14 years ago

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:

http://taitems.github.com/UX-Lab/ToggleSwitch/index.html

sturmeh• 14 years ago

Take 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

Show HN: Non-Confusing, Visually Correct Slider Toggle UI

Related Stories