Hit areas & UX

Fingertoppen är inte en muspekare

En muspekare är en pixel. En fingertopp är ungefär 44-57px bred. Det är det grundläggande problemet med mobilgränssnitt som byggs av folk som bara testar på desktop.

Hit area (träffyta) är det klickbara/tryckvänliga utrymmet runt ett element. Det behöver inte matcha det visuella elementet, det viktigaste är att fingret träffar något när användaren trycker.

Det vanligaste UX-felet på mobil är knappar och länkar som är för små att trycka på. Det är inte en designsmak. Det är en tillgänglighetsbugg.

Padding = klickyta

Den vanligaste missuppfattningen: om en knapp ser liten ut, öka font-size.

Fel. Textstorleken och träffytan är oberoende av varandra. En länk med liten text kan ha en perfekt stor träffyta om du ger den tillräckligt med padding:

.btn {
    font-size: 0.875rem;
    padding: 0.75rem 1.5rem;
    display: inline-block;
}

Texten här är bara 0.875rem, motsvarande 14 pixlar, men paddingen bygger en träffyta som täcker ett finger. Raden display: inline-block behövs för att en länk är ett inline-element, och som du såg i display-delen i Tema 1 ignorerar inline-element ibland vertikal padding.

Mentalmodellen: padding är utrymmet innanför bordern. Det skapar buffert runt innehållet. Den bufferten är klickbar.

.btn-bad {
    font-size: 1.5rem;
}

.btn-good {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
}

.btn-bad har stor text men ingen padding, så träffytan är knappt högre än bokstäverna. .btn-good har mindre text men generös padding, och det är den som är lätt att träffa med tummen.

WCAG och måttenheter

Siffrorna känner du igen från Tema 1: när du byggde menyn mätte du länkarnas klickyta i Computed och siktade på 44 pixlar. Kravet kommer från WCAG 2.5.8 (AA): klickytor ska vara minst 24×24 CSS-pixlar. Apple och Google siktar högre i sina designriktlinjer, och kursens mål är därför minst 44 pixlar. Det som är nytt nu är att du förstår varför paddingen gör jobbet: det är boxmodellen.

Du kan kontrollera storleken i DevTools: markera ett element och titta på layoutdimensionerna i Computed-fliken. Bredden och höjden som visas inkluderar padding, det är träffytan.

Knappen sätter rytmen

En stor, tryckvänlig knapp gör också något med resten av designen. Sätter du en 48 pixlar hög knapp i ett kort där texten står tätt och kanterna är snåla ser knappen ut som en jätte i fel rum. Bra klickytor kommer sällan ensamma: när knappen växer behöver kortet mer padding och elementen mer luft, så att proportionerna hänger ihop. Designers kallar det rytm, återkommande avstånd som får en layout att kännas avsiktlig. Du behöver inte bemästra det nu, men lägg märke till det när du bygger: en användbar knapp är ofta första steget mot en rymligare och lugnare layout. Mer om det i delen om visuell hierarki och typografi.

Pröva i DevTools: Simulera ett finger

Öppna din sida i webbläsaren och tryck F12.

1. Klicka på ikonen som ser ut som en mobil högst upp till vänster i DevTools (Toggle device toolbar, eller Ctrl+Shift+M).
2. Välj en mobilenhet (t.ex. iPhone). Din muspekare förvandlas nu till en grå cirkel som simulerar ett finger.
3. Försök klicka på dina länkar och knappar. Om du måste sikta noggrant med cirkeln är träffytan för liten.
4. Kontrollera i Computed-fliken att din knapps totala höjd når upp till minst 44px.

Testa med riktiga fingrar

Simulatorn är en bra början, men den grå cirkeln är fortfarande en muspekare i förklädnad. Det verkliga testet är din egen mobil. Sedan Tema 2 ligger din övningssida live på GitHub Pages, och det är nu det betalar sig: committa, synka och öppna sidan i mobilen. Trycktesta varje länk och knapp med tummen. Det som kändes rymligt i simulatorn kan vara frustrerande smått på en riktig skärm, med en riktig tumme, på en buss som skakar.