Z-Kuvion Visuaalinen Hierarkia: Näin Ohjaat Asiakkaan Katsetta Menussa

30 pöydän alueellinen ravintola Konyan Mevlanan pyhäkön lähellä nosti "katso menu → tilaa" -funnelinsa 18% pelkästään sovittamalla digitaalisen menun Z-kuvioon. Ei uutta teknologiaa — vain hierarkia, joka seuraa katsetta.

Z-Kuvio vs F-Kuvio

Nielsen Normanin silmänliiketutkimukset tunnistavat kaksi lukukuviota. F-kuvio tekstipainotteisilla sivuilla. Z-kuvio visuaalisilla laskeutumissivuilla ja digitaalisissa menuissa.

Z-reitti: ylävasen (hero) → yläoikea (tagline) → diagonaalisesti alavasempaan (kuvaus) → alaoikea (CTA "Tilaa nyt"). Liipaisin Z:n päässä kohtaa silmän valmiina toimintaan.

Toteutus Konyassa

Neljä Z-ankkuria kategoriasivulla:

1) Ylävasen: etli ekmek -kuva + "Konyan keittiö". 2) Yläoikea: kategoria-sirut. 3) Keskivasen: 2 lausetta perintötekstiä. 4) Alaoikea: sticky CTA. Aika tilaukseen laski 22 sekuntia; konversio +18%.

Kolme Ilmaista Testiä

Silmien siristämistesti (neljä lohkoa näkyy?), 5-sekunnin testi (mitä muistat?), Microsoft Clarity -lämpökartta (seuraako katse oikeasti Z:tä?). Jos diagonaali puuttuu, keskialueen kontrasti tai koko on heikko.

UKK

Toimiiko Z-kuvio mobiilissa? Vähemmän — pystyvieritys hallitsee, F-kuvio sopii paremmin. Z on optimaalinen tabletilla/työpöydällä, jossa koko Z mahtuu yhteen viewportiin.

Entä RTL-kielet kuten arabia? Z peilautuu: alkaa yläoikealta, päättyy alavasempaan. thMenu lisää dir="rtl" automaattisesti.

CTA alavasempaan oikean sijaan? Ei — se on sokea piste. Klikit laskevat 30–40%, koska silmä on jo "sulkenut" Z:n oikealla.

Oliko tästä hyötyä? Jaa se.