A mobil étlap tervezésének 7 aranyszabálya

Egy mobil étlap nem egy lekicsinyített asztali étlap. A kis képernyő, gyakran lassú kapcsolat és az egykezes használat saját tervezési döntéseket kíván. Ez a hét szabály közvetlenül befolyásolja az átlagos rendelést és az elégedettséget.

1. Törzsszöveg sosem 16 px alatt

16 px (1 rem) a határ. Alatta a vendég kézi nagyítást használ, a hierarchia szétesik. Ajánlott: törzs 16-18 px, termék 18-22 px, kategória 22-28 px.

2. Érintési célok minimum 44 × 44 px

Apple HIG és Google Material 44 × 44 px-t kér. Kisebb = 15-23%-kal több téves érintés. Fülek között min. 8 px hely.

3. F-mintás hierarchia

A mobilolvasás függőleges. Ajánlott ételek a legtetejére, kategória-sáv sticky. Ha a logika nem világos 5 mp-en belül, a vissza gomb nyer.

4. WebP/AVIF és lazy loading

WebP 30%-kal könnyebb mint PNG. AVIF még 15-20% kisebb. Képek csak kategória megnyitásakor töltődnek — <img loading="lazy">.

5. Három másodperces szabály

LCP 3 mp alatt. Tesztelj korlátozott 3G-vel — a kávézó Wi-Fi-je ritkán jobb. JS bundle 150 KB alatt.

6. Maximum 4-5 szín

Márkaszín + másodlagos + kiemelés + fekete + fehér. Allergén ikonok formával ÉS színnel — 12 férfiból 1 vörös-zöld színtévesztő.

7. Egykezes teszt

Kritikus akciókat az alsó felébe — hüvelykujj-zóna szabály. A thMenu-höz hasonló mobile-first platformok ezt alapértelmezésben követik.

Jól hangolt mobil étlap 12-18%-kal növeli a rendeléseket. Rosszul hangolva a vendég visszatér a pincérhez és eltűnik a digitális előny.

Hasznosnak találtad? Oszd meg.