Mobil UX best practices

Sådan gør du — trin for trin

1. 1

   Design til tommelen først

   Antag, at brugeren betjener skærmen med tommelen, ofte med én hånd. Læg de vigtigste og hyppigste handlinger, hvor tommelen let når — typisk i den nederste del af skærmen.

2. 2

   Gør touch-mål store nok

   Følg de primære retningslinjer: mindst 44 pt (Apple) / 48 dp (Material) og aldrig under WCAG-minimummet på 24×24 CSS-pixel. Sigt efter cirka 1×1 cm fysisk, som NN/g anbefaler.

3. 3

   Giv god afstand mellem elementer

   Selv store touch-mål fejler, hvis de sidder oven i hinanden. Hold tilstrækkelig afstand (Material anbefaler mindst 8 dp), så brugeren ikke rammer det forkerte.

4. 4

   Prioritér indholdet hårdt

   Den lille skærm tvinger dig til at vælge. Start med det vigtigste indhold og de vigtigste handlinger, og skær det sekundære fra eller læg det længere nede.

5. 5

   Hold navigationen synlig

   Gem ikke den primære navigation væk uden grund. Synlig eller delvist synlig navigation bliver brugt mere og opdages lettere end en ren hamburgermenu.

6. 6

   Byg responsivt — ikke en separat mobilside

   Brug ét responsivt site frem for en separat m-adresse. Det er nemmere at vedligeholde og undgår, at mobilbrugere får en amputeret version af indholdet.

7. 7

   Test på rigtige enheder

   Emulatorer fanger ikke alt. Prøv designet på en rigtig telefon, med én hånd, i lys og bevægelse — det afslører for små mål og svært tilgængelige knapper.

Touch-mål: hvor stort er stort nok?

De primære retningslinjer er enige om, at fingre kræver plads. Apples Human Interface Guidelines anbefaler et komfortabelt minimum på 44×44 pt for interaktive elementer. Googles Material Design anbefaler mindst 48×48 dp, hvilket svarer til cirka 9 mm fysisk uanset skærmens opløsning, og at målene adskilles med mindst 8 dp.¹²

Tilgængelighedsstandarden WCAG 2.2 sætter en nedre grænse: kriterium 2.5.8 (niveau AA) kræver touch-mål på mindst 24×24 CSS-pixel, mens det strengere 2.5.5 (niveau AAA) anbefaler mindst 44×44 CSS-pixel. 24 px er absolut minimum — sigt højere, hvor du kan.³⁴

Fordi pixeltæthed varierer mellem enheder, anbefaler Nielsen Norman Group at tænke i fysisk størrelse: et touch-mål bør være mindst cirka 1×1 cm (0,4×0,4 tommer) for hurtigt og præcist at kunne rammes med tommelen.⁵

Tommelfingerzoner: hvordan folk holder telefonen

Vi holder ikke alle telefonen ens. I Steven Hoobers observationsstudie af 1.333 personer brugte 49 % én hånd, 36 % »vuggede« telefonen (holdt med den ene hånd, betjente med den anden), og 15 % brugte to hænder. Blandt de enhåndede betjente 67 % med højre tommel og 33 % med venstre.⁶

Konsekvensen er klar for layoutet. Luke Wroblewski peger på, at den nederste del af skærmen er der, hvor vi bør placere en apps mest almindelige og vigtige interaktioner, fordi det er den nemmeste zone at nå med tommelen — mens toppen er sværest. Læg primære handlinger lavt, og undgå at gemme kritiske knapper i svært tilgængelige hjørner.⁷

Mobil navigation: pas på hamburgeren

Det er fristende at gemme al navigation bag et hamburger-ikon for at spare plads, men det har en pris. Nielsen Norman Groups research viser, at det at skjule hovednavigationen næsten halverer opdagbarheden — brugerne finder og bruger simpelthen menupunkterne mindre, når de er gemt væk.⁸

Effekten kan måles: med skjult navigation var brugerne langsommere, og den oplevede opgavesværhed steg. Overvej derfor at holde de vigtigste destinationer synlige — fx en fane-bar i bunden eller en delvist synlig navigation — frem for at pakke alt væk bag ét ikon.⁸

Responsivt design frem for separat mobilside

Når du bygger til mobil, så byg ét site, der tilpasser sig, frem for en separat mobiladresse (m-site). Google anbefaler direkte responsivt webdesign, fordi det er det nemmeste designmønster at implementere og vedligeholde.⁹

Separate mobilsider fører ofte til, at mobilbrugere får mindre indhold og funktionalitet end desktopbrugere, og de kræver dobbelt vedligeholdelse. Med ét responsivt site prioriterer du i stedet indholdet efter skærmstørrelse uden at fjerne det — og undgår, at noget falder mellem to versioner.⁹

Tjekliste

• ✓ Placér de vigtigste og hyppigste handlinger inden for tommelens rækkevidde (typisk nederst).
• ✓ Gør touch-mål mindst 44 pt / 48 dp, og aldrig under WCAG-minimummet på 24×24 CSS-pixel.
• ✓ Sigt efter cirka 1×1 cm fysisk størrelse pr. touch-mål.
• ✓ Hold god afstand mellem elementer (mindst 8 dp), så folk ikke rammer forkert.
• ✓ Prioritér indholdet hårdt — det vigtigste først på den lille skærm.
• ✓ Hold den primære navigation synlig frem for at gemme alt i en hamburgermenu.
• ✓ Byg responsivt frem for en separat mobilside, og test på en rigtig telefon.

Ofte stillede spørgsmål

Kilder

1. UI Design Do’s and Don’tsApple · Anbefalet komfortabelt minimum for touch-mål: 44×44 pt.
2. Make touch targets accessibleGoogle — Android Accessibility Help · Touch-mål mindst 48×48 dp (ca. 9 mm); anbefalet 7-10 mm; mindst 8 dp afstand.
3. Understanding SC 2.5.8: Target Size (Minimum)W3C/WAI (WCAG 2.2) · Niveau AA (ny i WCAG 2.2): touch-mål mindst 24×24 CSS-pixel.
4. Understanding SC 2.5.5: Target Size (Enhanced)W3C/WAI (WCAG 2.2) · Niveau AAA: touch-mål mindst 44×44 CSS-pixel.
5. Touch Targets on TouchscreensNielsen Norman Group (2016) · Anbefalet fysisk minimum ca. 1×1 cm (0,4 tommer); citerer Parhi, Karlson & Bederson (2006).
6. How Do Users Really Hold Mobile Devices?UXmatters — Steven Hoober (2013) · 1.333 observationer: 49 % én hånd, 36 % vugget, 15 % to hænder; enhåndet 67 % højre / 33 % venstre tommel.
7. Responsive Navigation: Optimizing for Touch Across DevicesLukeW — Luke Wroblewski (2012) · Nederste del af skærmen er den nemme tommelzone — placér de vigtigste interaktioner der.
8. Hamburger Menus and Hidden Navigation Hurt UX MetricsNielsen Norman Group (2016) · Skjult navigation halverer næsten opdagbarheden og gør brugerne langsommere.
9. Mobile-First Indexing Best PracticesGoogle Search Central · Google anbefaler responsivt webdesign som nemmest at implementere og vedligeholde.