Invention: Multiple-Choice “Windowed Slider” UI

There was 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/]