7 gouden regels voor mobiel menuontwerp

Een mobiel menu is geen verkleinde desktopkaart. Kleiner scherm, vaak trage verbinding en eenhandig gebruik vragen om eigen ontwerpbeslissingen. Deze zeven regels beïnvloeden direct het gemiddelde bonbedrag en de gasttevredenheid.

1. Bodytekst niet onder 16 px

16 px (1 rem) is de ondergrens. Eronder zoomt de gast handmatig en de navigatie breekt. Aanbeveling: body 16-18 px, productnaam 18-22 px, categorietitel 22-28 px.

2. Tikdoelen minimaal 44 × 44 px

Apple HIG en Google Material vragen 44 × 44. Kleiner = 15-23% meer mis-tikken. Tussen tabs minstens 8 px ruimte.

3. Hiërarchie als F-patroon

Mobiel lezen is verticaal. Aanbevelingen helemaal bovenaan, categoriebalk sticky. Snapt de gast de logica niet binnen 5 seconden, dan wint de terugknop.

4. WebP/AVIF en lazy loading

WebP is 30% lichter dan PNG. AVIF nog 15-20% kleiner. Afbeeldingen laden pas bij openen van de categorie — <img loading="lazy">.

5. Drie-secondenregel

LCP onder 3 s. Test met getrottelde 3G — café-wifi is zelden beter. JS-bundel onder 150 KB.

6. Maximaal 4-5 kleuren

Merkkleur + secundair + accent + zwart + wit. Allergeniconen via vorm én kleur — 1 op de 12 mannen heeft rood-groen-kleurenblindheid.

7. Eenhandige test

Kritische acties in de onderste helft — duimzoneregel. Mobile-first platforms zoals thMenu volgen deze patronen standaard.

Een goed afgesteld mobiel menu tilt orders 12-18%. Slecht afgesteld stuurt de gast terug naar de ober en wist het digitale voordeel uit.

Was dit nuttig? Deel het.