Logo Fraai

Fitts Law

De wet van Fitts stelt dat de tijd die nodig is om een doel te bereiken en te selecteren een functie is van de afstand tot en de grootte van het doel.

Fitt's Law in de praktijk

Dat lijkt me logisch, toch? Als u wilt dat een doel gemakkelijk te selecteren is, maak het dan groot en plaats het op een gemakkelijk te bereiken plaats. In het algemeen geldt dat als iets gemakkelijk te selecteren moet zijn, het minimaal 44 x 44 CSS pixels moet zijn volgens de WCAG-richtlijnen.

Deze regel kan relevant zijn voor zowel desktop- als mobiele apparaten. Neem als voorbeeld de mobiele website van Chillys, de oproep tot actie om 'Nu winkelen' staat op een gemakkelijk te bereiken plek voor de duim van de gebruiker (ervan uitgaande dat de gebruiker rechtshandig is in dit scenario). Door deze knop makkelijk bereikbaar te maken, tikt de gebruiker er sneller op.

Bijna contra-intuïtief is de gemakkelijkste plaats voor een gebruiker om zijn cursor te verplaatsen de rand van het scherm. Dit komt omdat onze computerschermen randen hebben waar onze cursors niet langs kunnen en daarom heeft elk object aan de rand van een scherm een oneindige grootte. Voor meer informatie over dit onderwerp, zie dit artikel over de Wet van Fitts en oneindige breedte.

Een voorbeeld hiervan is het dock dat je op een MacBook kan vinden en dat aan de onderkant van het scherm is geplakt. Dit maakt het gemakkelijk om snel en eenvoudig programma's te selecteren.

Enkele voorbeelden van Fitt's Law

Airbnb maakt goed gebruik van de randen van het scherm op de homepage. Hoewel objecten niet direct op de rand van het scherm worden geplaatst, zullen objecten die zich dichter bij de rand van het scherm bevinden sneller te selecteren zijn dan objecten in het midden van het scherm.

Het is vermeldenswaard dat we de wet van Fitts ook kunnen toepassen om dingen doelbewust moeilijker te selecteren te maken. Zware acties zoals het verwijderen van een account kunnen een kleiner aanrakingsdoel gebruiken om onbedoelde klikken te verminderen. Door deze kleine hoeveelheid wrijving toe te voegen, kunnen we ervoor zorgen dat deze actie opzettelijk is. Zorg er echter wel voor dat de grootte van je aanraakdoel nog steeds toegankelijk blijft!

De belangrijkste punten van Fitt's Law

Als u een actie gemakkelijker te selecteren wilt maken, maak ze dan groter en plaats ze op een plaats die gemakkelijk te bereiken is.

Je kan de wet van Fitts ook gebruiken om iets moeilijker te selecteren te maken door het kleiner te maken.

Er zijn methoden die je kan gebruiken om de Wet van Fitts toe te passen op zowel mobiele als desktop viewports.

Onze inzichten

Onze inzichten, maar dan digitaal

Fraai gaat groen

Fraai gaat groen

Groen is niet alleen onze hoofdkleur, maar ook onze filosofie en vormgeving.

Label voor websites Websites Label voor algemeen Algemeen
Web Vitals - Essentiële statistieken voor jouw website.

Web Vitals - Essentiële statistieken voor jouw website.

Web Vitals is een initiatief van Google om uniforme richtlijnen te bieden voor kwaliteitssignalen die essentieel zijn voor het garanderen van een geweldige gebruikerservaring op het web.

Label voor websites Websites Label voor performantie Performantie
Hoeveel kost een website?

Hoeveel kost een website?

Een website, onmisbaar voor jouw bedrijf of product, maar vaak ook zeer techinch en te gecompliceerd om te vatten. In deze blogpost duiken we iets dieper in het werk en de kosten die een website met zich meebrengt.

Label voor websites Websites Label voor algemeen Algemeen