7 złotych zasad projektowania mobilnego menu

Mobilne menu to nie pomniejszone menu desktopowe. Mały ekran, często wolne łącze i obsługa jedną ręką wymuszają własne decyzje projektowe. Te siedem zasad bezpośrednio wpływa na średni rachunek i satysfakcję gościa.

1. Tekst nigdy poniżej 16 px

16 px (1 rem) to próg. Poniżej gość ręcznie powiększa i nawigacja się sypie. Zalecenie: body 16-18 px, nazwa dania 18-22 px, tytuł kategorii 22-28 px.

2. Cele dotykowe minimum 44 × 44 px

Apple HIG i Google Material wymagają 44 × 44. Mniej = 15-23% więcej błędnych dotknięć. Między zakładkami min. 8 px.

3. Hierarchia jak F-pattern

Czytanie mobilne jest pionowe. Rekomendowane dania na samej górze, pasek kategorii sticky. Jeśli logika nie jest jasna w 5 sekund, wygrywa przycisk wstecz.

4. WebP/AVIF i lazy loading

WebP jest 30% lżejszy od PNG. AVIF jeszcze 15-20% mniej. Obrazy ładują się tylko przy otwarciu kategorii — <img loading="lazy">.

5. Reguła trzech sekund

LCP poniżej 3 s. Testuj na ograniczonym 3G — Wi-Fi kawiarni rzadko jest lepsze. Bundle JS poniżej 150 KB.

6. Maks 4-5 kolorów

Kolor marki + drugorzędny + akcent + czarny + biały. Ikony alergenów kształtem ORAZ kolorem — 1 na 12 mężczyzn ma daltonizm czerwono-zielony.

7. Test jedną ręką

Krytyczne akcje w dolnej połowie — reguła strefy kciuka. Platformy mobile-first jak thMenu domyślnie tego pilnują.

Dobrze dostrojone mobilne menu podnosi zamówienia o 12-18%. Źle dostrojone odsyła gościa do kelnera i niweluje przewagę cyfrową.

Czy to było pomocne? Udostępnij.