7 gyllene regler för mobil menydesign

En mobil meny är inte en hopkrympt desktopmeny. Liten skärm, ofta långsam anslutning och enhandsanvändning kräver egna designbeslut. Dessa sju regler påverkar direkt snittnotan och gästens nöjdhet.

1. Brödtext aldrig under 16 px

16 px (1 rem) är gränsen. Under den zoomar gästen manuellt och navigeringen rasar. Rekommendation: body 16-18 px, rättens namn 18-22, kategorititel 22-28.

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

Apple HIG och Google Material kräver 44 × 44. Mindre = 15-23% fler feltryck. Mellan flikar minst 8 px.

3. Hierarki som F-mönster

Mobilläsning är vertikal. Rekommendationer högst upp, kategoribar sticky. Förstår inte gästen logiken på 5 sekunder, vinner tillbaka-knappen.

4. WebP/AVIF och lazy loading

WebP är 30% lättare än PNG. AVIF ytterligare 15-20% mindre. Bilder laddas först vid kategorieöppning — <img loading="lazy">.

5. Tresekundersregeln

LCP under 3 s. Testa med begränsad 3G — café-Wi-Fi är sällan bättre. JS-bundle under 150 KB.

6. Max 4-5 färger

Märkesfärg + sekundär + accent + svart + vitt. Allergenikoner med form OCH färg — 1 av 12 män är rödgrön-färgblind.

7. Enhandstest

Kritiska åtgärder i nedre halvan — tumzonregeln. Mobile-first-plattformar som thMenu följer detta som standard.

En välinställd mobil meny höjer beställningar 12-18%. Dåligt inställd skickar gästen tillbaka till servitören och raderar den digitala fördelen.

Var detta hjälpsamt? Dela det.