7 goldene Regeln für Mobile-Menü-Design

Ein mobiles Menü ist keine geschrumpfte Desktop-Karte. Kleiner Bildschirm, oft langsame Verbindung und Bedienung mit einer Hand zwingen zu eigenen Designentscheidungen. Diese sieben Regeln betreffen den durchschnittlichen Bonwert und die Zufriedenheit direkt.

1. Fließtext nie unter 16 px

16 px (1 rem) ist die Untergrenze. Darunter zoomen Nutzer manuell — und das bricht die Kategorien-Navigation. Empfehlung: 16-18 px Body, 18-22 px Produktname, 22-28 px Kategorieüberschrift.

2. Tippziele mindestens 44 × 44 px

Apple HIG und Google Material verlangen 44 × 44 px Mindestgröße. Kleiner heißt 15-23% mehr Fehltipps. Zwischen Kategorie-Tabs mindestens 8 px Abstand.

3. Hierarchie als F-Pattern

Mobiles Lesen ist vertikal. Empfehlungen ganz oben, Kategorienleiste sticky. Schafft der Gast nicht in 5 Sekunden Orientierung, gewinnt der Zurück-Button.

4. WebP/AVIF und Lazy Loading

WebP ist 30% kleiner als PNG. AVIF noch einmal 15-20% kleiner. Bilder erst bei Kategorienöffnung laden — <img loading="lazy">.

5. Drei-Sekunden-Regel

LCP unter 3 s. Testen Sie unter gedrosseltem 3G — Café-WLAN ist selten besser. JavaScript-Bundle unter 150 KB.

6. Maximal 4-5 Farben

Markenfarbe + Sekundär + Akzent + Schwarz + Weiß reichen. Allergen-Icons mit Form UND Farbe — Rotgrün-Schwäche betrifft jeden 12. Mann.

7. Einhand-Test

Wichtige Aktionen in die untere Hälfte — Daumenzonen-Regel. Mobile-First-Plattformen wie thMenu folgen diesen Mustern; bei eigenem Theme bitte verifizieren.

Ein sauber abgestimmtes Handy-Menü hebt Bestellungen um 12-18%. Ein schlecht abgestimmtes treibt Gäste zurück zum Kellner.

Hilfreich? Teilen Sie es.