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.

Knapp eller länk?

Du har just klätt en länk i knappkostym, och det väcker en fråga som är lätt att gå förbi: borde det ha varit en riktig <button> i stället?

Regeln är kort: länkar leder, knappar utför. En “Läs mer” tar besökaren någon annanstans, till en annan sida eller en annan del av sidan, alltså är den en <a href> hur mycket den än ser ut som en knapp. Ett element som gör något på sidan där du står, skickar formuläret, visar fler resultat, fäller ut en meny, är en <button>.

Valet handlar alltså inte om utseende utan om vad som händer när någon trycker. Både <a href> och <button> är dessutom fokuserbara med Tab, aktiverbara med tangentbordet och annonseras korrekt av skärmläsare. Bygger du i stället en klickbar <div> får du ingenting av det, och allt måste byggas tillbaka för hand.

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.

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.