Z-Minta Vizuális Hierarchia: Hogyan Vezessük a Vendég Tekintetét az Étlapon

Egy 30 asztalos regionális étterem a Mevlana szentély közelében Konyában 18%-kal növelte "menü megtekintése → rendelés" funnelét pusztán azzal, hogy digitális étlapját a Z-mintához igazította. Nem új technológia — csak a tekintetet követő hierarchia.

Z-Minta vs F-Minta

A Nielsen Norman szemkövető vizsgálatai két olvasási mintát azonosítottak. Az F-minta szövegnehéz oldalakon jelenik meg. A Z-minta vizuális landing oldalakon és digitális étlapokon dominál.

Z útvonal: bal-felül (hős) → jobb-felül (tagline) → átló a bal-alulra (leírás) → jobb-alul (CTA "Rendelés"). A trigger a Z végén cselekvésre kész szemet talál.

Megvalósítás Konyában

Négy Z-horgony a kategória oldalon:

1) Bal-felül: etli ekmek fotó + "Konyai konyha". 2) Jobb-felül: kategória chipek. 3) Középen-balra: 2-mondatos örökség szöveg. 4) Jobb-alul: sticky CTA. A rendelésig eltelt idő 22 másodperccel csökkent; konverzió +18%.

Három Ingyenes Teszt

Hunyorgós teszt (négy blokk látható?), 5-másodperces teszt (mire emlékszel?), Microsoft Clarity hőtérkép (valóban követi a tekintet a Z-t?). Ha hiányzik az átló, a középső blokk kontrasztja vagy mérete gyenge.

GYIK

Működik a Z-minta mobilon? Kevésbé — a függőleges görgetés dominál, az F-minta jobban illik. A Z tableten/asztalin optimális, ahol a teljes Z egy viewportba fér.

És az RTL nyelvek mint az arab? A Z tükröződik: jobb-felülről indul, bal-alulra ér. A thMenu automatikusan alkalmazza a dir="rtl"-t.

CTA bal-alulra jobb-alul helyett? Nem — az a holt pont. A kattintások 30–40%-kal esnek, mert a szem már "lezárta" a Z-t jobbra.

Hasznosnak találtad? Oszd meg.