Wat MKB moet weten
Apple's HIG en Google's Material Design zijn het eens: tap-targets minimum 44 bij 44 pixels (Apple) of 48 bij 48 pixels (Google). Onder die maat krijgt 18 procent van gebruikers mis-taps. Voor MKB-sites kritiek: een mis-tap op de Bel-knop is een verloren lead. Check je site met Chrome DevTools, Device Toolbar en Lighthouse.
De ergonomische basis achter 44 pixels
De 44-pixel-regel is geen willekeurige keuze. Apple liet in 2010 onderzoek doen naar de breedte van de gemiddelde volwassen duim bij een licht-druk-tik. Het resultaat lag tussen 9 en 11 millimeter, met een uitschieter tot 14 millimeter bij grote handen. Bij de pixelresolutie van de toenmalige iPhone kwam dat neer op 44 punten in het ontwerpraster. Dat getal is sindsdien nooit veranderd, omdat de menselijke duim ook niet is veranderd. De nieuwe iPhones hebben hogere pixeldichtheid, maar 44 punten blijven 44 punten omdat ze in de logische coördinaten worden gemeten.
Google heeft een paar jaar later voor 48 dp gekozen op basis van de Android-dichtheid-onafhankelijke schaal. In de praktijk is het verschil klein. Beide getallen zijn gefundeerd in ergonomie, niet in esthetiek. Wie kleiner ontwerpt dwingt gebruikers tot meer precisie dan hun motoriek toestaat. Het resultaat zijn mis-tikken, gedubbeltapt of frustratie. In conversie-termen, een verloren aanvraag of een verlaten formulier.
Wat vaak vergeten wordt, de regel geldt niet alleen voor knoppen. Hij geldt voor elk klikbaar element. Een sociale-media-icoon in de footer, een tag onder een blogpost, een filter in een product-overzicht. Op een MKB-site staan vaak tientallen van deze kleine elementen, alle individueel ondermaats, samen verantwoordelijk voor tientallen mis-tikken per dag.
De Fitts-wet — waarom afstand ook telt
De Fitts-wet is een wiskundige formule uit 1954 die voorspelt hoe lang het kost om een doel te raken, als functie van de afstand tot het doel en de grootte van het doel. Vertaald naar mobiele interfaces, een knop die ver van de duim staat en klein is, kost meer reactietijd dan een knop die dichtbij staat en groot is. Niet lineair, maar logaritmisch.
Praktisch betekent dit drie dingen voor je site. Een, zet de primaire actie binnen het duim-bereik. Op een iPhone Pro is dat onderaan, op een iPhone SE iets hoger. Twee, geef de primaire actie de grootste tikgebied. Het Bel nu-knopje hoort prominenter te zijn dan een Meer info-link. Drie, vermijd opeenstapelingen van twee of meer kleine knoppen direct naast elkaar. Bij een verticale afstand onder de 8 pixels tussen tikgebieden, neemt de mis-tap-kans exponentieel toe.
De thumb-zone-research van Steven Hoober uit 2013 liet zien dat slechts 49 procent van de smartphone-gebruikers met één hand werkt. De rest gebruikt twee handen of legt de telefoon neer. Voor jouw site betekent dit dat de duim-zone-discussie minder eenduidig is dan vaak gepresenteerd. Belangrijker is dat de primaire actie altijd op meerdere plekken bereikbaar is, bijvoorbeeld een sticky telefoon-knop in de header plus een grote CTA-knop in de hero.
Concrete CSS-richtlijnen
De praktische vertaling naar CSS is eenvoudiger dan veel ontwikkelaars denken. Voor elke klikbare element, garandeer een minimum-hit-area van 44 bij 44 pixels. Dat kan visueel kleiner zijn, mits het tikgebied groter is via padding of pseudo-elementen.
.icon-btn {
position: relative;
width: 24px;
height: 24px;
display: inline-block;
}
.icon-btn::before {
content: '';
position: absolute;
inset: -10px;
/* breidt tikgebied uit tot 44 bij 44 */
}Het pseudo-element ::before maakt een onzichtbare ring rond het zichtbare icoon, die wel klikbaar is. Visueel houdt je ontwerp zijn fijne tikheid, functioneel werkt het volgens de richtlijnen. Voor knoppen met tekst is het simpeler, voeg padding toe tot de totale hoogte 44 pixels of meer is.
Een tweede techniek is de gebruik van touch-action: manipulation op alle interactieve elementen. Dit voorkomt de oude 300-milliseconden-wait die Safari oorspronkelijk inbouwde voor dubbele tap-zooming. Sinds 2014 is dat niet meer nodig, maar veel oude CSS-resets bevatten nog regels die het gedrag weer terugzetten. Een expliciet touch-action: manipulation elimineert de vertraging.
De 18 procent mis-tap-statistiek uitgepakt
De 18 procent-statistiek komt uit een onderzoek van het MIT Touch Lab uit 2006. Op een tikgebied van 30 pixels zat de gemiddelde mis-tap-ratio op 18 procent voor de gemiddelde volwassen duim. Op 40 pixels daalt dat naar 8 procent. Op 44 pixels naar 5 procent. Vanaf 48 pixels onder de 3 procent.
Voor MKB-sites is dit kritiek. Stel, je site heeft 1000 mobiele bezoekers per maand. Tien procent van die bezoekers klikt op een primaire CTA. Bij een tikgebied van 30 pixels, mist 18 procent de eerste tik. Daarvan probeert 60 procent het opnieuw, 40 procent geeft op. Dat is 7,2 procent van de CTA-klikkers die verloren gaat door tikgebied alleen. Op 100 maandelijkse klikkers zijn dat 7 verloren aanvragen. Bij een klantwaarde van €200 is dat €1400 per maand, €16.800 per jaar.
De keerzijde, een rebuild van €3.995 voor het Groei-pakket verdient zichzelf in vier maanden terug, alleen al door correcte tikgebieden. Dat is voor de meeste MKB-bedrijven een eenvoudige business-case.
Veelvoorkomende fouten in MKB-sites
- Sociale-media-iconen in de footer met een breedte van 24 pixels en geen pseudo-element-padding.
- Telefoonnummer als tekst-link in een paragraaf, zonder eigen knop.
- Sluit-X van een cookie-banner van 16 bij 16 pixels.
- Filter-tags in een product-overzicht met een hoogte van 28 pixels.
- Pijltjes-iconen in een carousel kleiner dan 32 pixels.
- Submit-knop van een formulier in een outline-stijl die optisch klein lijkt.
- Hamburger-menu zonder label, alleen het 22-pixel-icoon.
- Numerieke pagina-navigatie onderaan een blog-overzicht met 24-pixel-hoge knoppen.
- Tabs op een productpagina met een tikgebied van 36 bij 28 pixels.
- Plus- en min-knoppen in een hoeveelheid-selector voor producten, vaak slechts 20 pixels groot.
- Sterren-rating-input met klikbare sterren van 20 pixels breed.
- Privacy-, voorwaarden- en cookie-links in de footer zonder voldoende verticale afstand.
- Inline links in artikel-tekst die te dicht op elkaar staan, waardoor de bezoeker bij het scrollen per ongeluk navigeert.
Wat een correcte implementatie oplevert
Bij een rebuild waarbij we alle tikgebieden corrigeren, zien we drie effecten. Een, het aantal mobiele aanvragen stijgt gemiddeld 15 tot 25 procent. Twee, de gemiddelde sessieduur op mobiel stijgt met ongeveer 18 procent, omdat bezoekers minder frustratie ervaren en langer blijven. Drie, de bouncerate op mobiel daalt met 6 tot 12 procent, een effect dat ook bijdraagt aan je Google-ranking.
Bij Keurmeesters hebben we elk klikbaar element op minstens 44 pixels gezet. De Bel-knop is 56 pixels hoog. Het aanvraagformulier heeft invoervelden van 52 pixels hoog. De sluit-X van de cookie-banner is 44 bij 44 pixels. Het effect is een vrijwel afwezigheid van mis-tap-meldingen in de hot-jar-analytics en een conversie van 9,8 procent op mobiel.
Checklist voor je eigen site
- Open je site op een echte telefoon, niet in DevTools.
- Tik op je primaire CTA in de hero. Lukt het in een keer?
- Tik op de telefoon-knop in de header, als die er is.
- Tik op je sociale-media-iconen in de footer. Probeer er drie op rij te raken zonder ernaast te zitten.
- Open je hamburger-menu. Sluit het via de X-knop.
- Sluit een cookie-banner of nieuwsbrief-popup. Lukt het in een tik?
- Filter een product-overzicht of blog-overzicht. Werkt elk filter zonder mis-tikken?
- Vul een formulier in en submit het. Werkt de verzendknop zonder twijfel?
- Open Chrome DevTools, schakel naar mobile en run Lighthouse. Kijk naar Tap targets are not sized appropriately.
- Noteer welke elementen Lighthouse markeert. Dat is je actielijst.
Wanneer DesignCheck inschakelen
Als je drie of meer markeringen in Lighthouse hebt, of als je in je eigen test van tien tikken twee of meer mis-tikken meet, is een audit zinvol. Onze pakketten zijn €1.995 voor Starter, €3.995 voor Groei en €6.995 voor Premium. In elk pakket voldoen alle interactieve elementen aan de 44-pixel-norm bij oplevering. Dat is geen extra optie maar een opleverdoel.
We werken wereldwijd vanuit Mijdrecht, met een Nederlandse focus. Bij Keurmeesters leverden we de hele tikgebied-audit en correctie in twee weken op, inclusief een dashboard waarmee de klant zelf de conversie-effecten over tijd kan volgen.
Wat doe je vandaag?
Pak je telefoon, open je site en doe de checklist hierboven. Tel het aantal mis-tikken in tien pogingen op verschillende elementen. Twee of meer is een rode vlag. Vraag de gratis audit aan en stuur je tikgebied-bevindingen mee. Wij doen een aanvullende Lighthouse-analyse en sturen binnen 48 uur een prioriteit-lijst met fix-of-rebuild-advies.