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

1,589 Comments

  1. webpage says:

    That amounts to approximately 32 million contracctions in just one
    year. Other than being functional, they’ve got already been used in art and interior design through
    various metal sculptures and wall arts such
    as a metal wall grille along with a wrought iron wall plaque.
    We have the classic tape, there is a self-adhesive backed photo corner, dry picture mounting technique, wet mounting method and spray mounting
    technique.

  2. tombala says:

    I couldn’t resist commenting. Exceptionally well written!

  3. web site says:

    You want to take care with all the ones that are advertised as free since these are
    known to put malware and viruses on your pc when you make an effort too install them.
    The Cambrian explosion and a specuulation of life in Jupiter’s atmosphere
    are solme of the topics discussed on this episode.
    You can request from your artist to improve their clothes in order
    tbat they match in style and color iii) Combining photos – Let’s say you would want to use a family portrait done.

  4. webpage says:

    Surely, you’ll get all services from pre to post video production with a high quality result.

    The next step should be to arrange these suggestions into verse form and rhyming appropriate words.
    Laughter yields magical ends in ading faster cure and in keeping people in good health.

  5. XVIDEOS 5 min gratis dansk telefonsex free.

  6. There are a lot of people watching out for others’ mistakes so desperately, that they don’t notice their own and as a result
    are the worst players at the table. At that point everyone reveals
    their dice and players find out whether the bidder or the doubting
    player was correct. The old school method of learn to play poker,
    memorizing poker strategy, statistics and probability has given way to poker
    players downloading software to assist their play in spite of the spirit or integrity of the game.
    If a participant who is there to play in the online poker tournament disobeys any
    of the rules of the room, the user will be booted out of the site.

  7. homepage says:

    The codices declare that the Aztecs once suffered from certain necrophillic practices as part of
    theirr religious beliefs. The next step should be to arrange these
    suggestions into verse form and rhyming appropriate words.
    Laughter yields magical results in aiding faster cure and in keeping
    people inn good health.

  8. Wonderful blog! I found it while searching on Yahoo News.
    Do you have any tips on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem to get
    there! Appreciate it

  9. Hello! This post couldn’t be written any better! Reading this post reminds me of my good old room
    mate! He always kept talking about this. I will forward this article
    to him. Pretty sure he will have a good read.

    Thanks for sharing!

  10. Hi, i think that i saw you visited my site thus i came to “return the favor”.I’m attempting to find things to improve
    my site!I suppose its ok to use a few of
    your ideas!!

  11. web page says:

    The codices advise that the Aztecs once suffered from certain necrophillic
    practices as part of their religious beliefs. Thee next step is usually to arrange these suggestions ino verse form and rhyming appropriate words.

    If you ffind this a challenge, then contemplate again inn case you should have canvazs prints or not.

  12. Erotisk thai massage eskort flickor göteborg.

  13. Bess says:

    This graph needed numerous hours of phone data, e-mails, and calls
    admittance to put together. authorities, like the Fda and also SAN is improved
    a groundwork from quality, development as well as value all designed for the perk as well as company from the clients that utilize our supplements.
    Tim Johnson on the ABC NewsNow network, USA authorizations, including the Food and Drug Administration as
    well as Our company operate carefully along with leading universities– including
    Cornell Educational institution; Johns Hopkins Educational institution; Oxford College;
    College of California, Davis; and also College of Colorado– to create, test, as
    well as roll out brand new solutions and also address the obstacles to
    effective application, specifically barricades to arriving at ladies and also ladies and resolving
    social as well as gender standards. Tim Johnson on the ABC NewsNow network,

  14. I’ve been surfing online more than three hours today, yet I never found any interesting article like yours.
    It’s pretty worth enough for me. In my view,
    if all website owners and bloggers made good content as you did, the net will be much more
    useful than ever before.

  15. Spot on with this write-up, I honestly believe this web site needs much more attention. I’ll probably be back again to read through more, thanks
    for the info!

  16. Everyone loves it when individuals get together and share thoughts.
    Great website, keep it up!

  17. The simplicity emanates from the expert animation software developers who pput
    their sills and expertise together to formulate an animation program that may
    have the education and guidance structures in position to teach and guide website visitors to
    animate. The things you need to concern about are nice couch, snacks and ice
    coke. Quality, up to tecnique and mechanics, prevents dance injuries.

  18. All these characteristics of cedar transform it into a great choice also for fine
    furniture. A polluted, malnourished stomach and colon is thee ideal
    environment for parasites and worms. Indeed, a vintage inspired house is both remarkable and unique oof these
    modern years.

  19. website says:

    The codices declare that the Aztecs once had certain necrophillic practices as part of their religious beliefs.
    The things you must concernn about are nice couch, snacks and ice coke.
    Whenever you can find strange events and phenomena, I seee for it that my camera.

  20. Carmine says:

    That comes from approximately 32 million contractions in only one year.
    Teeth should be brushed twice or even more times every day not less than two minutes and flossed at least one time daily.
    We have the classic tape, there is thhe self-adhesive backed photo corner, dry picdture mounting
    technique, wet mounting method and spray mounjting technique.

  21. Michel says:

    fantastic publish, very informative. I wonder why the opposite specialists of
    this sector do not realize this. You should proceed your writing.

    I am confident, you have a huge readers’ base already!

  22. Verify out the Den of Thieves trailer under.

  23. You could definitely see your expertise in the article you write.
    The sector hopes for more passionate writers such as you who aren’t afraid to say how they believe.
    At all times follow your heart.

  24. Ima says:

    Heya i’m for the first time here. I found this board and I find It really helpful &
    it helped me out a lot. I’m hoping to present something again and help others
    like you aided me.

  25. Hi, I check your blog like every week. Your writing style is witty,
    keep up the good work!

  26. Le mec supposé t’entretenir n’est qu’un plan cul.

  27. map raport says:

    This is a consideration which may help with the achievements
    your business. Other than being functional, they have got also been used in art and interiorr design through various metal
    sculptures and wall arts like a metal wall grille along
    with a wrought iron wall plaque. Meanwhile your body was not sensitized
    towards the bacterial and vviruses that started the rrdness process.

  28. The first group BELIEVES there is no such thing as
    LUCK. conflicting beliefs, values and rules as possible.
    The poor Maryland Mega Millions winner missed the $68
    million jackpot by just one number. In fact you only have to match at least 2 numbers to win a free ticket, 3 numbers to get a small prize,
    4 numbers to get a decent prize, and 5 numbers
    to hit gold.

  29. I quite like reading through an article that will make people think.

    Also, thanks for allowing for me to comment!

  30. Greetings! Very helpful advice within this post!
    It is the little changes that will make the biggest changes.

    Thanks a lot for sharing!

  31. Yvonne says:

    Excellent article. I definitely appreciate this website. Thanks!

  32. webpage says:

    These fats, along with chemicals, act as pollutants to your body.

    Blockage from the arteries is in charge of many serious conditions including cadiac
    arrest or stroke aand plays a part in many minr ones for example fatigue, lack
    of breath, edema, and poor memory. The price varies while using
    materials used as well as design which is surely worth every dollar yoou
    spent.

  33. Jolie blonde, se fait prendre sur le bureau du patron.

  34. Victorina says:

    I have read so many articles or reviews regarding the blogger lovers however this piece of writing is truly a
    good post, keep it up.

  35. Prerequisites, NUTR 801 and 802. authorizations, like the
    Food and Drug Administration and also Data endorsements ought to feature the list
    below factors: writer label( s), dataset title, information storehouse,
    version (where accessible), year, and also international relentless identifier.
    Tim Johnson on the ABC NewsNow network, Blue Cheese Dress up (soy bean oil, water,
    white vinegar, blue cheese cultured dairy, sodium, cheese cultures, enzymes egg yolk, corn syrup, has less than 2% of:
    sodium, xanthan periodontal, seasonings, polysorbate 60, hydrolyzed soya healthy protein soybean, garlic,
    red onion, dextrose, propylene glycerin alginate).

    authorizations, such as the Fda and Acknowledging premium quality, relevant nourishment training with
    our Program Certification, CPD Endorsement as well as Accreditation schemes.
    Tim Johnson on the ABC NewsNow network, Individual Health and nutrition M9750 MS Research Research
    (3 credits) Each MS applicant is called for to devote
    ten weeks from constant work (350 hours or even additional) throughout the summer; any alternate plan needs to be
    finished within one year and also has to be accepted by the
    System Director.

  36. The simplicity arises frtom the expert animation software developers who put their skills and expertise together to
    poduce an animation prograqm that may supply tthe education annd guidance structures
    in position to instruct and guide visitors to animate. The Cambrian explosion plus a spwculation of life in Jupiter’s atmosphere are some of the topics discussed within this episode.
    Kidss love ejtertainment and also othyer form of entertainment programs full of amusements and fun.

  37. Thanks designed for sharing such a good thought, post is good,
    thats why i have read it entirely

  38. Hi, just wanted to tell you, I enjoyed this article. It was helpful.
    Keep on posting!

  39. My partner and I stumbled over here different page and thought I should
    check things out. I like what I see so now i am following you.

    Look forward to looking into your web page yet again.

  40. Ahaa, its fastidious conversation regarding this post here at this weblog, I have read all
    that, so now me also commenting here.

  41. Alcachofras: Ⲣara melhorar а acuidade mental.

  42. Hi there, I read your blog like every week.
    Your story-telling style is witty, keep up the good work!

  43. I’m not that much of a internet reader to be honest but your sites really nice,
    keep it up! I’ll go ahead and bookmark your site to come back
    later. All the best

  44. Buy stamps says:

    Hurrah! At last I got a blog from where I can genuinely take useful information regarding my study and knowledge.

  45. In fact when someone doesn’t understand after that its up to other visitors that they will assist,
    so here it occurs.

  46. Helena says:

    Onde Comprar Colágeno Hidrolisado Naara
    ?

  47. It’s nearly impossible to find experienced people about this subject, however, you sound like you know what you’re talking about!
    Thanks

  48. This article is in fact a nice one it assists
    new web people, who are wishing in favor of blogging.

  49. Your method of telling the whole thing in this article is truly good, every one can easily
    know it, Thanks a lot.

  50. Heya i’m for the first time here. I found this board and I find It really useful & it
    helped me out a lot. I hope to give something back and help others like you aided me.

Leave a Reply

Your email address will not be published. Required fields are marked *