Fitts’s law en UX design: de gouden combinatie

Een goede UX-designer gebruikt Fitts’s law bij het ontwerpen van een nieuw design. Zijn de knoppen groot genoeg? Kost het weinig moeite om die knop te bereiken? In deze blog leg ik je uit hoe je Fitts law gebruikt om je UX design of User Interface design te perfectioneren. 🙂

Wat is Fitts’s law?

In 1954 bedacht psycholoog Paul Fitts een model om te voorspellen hoeveel tijd het kost om een target bereiken en te selecteren, Fitts’s law genaamd.

Met het model bereken je hoeveel tijd er nodig is om naar je doelwit te bewegen. Het hangt af van de afstand tot het doel en de grootte van dat doelwit. Want hoe langer de afstand en hoe kleiner de grootte van het doelwit, des te langer het duurt om dat doelwit te bereiken.

En hoewel het oorspronkelijk was ontwikkeld voor de echte, fysieke wereld, kun je Fitts’s law perfect toepassen op apparaten en onze virtuele wereld. 😉

Formule

Bij het model hoort een formule waarbij je zelf kunt uitrekenen hoe snel het duurt om je doelwit te bereiken.

MT=a + b * log2(D/W + 1) 

• MT= Tijd nodig voor de beweging
• A+B= Worden bepaald in de steekproef
• D= Afstand tot het doelwit
• W= Breedte van het doelwit

UX en Fitts’s law

Een belangrijk doel bij het ontwerpen van een website is om een mooie gebruikerservaring (UX) te creëren. Fitts law is een essentieel element in dat ontwerpproces.

Fitts’s law wordt gebruikt als hulpmiddel om weloverwogen beslissingen te nemen over de grootte en plaatsing van elementen van de gebruikersinterface op webdesign. Je kunt berekenen hoe lang het duurt om de muis of cursor naar een bepaalde plek op een website te verplaatsen.

Als je (potentiële) klanten het moeilijk vinden om iets op je app of website te doen, zullen ze je diensten/service/producten niet meer willen kopen of gebruiken. Fitts Law zorgt ervoor dat de bezoeker van je website gemakkelijk door pagina’s navigeert, en de producten en diensten die je levert goed kan bereiken.

Want hoe dichterbij en groter een doelwit is, des te sneller men op dat doelwit kan klikken. En dat doelwit kan vanalles zijn: een navigatie, een hamburgmenu, een call-to-action, enzovoort.

Fitts’s law toepassen op je website

Om de UX op je website te verbeteren, verminder je het aantal pixels dat de cursor moet afleggen en maak je doelwitten groot genoeg.

1) Maak CTA knoppen groot genoeg

Kleinere knoppen zijn moeilijker (en tijdrovender) om aan te klikken. Zorg er daarom voor dat je call to action knoppen groot genoeg zijn, vooral op mobiele apparaten. Bezoekers moeten overal binnen de duidelijk gedefinieerde grenzen op de CTA-knop kunnen klikken.

Een relatief grote call-to-action knop maakt de kans groter dat erop wordt geklikt.

2) Minimaliseer beweging

Hou het doelwit op verschillende pagina’s op ongeveer dezelfde plek. Denk bijvoorbeeld eens aan de checkout op je website. Kunnen je klanten daar gemakkelijk doorklikken zonder al te veel hun cursor te bewegen?

Wanneer je bezoeker bijvoorbeeld een websiteformulier hebben ingevuld, dan plaats je de CTA knop dicht bij het laatste invulveld.

3) Hoeken van het scherm zijn het snelt te bereiken

Je kunt je cursor letterlijk naar een hoek of rand van je scherm gooien om het element te selecteren zonder de cursorpositie opnieuw aan te passen. Hierdoor bereikt de gebruiker gemakkelijk en snel een element.  Die rand begrenst namelijk de beweging van cursor.

Voorbeeld: Apple plaatst alle vensternavigatie niet aan de rand van het betreffende venster, maar altijd aan de rand van het apparaatscherm.

Fitts’s law voorbeeld bij Apple

4) Moeilijke handelingen kunnen soms fouten voorkomen

Wanneer je een app van je iPhone wilt verwijderen moet je die app even ingedrukt houden. Dit maakt het net even wat ‘moeilijker’ om een app te verwijderen vergeleken met een enkele klik.

Het verwijderen van een account of app is niet iets wat je zomaar ongedaan maakt. Want een simpele klik is natuurlijk zo gebeurd, met alle gevolgen van dien.

Door een langere/moeilijkere functie te geven aan belangrijke elementen (langer ingedrukt houden, slide langer maken of elementen kleiner maken) zorg je ervoor dat er geen onverwachte fouten gemaakt worden. Zo maak je de knoppen om iets te verwijderen ook een stukje kleiner, zodat de kans dat er (foutief) op geklikt wordt, daalt.

Fitts’s law en mobiele beperkingen

Het is lastiger om Fitts’s law toe te passen op mobiele apparaten. De grootte van de CTA-knoppen is op mobiel vooral belangrijk – je moet er met je eigen vinger op kunnen klikken. Als de knop te klein is, kan men er niet goed op klikken, wat frustrerend kan zijn.

En dat is niet het enige waar je op moet letten…

Er zijn om te beginnen al veel manieren om mobiele apparaten vast te houden. De één scrollt met zijn duim, de ander met zijn wijsvinger. Daarom is het bijvoorbeeld handig om het hamburgermenu onderaan het scherm te plaatsen in plaats van bovenaan, zodat de duim er sowieso bij kan.

Daarnaast verschillen de groottes van mobiele apparaten nogal. Je moet letterlijk je hele hand/arm bewegen om van de ene naar de andere hoek te bewegen op een tablet of mobiele telefoon.

Bronnen:

Fitts, Paul M. (June 1954). “The information capacity of the human motor system in controlling the amplitude of movement”. Journal of Experimental Psychology