Kategori Ayırıcılar: Çizgi mi, Beyaz Alan mı, Renk Bloğu mu Kullanmalı?

İzmir Çeşme'de 26 masalı bir meze evi, dijital menüsündeki kategori başlıklarını ince gri çizgilerle ayırıyordu. Bu çizgileri 24 piksel beyaz alana çevirdiklerinde sayfada kalma süresi yüzde 22 arttı ve kullanıcı scroll davranışı belirgin biçimde düzenli hale geldi. Ayırıcı tercihi, sandığınızdan çok daha fazla satışı etkiler.

Üç ayırıcı tipi ve psikolojik etkisi

Çizgi-ayırıcılar görsel olarak sade görünür ama beyin için "bariyer" sinyalidir; kullanıcı her çizgide mikro-duraklar. Beyaz alan ise nefes alanıdır — Gestalt yakınlık ilkesine göre öğeler kendiliğinden grup oluşturur ve okuma akıcılaşır. Renk bloğu en güçlü dikkat çekicidir; aşırı kullanıldığında menü pazar tezgâhına döner.

Material Design 3 rehberi, çizgi-divider'ı yalnızca yoğun veri tablolarında (envanter, fatura) önerir; menü gibi keşif odaklı arayüzlerde 16–32 piksel beyaz alan birincil seçim olmalıdır.

Hangi kategoride hangisini kullanmalı?

Tek bir mutfak tarzı varsa (örneğin sadece kahve) beyaz alan yeterlidir. Çoklu mutfak veya çok seviyeli hiyerarşi varsa renk bloğu öne çıkmalı — ama maksimum üç tonla sınırlı tutun.

• Beyaz alan (24–32 px): aynı kategorideki ürünleri ayırmak için.
• İnce çizgi (1 px, opacity 0.1): alt-grup gerektiğinde, mesela "soğuk mezeler / sıcak mezeler".
• Renk bloğu: ana kategori başlangıçları için (mezeler, ana yemekler, tatlılar).

A/B testleri ve scroll verileri

Çeşme'deki o meze evi, dört hafta süren A/B testinde çizgi versiyonuna kıyasla beyaz alanlı versiyonda scroll derinliği yüzde 18 arttığını, ortalama oturum süresinin 52 saniyeden 64 saniyeye çıktığını gördü. Sepete ekleme oranı da yüzde 9 yükseldi.

İstanbul Karaköy'de bir cafe ise renk bloğu denemesinde — kategori başlıklarına opaklığı düşük tematik fon renkleri ekledi — bounce rate'i yüzde 14 düşürdü. Renk bloğu doğru kullanıldığında işe yarar.

Sıkça Sorulanlar

Üç tipi karıştırabilir miyim? Evet ama bir hiyerarşi kuralı belirleyin: renk bloğu en üst, beyaz alan orta, çizgi en alt seviye.

Karanlık temada da geçerli mi? Evet; sadece çizgi opaklığını 0.08–0.12 aralığında tutun, parlak çizgi kullanıcının gözünü yorar.

Erişilebilirlik için ne yapmalıyım? Renk bloğunda WCAG AA kontrast oranı (4.5:1) sağlayın; ayrıca renk dışı bir görsel ipucu (ikon veya başlık ağırlığı) ekleyin.

Faydalı buldunuz mu? Paylaşın.