Webdesign en gebruiksvriendelijkheid · Bijgewerkt op
Tikgebied: maak belangrijke knoppen makkelijk te raken
Het tikgebied is het deel van het scherm dat reageert wanneer iemand op een knop, link of ander bedieningselement tikt.
Een bezoeker bekijkt op zijn telefoon je projecten en wil een kennismaking aanvragen. De knop is duidelijk zichtbaar, maar alleen de letters reageren op een tik. Wie net naast de tekst tikt, komt niet verder. Bij het beoordelen van een website kijken wij daarom ook naar het gebied dat daadwerkelijk reageert.
Wat is een tikgebied?
Het tikgebied is het deel van het scherm waarmee je een actie kunt uitvoeren door erop te tikken. Bij een knop kan dat het hele vlak zijn, inclusief de ruimte rondom de tekst. Ook een klein icoon kan in een ruim tikgebied staan. Zo kan het ontwerp rustig blijven terwijl de bediening meer ruimte krijgt.
WCAG 2.2 noemt voor aanwijzerbediening op niveau AA een minimum van 24 bij 24 CSS-pixels, met uitzonderingen, bijvoorbeeld bij voldoende afstand tussen kleine doelen. Voor belangrijke acties kan een ruimer vlak prettiger zijn. De maat zegt op zichzelf weinig over hoe gemakkelijk iemand de knop op een echt toestel bereikt. W3C — Target Size (Minimum)
Hoe ziet dat eruit op een dienstenpagina?
Neem een renovatiebedrijf dat onder elk project een link naar de dienst en een knop voor een offerte toont. Op een smal scherm staan de twee acties dicht bij elkaar. Wie met één hand bedient, kan de projectlink raken terwijl hij een offerte wilde aanvragen.
Wij zouden de offerteknop een eigen, ruim vlak geven dat overal reageert. De projectlink krijgt een eigen plek, met voldoende afstand tot de knop. De bezoeker kan beide routes blijven gebruiken. Het ontwerp maakt ook duidelijk welke actie bij welke tekst hoort.
Bij een formulier kan hetzelfde principe helpen. Denk aan een optionele toelichting die je opent met een klein plusje. Maak het bijbehorende label onderdeel van dezelfde knop, zodat iemand op het label of het icoon kan tikken. Dezelfde knop moet ook met het toetsenbord bereikbaar en bedienbaar zijn.
Hoe beoordelen wij of de aanpassing helpt?
Wij laten iemand op een telefoon een concrete taak uitvoeren, bijvoorbeeld vanaf een projectpagina een offerte aanvragen. Daarbij kijken we of de eerste tik de bedoelde actie uitvoert, of iemand opnieuw moet tikken en of knoppen elkaar in de weg zitten. Een gemiste tik op een niet-klikbaar stuk van een knop zie je vaak niet terug in de cijfers van de knop zelf.
Daarna volgen we waar mogelijk ook hoeveel aanvragen daadwerkelijk binnenkomen en of ze bij de dienst passen. Een ruimer tikgebied kan een zichtbaar bedieningsprobleem oplossen. Het aantal passende aanvragen hangt ook af van het aanbod, de bezoekers en de rest van de aanvraagroute.
Meer over de samenhang tussen knoppen, formulieren en paginaopbouw lees je in Design voor conversie. Bij website optimaliseren beoordelen wij waar bezoekers vastlopen, werken we de verbetering uit en voeren we die ook door.
Bronnen en verdieping
De bronnen onderbouwen het begrip. De websitevoorbeelden en verbeteracties zijn onze praktische vertaling, geen gemeten resultaten uit deze onderzoeken.