7 gyldne regler for mobilt menudesign

En mobil menu er ikke en skrumpet desktopmenu. Lille skærm, ofte langsom forbindelse og énhåndsbrug kræver egne designvalg. Disse syv regler påvirker direkte gennemsnitsregningen og gæstetilfredsheden.

1. Brødtekst aldrig under 16 px

16 px (1 rem) er grænsen. Under den zoomer gæsten manuelt og navigationen falder fra hinanden. Anbefaling: body 16-18 px, retnavn 18-22, kategoritekst 22-28.

2. Berøringsmål minimum 44 × 44 px

Apple HIG og Google Material kræver 44 × 44. Mindre = 15-23% flere fejltryk. Mellem faner mindst 8 px.

3. Hierarki som F-mønster

Mobil læsning er lodret. Anbefalinger helt øverst, kategoribar sticky. Forstår gæsten ikke logikken på 5 sekunder, vinder tilbage-knappen.

4. WebP/AVIF og lazy loading

WebP er 30% lettere end PNG. AVIF endnu 15-20% mindre. Billeder hentes først ved kategorieåbning — <img loading="lazy">.

5. Tre-sekunders reglen

LCP under 3 s. Test med begrænset 3G — café-Wi-Fi er sjældent bedre. JS-bundle under 150 KB.

6. Max 4-5 farver

Brandfarve + sekundær + accent + sort + hvid. Allergenikoner ved form OG farve — 1 ud af 12 mænd er rød-grøn farveblind.

7. Énhåndstest

Kritiske handlinger i nederste halvdel — tommelzone-reglen. Mobile-first platforme som thMenu følger dette som standard.

Et velindstillet mobilt menu hæver ordrer 12-18%. Et dårligt sender gæsten tilbage til tjeneren og sletter den digitale fordel.

Var dette nyttigt? Del det.