Z-Pattern Görsel Hiyerarşi: Müşterinin Gözünü Menüde Nasıl Yönlendirirsiniz?

Konya Mevlana yakınındaki 30 masalı yöresel mutfak, dijital menüsündeki "menü incele" → "sipariş ver" funnel'ını Z-pattern'a hizalayınca conversion'ını %18 yükseltti. Sebep teknoloji değildi; gözün hareketini eserin önüne koydular.

Z-Pattern Nedir, F-Pattern'den Farkı

Nielsen Norman Group'un eye-tracking araştırmaları iki temel okuma kalıbı tanımlar: F-pattern uzun metin ağırlıklı sayfalarda (blog, makale) görülür; göz sol kenar boyunca aşağı iner, başlıklarda yatay tarama yapar. Z-pattern ise minimal metin + güçlü görsel olan landing/menü sayfalarında devreye girer.

Z hareketi şu rotayı izler: üst-sol köşeden (logo/hero görsel) üst-sağa (tagline veya kategori), oradan diagonal olarak sol-alta (açıklama veya öne çıkan ürün), son olarak sağ-alta (CTA — "Sipariş Ver"). Menünüzü bu sıraya hizaladığınızda göz, doğal akışında karar verme noktasına ulaşır.

Konya Mevlana Restoranındaki Uygulama

30 masalı yöresel mutfak, dijital menü kategori sayfasını yeniden tasarladı:

1) Üst-sol: Etli ekmek hero görseli + "Konya Mutfağı" tagline. 2) Üst-sağ: Kategori chip'leri (Çorbalar, Et Yemekleri, Tatlılar). 3) Sol-orta: Tarihi açıklama (Mevlana mutfağı, 700 yıllık miras). 4) Sağ-alt: Sticky "Menüye Git" CTA butonu.

Test Etmek için 3 Hızlı Adım

Z-pattern'ı doğrulamak için pahalı eye-tracking lab'a ihtiyacınız yok. Üç bedava yöntem:

1) Squint test: Ekrana gözlerinizi kısarak bakın. Sadece 4 büyük blok görünmeli (hero, kategoriler, açıklama, CTA). Daha fazlası kafa karışıklığı yaratır. 2) 5 saniye testi: Bir arkadaşa ekranı 5 saniye gösterip kapatın. "Ne hatırlıyorsun?" Cevap yemek + restoran ismi + "sipariş ver" değilse hiyerarşi zayıf. 3) Heatmap araçları: Microsoft Clarity (bedava) veya Hotjar ile gerçek kullanıcı davranışını ölçün; Z şeklinin oluştuğunu doğrulayın.

FAQ

Z-pattern mobil menüde de çalışır mı? Mobilde dikey scroll baskın olduğu için F-pattern (sol kenardan aşağı) daha uygundur. Z-pattern özellikle tablet ve masaüstü landing sayfalarında işe yarar.

Arapça/İbranice gibi RTL dillerde nasıl? Z tersine döner: üst-sağdan başlayıp sol-alta iner. thMenu otomatik dir="rtl" uygular; hiyerarşi blokları kendiliğinden ayna olur.

CTA butonunu sol-alta koymak işe yarar mı? Hayır — Z'nin son durağı sağ-alttır. Sol-alttaki CTA göz kapanmış noktada kalır; tıklama oranı %30-40 düşer.

Faydalı buldunuz mu? Paylaşın.