Arayüzde Gruplama: Renk, Boşluk ve Çizgi Aynı Anda Gerekli mi?

Gmail'i açtığınızda ekran birkaç bölgeye ayrılmış durumda: solda etiketler, ortada ileti listesi, üstte arama. Bu sınırların ilginç yanı, çoğunun tek bir yöntemle değil, üst üste binen üç yöntemle çizilmiş olması. Renk, boşluk ve ince çizgi aynı anda çalışıyor. Peki hepsi gerçekten gerekli mi?

Aynı sınır kaç kez çizilmeli

Gestalt ilkelerinde yakınlık ile ortak bölge farklı iki mekanizmadır. Boşluk, öğeleri birbirine yaklaştırıp aradaki mesafeyi açarak grup kurar. Arka plan tonu ise grubun etrafına görünmez bir kutu çizerek aynı işi başka yoldan yapar. İkisini üst üste koyduğunuzda ikinci sinyal, birincinin zaten söylediğini tekrarlar.

Zarar verir mi? Doğrudan hayır. Ama her ek sinyal, sonradan değiştirilmesi gereken bir karar daha demektir ve arayüz büyüdükçe bu kararlar birbiriyle çelişmeye başlar.

Gmail'in sol sütununa dikkatli bakın: gruplar arasında ayırıcı çizgi yok, sadece artırılmış boşluk var. Çizgi asıl olarak farklı işlev sınıflarının değiştiği yerde beliriyor, mesela ileti listesiyle üstündeki araç çubuğu arasında. Yani çizgi burada gruplar arası bir işaret değil, bağlamlar arası bir işaret.

Boşluk mu, çizgi mi

Ayrımı genelde boşlukla kurarım, çizgiyi ancak boşluk yetmediğinde eklerim. Sebep estetik değil bakım maliyeti: boşluk tek bir gap değeriyle yönetilir ve kırılım noktalarında ölçeklenir, çizgi ise her yeni bileşende yeniden yerleştirilmesi gereken bir sınırdır.

Boşluğun yetmediği yer bellidir. Kaydırılabilir bir listede içerik alt sınırın altından akıp gider; orada bir çizgi ya da sabit başlığın gölgesi, sınırın nerede olduğunu söyler. Sabit yükseklikli, kaydırmayan bir panelde aynı çizgi çoğunlukla sadece gürültüdür.

Çizgi çekeceksen görünsün

Açık gri üzerine bir ton daha açık gri çizgi, tasarım dosyasında zarif durur. Aynı çizgi parlak ışık altındaki bir dizüstü ekranında yok olur.

Ayrım yalnızca çizgiyle anlatılıyorsa ve o çizgi olmadan düzen anlaşılmıyorsa, WCAG'nin metin dışı kontrast kuralı 3:1 bekler. Salt süsleme amaçlı ayırıcılar bu kapsamın dışında kalır, ama o zaman da onları kaldırdığınızda hiçbir şey kaybetmemeniz gerekir. Pratik test şu: çizgiyi geçici olarak silin. Düzen hâlâ okunuyorsa çizgi baştan gereksizdi, okunmuyorsa çizgiyi görünür yapın. İkisinin arasında bir yer yok.

Mobilde ne değişiyor

Mobilde boşluk pahalı, dolayısıyla masaüstünde boşlukla kurduğunuz gruplamayı olduğu gibi taşıyamazsınız. Peki yerine ne geçiyor? Çoğunlukla dokunma hedefinin kendisi. 44 piksel civarındaki satır yüksekliği tek başına bir ritim üretir; grup sınırı için ayrıca boşluk ayırmak yerine küçük bir bölüm başlığı koymak hem daha az yer kaplar hem de ekran okuyucuya gezinilebilir bir yapı bırakır.