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 u op een MacBook kunt 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 u ook de wet van Fitts kunt 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 kunt de wet van Fitts ook gebruiken om iets moeilijker te selecteren te maken door het kleiner te maken.

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

Onze inzichten

Onze inzichten, maar dan digitaal

Wat is een website prototype?

Wat is een website prototype?

Een prototype is een interactieve demo van een website of applicatie. Deze worden vaak gebruik om feedback te verzamelen van gebruikers en stakeholders in de vroege levensfase van het project.

Label voor prototype Prototype Label voor websites Websites
Lighthouse - De toolkit voor webontwikkelaars

Lighthouse - De toolkit voor webontwikkelaars

Lighthouse is een open-source, geautomatiseerd hulpmiddel om de kwaliteit van webpagina's te verbeteren. Je kan het op elke website uitvoeren, publiek of waarvoor authenticatie nodig is. Het stelt audits voor prestaties, toegankelijkheid, progressieve webapps, SEO en meer beschikbaar.

Label voor websites Websites Label voor performantie Performantie
Hoe werkt Google

Hoe werkt Google

Google haalt informatie uit veel verschillende bronnen, waaronder webpagina's, door gebruikers ingediende inhoud zoals Google Mijn Bedrijf en Maps, scannen van boeken, openbare databases op het internet, en vele andere bronnen.

Label voor SEO SEO