Invention: Multiple-Choice “Windowed Slider” UI

I saw a lovely “Show HN” submission [http://news.ycombinator.com/item?id=4594264] on Hacker News from someone who passionately put together a really nice jquery slider plugin. People mentioned in the comments why sliders are a terrible choice for all the same reasons I found right before I mocked up my windowed version. But the slider plugin was made with such passion that I just had to write this article and share my discoveries. There IS hope. The slider can be fixed. In fact it can be made better and made to handle more than 2 options.

[Translations: Serbo-Croatian by Anja Skrba of WebHostingGeeks.com]

First let’s talk about why normal sliders are a bad choice:

  • Sliders over complicate the simple task of allowing a user to choose “Yes / No”, “True / False” or “On / Off”. Nearly every time I see a slider,  it’s used in places where a checkbox would have been a better, less-confusing UI choice. Checkboxes are easier and more well known, sliders are not.
  • Sliders take up more space than a checkbox, whose on/off states are easier to understand.
  • It’s not clear for desktop users if they should click or drag the slider into position. Do they click the button looking switch itself, or click the description next to it (I’ll elaborate on this momentarily).
  • Slider labels are incorrect because the choice descriptions aren’t static and are covered in the slider track by the slider itself which is just plain wrong. You’re covering up and hiding your user’s options.
  • And lastly, the sliders themselves can be ambiguous and confusing. The active switch itself is opposite the description and the description is right in the switch’s path.

Solution: Just use a checkbox.

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.
  • A slider on your website where members can change the css style from “Dark” themed to “Light” themed.
  • To switch between locked and unlocked states of a screen or app.

However, the slider has a flaw…

 Is the first switch on or off? Is the second switch on or off?

If you’re used to this UI this is a piece of cake (First switch is OFF because it says OFF, the description is describing the current state of the switch) but to many users the answer isn’t so obvious or immediate. Especially when they start interacting with it.

The problem is 2 parted. It begins when the user sees the slider switch:

And gets really bad when the user tries to interact with it:

What do I do?:

  1. If I click the white button it slides to the left and now says “ON”, I guess the switch is on.
  2. If I click the “OFF” text the switch will slide over the “OFF”s place and reveale an “ON” text, I guess it means that the switch is now OFF and I have the option of turning it ON by clicking on the newly revealed “ON” text?
  3. If I grab the switch and slide it to the other side I can see “OFF” on one side side and “ON” on the other side, so which direction do I slide it into? Will sliding it towards “OFF” turn it off? Or will sliding it towards “ON” turn it off? 

When a user ponders, “Does the description describe the ‘current state’ or an ‘action I can take’?” the UI has failed to work and is too complex for such a simple action.

So a few months back I created a slider that I didn’t realize solved these problems, I just posted it a day ago in my article [http://www.chrisnorstrom.com/2012/11/one-day-this-is-how-i-will-sell-my-game/].

Basically, just add a window to the slider and allow the descriptions of options to stay put and NOT move around during sliding.

Voilà, maybe not as visually minimal but it’s much more visually correct.

  • The slider now serves as a highlighter of the selected option.
  • The OFF and ON text does not move around, only the slider itself does.
  • Description and slider position are now visually matched.
  • You know exactly what your choices are because they are never hidden.

And my windowed slider isn’t just limited to 2 choices…

A downside is that all the options have to have the same spacing and centering, unless you code around it and make the slider window change width as you slide over various options like so:

Or if you need more space to write descriptions just go vertical.

It’s limited in how much you can fit when compared to radio buttons but it wins on the merits of emphasizing the range of a user’s options and the limitation of being able to chose only one option.

And of course, the polishing touch, colors:

Or stick with plain white:

Normally, the inside track for the slider should be either lighter or darker than the element that contains the entire slider. Like this:

Or even give the windowed slider a slight dim:

If you play around with the sizes, font, colors, shadows, and gradients enough I’m sure you can make it look a lot better than I did.

Anyway, these Windowed Sliders don’t exist in usable form yet. Some REALLY good normal sliders can found here [http://www.larentis.eu/bootstrap_toggle_buttons/]. I’m going to contact Mattia Larentis, the maker, and see if he’d like to fork them into a windowed version based on my mockups as I’m not skilled enough to code them up myself.

And We Have Some Winners!

Ravi Shanker from Tory Harris Business Solutions LINK have created a version on githib [https://github.com/torryharris/SliderSwitch]
Sara Soueidan
  has coded a real working sample here [http://codepen.io/SaraSoueidan/full/AwmzH]

Critisism:

My archenemy and nemesis, the brilliant & detailed, Jeroen Ransijn, posted a well written criticism of this invention at [http://scriptkiddie-chronicles.tumblr.com/post/35055426064/the-better-ui-choice-is-actually-worse]. I look forward to our future battles.

Other Solutions/Implementations:

by Liam McCabe from PixelsDaily.com

 

Slider without window

 

No more sliding, just a depressed tab.

 

Keep descriptions outside of track, either on left and right, or above the slider itself. By Kuba Holuj.

Further Comments:

At this article’s hacker news page: [http://news.ycombinator.com/item?id=4742535]

License and Usage?

In the rare event that I’m actually the first person to come up with this, which I highly doubt because it’s nothing complicated or brilliant. I’ll release this under the Creative Commons Attribution license. Do what you want, use it for whatever you want, commercial and personal, redistribute it, share it, remix and rework it, include it in your UI api or whatever. Be free.

You might also like:

My Content-Aware Scrollbar [http://www.chrisnorstrom.com/2011/02/creation-introducing-the-content-aware-scrollbar-ui/]

  • http://ahmetalpbalkan.com/ Ahmet Alp Balkan

    Great article, enjoyed!

  • http://twitter.com/liampmccabe Liam McCabe

    Whilst I agree, current toggle designs can be altered so the text is on top of the handle rather than behind, removing the need for a ‘window’.

  • nXqd

    totally agree :)

  • W4RH4WK

    bootstrap integration of this would be nice

  • Thierry Milard

    Hope some Apple(ios) or Google(Android) or Oracle(java) or microsoft(windows8) people read this wonderfull post. I also think sliders as ios made it is a failled slider. Not intuitive at all at first vision :
    The exact opposite of the ios ambition: No tutorial book, all is obvious.

  • abottazini

    Great Article

  • Gg

    reinventing the windows UI dropdown element?

  • dylanized

    Cool ideas Chris!

    • http://www.ChrisNorstrom.com Chris Norström

       Thanks. When is Zen Pad coming out >_< !!!

  • http://twitter.com/GeeROC Rocco Georgi

    just great, now could someone please build a jQuery UI widget for this? 
    also: vertical version should be collapsible to selected line in order to replace form selects

  • Andy

    Great post. I’m surprised you call spiders an alternative to check boxes because I see them more as radio buttons. Cheers.

  • http://twitter.com/quattrofan Gareth Thomas

    In cases where the slider is for an “on” or “off” I’ve used red/green for the text so its obvious which is selected. That being said, I like these designs.

  • Vlad Gerasimov

    … and now simply remove unnecessary checkbox animation – and we re-invent “Textured rounded segmented control”! 

  • Philippe Lhoste

    @ea266f9593efad9715fa3c70a3abfbf3:disqus : that’s another UI failure: we see too often two radio-buttons where a single check-box is enough.
    @1208cd4bab8dd8c03d1ba8f20fb891dd:disqus : the drop-down component isn’t nice for two options, needing two clicks to choose an option. But indeed, the vertical slider is rather redundant (rather with a simple list), except perhaps for UI consistency.

    To the author: great article, great idea, nicely illustrated. Naive question: if somebody take your idea and implements it, what is the risk (ie. is it patented? can ideas have a license? is a simple attribution of the idea enough?). Sorry if the answer is somewhere else in the site, I just came here directly. Will explore more your site.
     

    • Chmike

      Once it is published, it isn’t patentable anymore.

    • http://www.ChrisNorstrom.com Chris Norström

      Yes, once published I have 1 year to patent it otherwise it falls into prior art and no one can patent it. And there’s no way in hell I’m paying $5,000-$10,000 patenting a slider. Let alone enforcing licenses of a UI element.

    • http://www.ChrisNorstrom.com Chris Norström

      Updated with license info, feel free to use it for whatever you want. A link back here would be nice. If you look through my articles I always attribute others.

  • http://twitter.com/Jeroen_Ransijn Jeroen Ransijn

    I wanted to write a comment in reply because I strongly disagree with this article and approach. But I ended up writing a article and making a blog.

    Everybody who has read this article, read this response:http://scriptkiddie-chronicles.tumblr.com/post/35055426064/the-better-ui-choice-is-actually-worse

    • Nick Mason

      Have to agree – there’s a lot of thought here, but no real “new” solution. You’ve come up with a funky looking button group. I know it’s all the rage to bag on skeuomorphism right now, but those toggles were created with a specific real-world corollary in mind. Think of a light switch. The visual state, as Jeroen’s so kindly pointed out, is key. Grey on grey? Big problem. Grey vs blue? Or grey vs green? Quite simple to see what item you’ve selected, as with a light switch (on, lights on. off… you get the idea). Also consider the context – for your game design – sure, great, I love the price slider. For a more standard UI, a button group is the go-to convention. You can rely on a user knowing what to expect every time from standard conventions.

    • http://www.facebook.com/morten.sickel Morten Sickel

      I read your replay, and partially agree that some of the examples are not too good, but you do not seem to see what is the original problem, those completely ununderstandable toggels where it is impossible to understand if the text is what is chosen or the action to take.

  • Sandra

    I had the same problem and came to the same conclusion. We use something very similar in our game Gemsweeper as a selection toggle.

  • c.

    You went though a lot of effort to recreate radio buttons.  ”Sliders” with only 2 states are better served with a checkbox and more descriptive labels (“Invert color scheme?” or “Enable auto-complete?”).  If it looks like a button, people expect it to act like a button.

  • dmckeon

    s/ellegant/elegant/

  • Issac Trotts

    Very nice work.

  • http://movito.net/ Fredrik Matheson

    First off, let me commend your effort. You’ve written a clear-eyed analysis and given us a nicely-paced exploration of these sliders.

    Of course, these sliders were originally made for touch input. They don’t quite translate into a WIMP environment.

    In my view, a glass-like overlay would work better than the outline you’re suggesting. Indeed, some of the images look almost precisely like the iOS scroll picker, but without the low-contrast indication of selected state.

    Thus, I think the sliders you suggest work well for binary choices. For multi-selector boxes, I think we have better alternatives available.

  • shaun gilchrist

    http://jsfiddle.net/LWFg3/9/ – needs style work but I like the idea of styling an existing select element and hiding it (but keeping it updated) so that normal form validation etc. works (and so it degrades gracefully).

  • http://profiles.google.com/danielm.nc Daniel Marcus

    In response to both this article, and the iOS style sliders, as per Jeroen Ransijn’s article, I hate those things. Although the bright blue highlight helps me remember which one is on or off, whenever it’s been some time since I’ve used an iOS device, I try turning things on by hitting the bright blue “ON” button, and wonder why it doesn’t work.

  • Lachmawida_444

    Well written and I think the idea is great! I’ve only started learning programming, but beging able to implement such sliders is sth I look forward to.
    I also love your scrollbar! :)

  • Asd

    Great idea, I’d definitely make the text highlight and maybe glow subtly when in the ‘on’ position, and then dull and red when ‘off’

  • Rh2k5

    Are you sure almost identical hasn’t been done before in some physical analog electronic device like when the radio or when electricity was invented?

    There are door latches on airplane lavatories that indicated the status of “occupied” or “vacant” in red and green colors. Moreover, there are portable bathroom sometimes called “port-a-lets” that have something similar.

    Furthermore, in analog radios, one had a red or black needle to point to the numbers on dial for the frequency or even the volume. Some analog dials, instead of a needles, I think, they used an “outline” squarish type of needle very similar to yours. Perhaps on Sony and Aiwa analog portable devices.

  • duggi

    uhh, yeah … so a lot of UIs already do this by labeling the slider button with the currently active choice, usually in a green glowy treatment. brutal assessment: extremely pedantic article that could have been communicated with two graphics and accompanying blurbs. 

  • http://twitter.com/RileySpiller Riley Spiller

    Can I say, this was a perfectly written article. It was easily skimable :) The author put all the important points right next to the visuals.

    • http://www.androidaustralia.com.au/ Josh Berg

      Agreed completely. :)

  • vivekgani

    very cool. The only thing I think I’d consider adding if it worked visually would be a small notch arrow embedded either on the left side, or possibly on both top and bottom. 

    If possible, I’d also considering with doing the dim the other way around somehow. As a totally different approach, there’s also how windows phone 7 solved the problem, at the tradeoff of using a different row for the description: 

  • Sara

    I totally agree! It confuses me sometimes too, I click on OFF and suddenly the switch is ON, u’re absolutely right about what you said! Thank you for this article and for the examples and designs.

  • http://twitter.com/tomahaiku Toma

    Interesting. While ugly, Radio Buttons also suffice in most cases. They display all options available to the user, and the selection is clear and definite. 

    Sliders are great because of the skeumorphic aspec. They seem familiar. That said, they are less practical and I rarely use them. In a recent large project I faced this very dilemma and I decided on…. a checkbox. 

    Nice article.

  • JamesyGB

    Superbly written article! Great example of how it can used to select price band. I think you’ll start seeing this in those feature charts, or customer decision trees.

  • ShirtlessKirk

    Sliders are only skeumorphic if a) the user has real world examples they use on a regular basis and b) the user has iOS devices that mimic those real world examples. I have neither so toggle sliders are unnecessarily confusing.

    That being said, your windowed slider example for content aware scrollbars is superb and intuitive. This is because it portrays multiple points of information.

  • sevenupcan

    Do you think feedback plays a major role in the user understanding the control? For example when you flip the mute switch on the iPhone it vibrates and you see a fluorescent orange colour. Would be interesting to experiment with this in interface design.

  • Sara Soueidan

     I totally agree with you, and this is my implementation of this “windowed slider”: http://codepen.io/SaraSoueidan/full/AwmzH

  • Sara Soueidan

    For some reason my previous comment didn’t show, anyway, this is an implementation I made of your idea: codepen.io/SaraSoueidan/full/AwmzH

  • http://twitter.com/LowTechAbuse Peter Gowen

    Prior art, hmm. Been nagging me all morning, finally hit me: those weight/height scales in doctors’ offices.

    http://billtaylorcsp.files.wordpress.com/2012/08/scale-2.jpg

    Similar in concept, at least.

  • http://www.viaromania.eu/ Adrian

    So intuitive!

  • http://twitter.com/MarkPenrice Mark Penrice

    So… you just invented the “highlight”?

    Your mind is going to be absolutely fucking blown when I show you the menu interfaces of some DVDs I made for work a couple years ago that worked exactly the same as this. Or the boot screen of a ZX Spectrum. Or pretty much any arcade home videogame ever.

  • http://www.facebook.com/people/Philip-Damra/1601148243 Philip Damra

    It would be nice in a touch interface if only the currently selected option was displayed in the window, and on the touch event it expanded vertically and the window was made draggable as a select menu

  • shvelo

    Probably Apple has already patented that

  • http://twitter.com/calvinkoepke Calvin Joel Koepke

    Brilliant article, thanks.

  • http://www.trka.ru/ Габдулхаков Идель

    The implementation of information scrolling – very smart idea. Thanks, Chris

  • http://twitter.com/jwmulholland James Mulholland

    Another prior art: Reeder’s mode changing, see image. I always liked it better than the depressed tabs or the current on/off toggles out there.

    Even so, great article and great examples provided by the community. Love to see the current toggle skewered a bit and the implementation of this solution looks great. Excellent work!

  • http://twitter.com/jwmulholland James Mulholland

    Another prior art: Reeder’s mode changing, see image. I always liked it better than the depressed tabs or the current on/off toggles out there.

    Even so, great article and great examples provided by the community. Love to see the current toggle skewered a bit and the implementation of this solution looks great. Excellent work!

  • santanu13

    Amazing invention Chris!

    We at Torry Harris have posted a blog post on how we implemented your design: Windowed Slider UI to Enhance your Mobile User Experience http://bit.ly/1g8A6zj

    Regards,
    Santanu