The better ui choice is actually worse
Just a minute ago I did not have blog, but just now I read an article featured on Hacker News, written by Chris Norström and titled: "Invention: Multiple-Choice “Windowed Slider” UI" . I wanted to reply in a comment because I do not agree with Chris. While typing my comment, I realised it deserved a dedicated article (and a blog to host it) to make my point clear. In this text it shall be argued that the invention Chris explains is not a better ui choice, and why it is not so novel after all.
To start with, this quote is Chris's reasoning about when sliders are a better ui choice:
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.
What he is saying that sometimes a slider is a better ui choice in situations which requires toggling the state between two options, for example "Published | Unpublished" or "Dark | Light". Next, he proposes that a slider is the solution. In addition he writes current sliders have a flaw. Namely, the confusion between the on and off state. He shows the example underneath to emphasise this.
First, I would like to point out that his example is a switch to toggle an on/off state, similar to a checkbox. However, his reasoning when to use a slider is for the "Published | Unpublished" state of an article, or the "Dark | Light" option of a template. I could imagine that a label could contain the text "Published" accompanied by such a switch, but I think he means instead of the on and off text. I will get back to this later on.
Second, Chris states the following in his article.
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.
However, the confusion is raised because of a poorly designed active state in his example image. A better example would be to show the implementation of iOS. (Example images stolen from this excellent article: "on/off Switches" by Matt Gemmell.)
The active state (on state) in Apple's implementation is a better starting point to compare Chris's 'invention' with. Apple only uses the switch on touch based devices and I believe Chris is focusing on the desktop with a mouse interface. Additionally, the implementation of the switch found in iOS is strictly a toggle between on/off and accompanied by a label.
The invention Chris proposes is basically turning the switch into a button group. But instead uses a sliding window to highlight the active state, as seen below.
His invention is no longer a toggle, like a switch or checkbox, instead it is a button group with what you could call an inverted active state. For a brief time the iCal app in Mac OS X Lion had a ui which worked practically the same.
Chris quickly generalizes his approach too different use cases. Such as adding more options, as seen in the above example. At first, it seems legit, but a closer look reveals that this approach comes with a bunch of problems.
The active state is too similar to a button, and is likely to be pressed
Labels inside the well don't appear clickable, may even appear disabled
Delayed feedback when actually clicking an option, because the active state needs to slide in place
Apple also realised it was not a good solution and instead switched to a button group as we know it now.
Chris shows different examples how to use his invention, and no longer is it a toggle.
Only the top row is a toggle, the others are just like navigation bars, but instead of enhancing the traditional approach, it becomes only harder to use. One exception might be a tv interface such as Apple tv, which already uses an interface like this.
The invention that Chris made is in no way an invention, and I don't understand why it is a solution to anything. Also, web designers are achieving this effect already and plugins like Lava-Lamp, which I have used in the past, make this possible (are you interested in how to achieve this?). Furthermore, designing a slider as the interacting component for a mouse to work with is not good ui advice. Dragging with your mouse pointer sucks to say the least, if users don't understand you can click the items.
What is the better ui choice?
To get back on the original reasoning of Chris, I like to give the correct answer.
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.
The first point is in not so valid, because publishing is an action, not so much a state, but let's do it anyway.
No toggle on/off switch required although which is the warranted better ui choice.
Now for the "Dark | Light" options.
To conclude, the invention introduced by Chris might not be such good of an ui choice after all. His idea knows many drawbacks, and I encourage every designer to look at a problem individually, and pick the best solution. If you agree with me, please get this article spread to the people who read Hacker News.
