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

İzmir Çeşme'de 26 masalı bir meze evi, kategoriler arasındaki ince çizgi-ayırıcıları 24 piksel beyaz alana çevirdiğinde sayfada kalma süresi %22 arttı, scroll davranışı çok daha düzenli hale geldi. Bu yazıda hangi ayırıcı tipinin ne zaman çalıştığını veriye dayalı inceliyoruz.

Üç Ayırıcı Tipi: Pros ve Cons

Menü tasarımında en yaygın üç teknik var: çizgi (1-2px solid), beyaz alan (16-32px boşluk) ve renk bloğu (kategori başına dolu arka plan). Her birinin görsel ağırlığı farklı — çizgi en hafif ama gözü en çok yorar, beyaz alan en doğal ayrım, renk bloğu en güçlü hiyerarşik vurgu.

Material Design 3 ilkesi: beyaz alan en güçlü ayırıcıdır. Çizgi sadece liste içi sıralı içerikte (örneğin allerjen tablosu) okunabilirliği artırır. Renk bloğu ise kullanıcının dikkatini bir kategoriye odaklamak istediğinizde (örn. "Şefin Önerileri") kullanılır.

Beyaz Alan Neden Kazanır

Çeşme meze evi vakasında ince çizgi (1px #E5E7EB) yerine 24px dikey boşluk uygulandı. Sonuç: kullanıcı her kategoriyi ayrı bir "blok" olarak algıladı, göz hareketi natural F-pattern'e oturdu. Scroll heatmap'inde duraklamalar düzenli aralıklara dağıldı — eski tasarımda kullanıcılar çizgileri "engel" olarak algılayıp hızla geçiyordu.

Ayrıca beyaz alan tipografi nefes verir: başlık ve gövde metni arasındaki kontrast doğal olarak yükselir, ek bir görsel öğe gerekmez. Mobilde daha da kritik çünkü ekran küçük, her piksel anlamlı.

Renk Bloğunu Ne Zaman Kullanmalı

Renk bloğu üç senaryoda doğru seçimdir: (1) Özel kampanya kategorileri (örn. "Bu Hafta İndirimde"), (2) marka kimliğini güçlendirmek isteyen restoranlarda kategori başlığının arkasında ince tint, (3) çok uzun menülerde (50+ ürün) ana bölüm ayrımı için.

• Kontrast oranı en az 4.5:1 olmalı — WCAG AA uyumluluğu için.
• Doygunluğu %15-25 aralığında tut, tam doygun renk göz yorar.
• Aynı sayfada en fazla 2 farklı renk bloğu kullan, daha fazlası kakofoni yaratır.

FAQ

Çizgi ayırıcı hiç kullanılmamalı mı? Hayır — beslenme tablosu, allerjen listesi gibi tablo benzeri içerikte 1px çizgi okunabilirliği artırır. Sadece kategori ayrımında beyaz alan tercih edilmeli.

Mobilde beyaz alan ne kadar olmalı? 16-24px ideal. 32px üstü sayfa fazla uzar, kullanıcı kaybeder. 16px altı ayrım hissedilmez.

Renk bloğu SEO'yu etkiler mi? Etkilemez — Google Lighthouse arka plan rengi değil, contrast ratio ve kullanılabilirlik puanı verir. CSS ile uygulanan blok HTML semantiğini bozmaz.

Faydalı buldunuz mu? Paylaşın.