
Show HN: Non-Confusing, Visually Correct Slider Toggle UI - ChrisNorstrom
http://www.chrisnorstrom.com/2012/11/invention-multiple-choice-windowed-slider-ui/
======
nnq
...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

~~~
kelnos
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_
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?)

~~~
riklomas
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!

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

~~~
Angostura
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
Indeed. I've got an enormous monitor; surely they can find another 32x32
pixels for separate play and pause buttons.

~~~
IgorPartola
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.

~~~
anonymous
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.

------
ams6110
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

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

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

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

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

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

------
mikeknoop
Lockitron also showcases the slider issue in their product video:
[https://www.youtube.com/watch?feature=player_embedded&v=...](https://www.youtube.com/watch?feature=player_embedded&v=D1L3o88GKew#t=7s)

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

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

~~~
Mindless2112
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?

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

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

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

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

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

------
sturmeh
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>

------
huhtenberg
A simpler option for a binary choice is this -

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

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

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

~~~
vidarh
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).

------
taitems
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>

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

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

------
kalms
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
8% of men are red green blind.

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

------
nathan_f77
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!

------
gpvos
I think this is _more_ elegant than a radio button.

~~~
simgidacav
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.

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

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

------
kmfrk
Will this work in terms of accessibility?

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

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

The article shows: [OFF [ ]]

iOS: [[ ] OFF]

~~~
ekurutepe
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.

~~~
Angostura
Still room for confusion.

------
joeyh
Congrats. You've invented the cursor.

------
taligent
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...](http://appleinsider.com/articles/11/04/29/inside_mac_os_x_10_7_lion_developer_preview_3_dials_down_animated_tabs)

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

