Sliders Are Bad Practice

24 oktober 2015

Deze post heb ik origineel in het engels op Medium geplaatst. Dat was op 15 augustus 2013 en wordt sindsdien elke week wel door een tiental personen gelezen. Ik vond het daarom maar eens tijd om hem ook op mijn persoonlijke blog te plaatsen, omdat hij nog steeds grotendeels relevant is.

Deze post schrijf ik in reactie op de numerieke schuifbalk inputs die ik steeds vaker verkeerd gebruikt zie worden in web- en mobiel design.

“Een schuifbalk is een goede keuze als je weet dat je gebruikers de waarde als een relatieve hoeveelheid zien en niet als een numerieke waarde. Zo denken gebruikers bijvoorbeeld bij geluid aan hard of zacht en niet aan stand 2 of 5.” — Microsoft

Ik zeg dit niet graag, maar luister naar meneer Microsoft. Het is niet prettig om een specifiek getal te kiezen met een schuifbalk input, zeker niet op touch apparaten. Hoe groter het bereik is aan getallen op de schuif, des te makkelijker is het om het verkeerde getal te selecteren. Je schiet er zo overheen. Zoals meneer Microsoft het zegt, een schuif gebruiken om een relatieve waarde te selecteren is wel goed. Alleen dwangmatige mensen zullen hun volume op een exact getal willen hebben staan. Of mensen die weten dat 80 het perfecte volume is op hun TV als ze hun favoriete serie op Netflix aan het kijken zijn. Maar als ik bijvoorbeeld bier aan de bar dan is niet elk aantal tussen vijf en tien goed. Nee, ik wil zes bier voor mij en mijn vijf vrienden en ik wil het niet bestellen als: "vijf bier, nee dat is er eentje te weinig, zeven bier, nee dat is te veel, zes bier, ja zes bier."
Dus alsjeblieft, gebruik alleen maar schuifbalk inputs als gebruikers een directe feedback hebben bij verandering. Zoals bij het veranderen van het volume en het veranderen van de helderheid van een scherm.

Wat zou je dan moeten gebruiken?

Als je een input methode moet kiezen, kijk dan eerst naar het soort waarde dat ingevuld moet worden. Als je de gebruiker wilt beperken tot vier keuzes kun je radio buttons gebruiken. Voor meer dan vier waardes zou ik select boxes aanbevelen (lees hier waarom dit achterhaald is). Als je de gebruiker niet wilt beperken—of als de minimale en maximale waardes extreem met elkaar verschillen—zou ik gewoon een input box gebruiken. Met HTML5 kun je een minimum en een maximum stellen voor numerieke waardes.