7 gylne regler for mobil menydesign

En mobil meny er ikke en krympet desktopmeny. Liten skjerm, ofte treg forbindelse og énhåndsbruk krever egne designvalg. Disse syv reglene påvirker direkte gjennomsnittsregningen og gjestens tilfredshet.

1. Brødtekst aldri under 16 px

16 px (1 rem) er grensen. Under den zoomer gjesten manuelt og navigasjonen brister. Anbefaling: body 16-18 px, rettnavn 18-22, kategoritekst 22-28.

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

Apple HIG og Google Material krever 44 × 44. Mindre = 15-23% flere feiltrykk. Mellom faner minst 8 px.

3. Hierarki som F-mønster

Mobil lesing er vertikal. Anbefalinger helt øverst, kategoribar sticky. Forstår ikke gjesten logikken på 5 sekunder, vinner tilbake-knappen.

4. WebP/AVIF og lazy loading

WebP er 30% lettere enn PNG. AVIF ytterligere 15-20% mindre. Bilder lastes først ved kategorieåpning — <img loading="lazy">.

5. Tre-sekunders-regelen

LCP under 3 s. Test med begrenset 3G — café-Wi-Fi er sjelden bedre. JS-bundle under 150 KB.

6. Maks 4-5 farger

Merkefarge + sekundær + aksent + svart + hvit. Allergenikoner med form OG farge — 1 av 12 menn er rød-grønn fargeblind.

7. Énhåndstest

Kritiske handlinger i nedre halvdel — tommelzone-regelen. Mobile-first plattformer som thMenu følger dette som standard.

En godt innstilt mobil meny hever bestillinger 12-18%. Dårlig innstilt sender gjesten tilbake til kelneren og sletter den digitale fordelen.

Var dette nyttig? Del det.