Görsel Hiyerarşi: Boyut, Renk ve Boşluk Hangi Sırayı Kurar
Bir arayüzde gözün nereye gittiği tasarımcının kararıdır, kullanıcının tercihi değil. Görsel hiyerarşi de bu kararın adı: hangi öge ilk turda görülecek, hangisi ikinci turda. Boyut, kontrast ve boşluk bu sırayı kurmanın üç ayrı yolu, ancak üçü aynı işi yapmaz ve birbirinin yerine geçmez.
Boyut üç basamak taşır, fazlası taşımaz
Klasik başlangıç üç kademedir: başlık 32 piksel ve üzeri, alt başlık 18-24, gövde metni 14-16. Bu ölçüler çoğu içerik sayfasında işini yapar. Peki ya elinizde bölüm başlığı, kart başlığı, etiket, gövde ve dipnot gibi beş ayrı metin türü varsa?
Her türe kendi boyutunu vermek ilk akla gelen çözüm, ve genelde yanlış olan çözüm. Basamaklar birbirine yaklaştıkça fark algılanmaz hale gelir: 18 piksel ile 20 piksel yan yana geldiğinde kullanıcı iki kademe görmez, tutarsızlık görür. Boyut kademesini üçte, en çok dörtte tutup kalan ayrımları font kalınlığı ve üstteki boşlukla kurmak daha dayanıklı. Etiketi küçültmek yerine harf aralığını açıp büyük harfe çevirmek, aynı boyutta kalarak ayrı bir katman açar.
Renk vurgular, sırayı tek başına kurmaz
Canlı bir renk ögeyi öne çeker. İki canlı renk yan yana durduğunda ise hangisinin önce okunacağı belirsizleşir, çünkü renk bir sıra bildirmez, sadece “buraya bak” der. Ana eylem için tek doygun renk, geri kalan her şey için nötr tonlar: sıkıcı görünen bu kural sayfadaki tek net davranışı da üretir.
Sık tekrarlanan “ikincil ögeleri soluklaştırın” tavsiyesi metin söz konusu olduğunda bir duvara çarpıyor. WCAG, normal boyutlu metin için beyaz zeminde en az 4,5:1 kontrast ister (24 piksel ya da 18,66 piksel kalın ve üzeri için 3:1). Beyaz üstünde #767676 grisi 4,54:1 ile sınırı geçer, bir ton açığı olan #777777 4,48:1 ile geçmez. Yani ikincil metni soluklaştırma payınız neredeyse yok. Soluklaştırmayı metinde değil, ayırıcı çizgide ya da arka plan dolgusunda yapın.
Bir de renk körlüğü var. Hatayı yalnızca kırmızı çerçeveyle bildiren bir form, kırmızıyı ayırt etmeyen kullanıcıya hiçbir şey bildirmez. Rengin yanına ikon ve metin koymak bunu çözer.
Boşluk mu, kutu mu
Gruplama boyut ve renkten önce çalışır. İnsan birbirine yakın duran ögeleri ilişkili varsayar, bu varsayımı da başlıkları okumadan yapar. Pratikte işe yarayan kural tek: bir grubun içindeki boşluk, gruplar arasındaki boşluktan belirgin şekilde küçük olsun. Kart içindeki satır aralığı 8 pikselse kartlar arası 24 piksel olabilir, yeter ki aradaki oran gözle fark edilsin.
Çerçeve ve renkli arka plan da grup kurar, ama bunlar son araç. Her bölümü kutuya aldığınızda kutular kendi aralarında yeni bir sıralama sorunu açar, çünkü artık hangi kutunun önce okunacağına da karar vermek gerekir. Boşlukla çözülebilen bir grubu kutuya almak, bedava gibi görünen ama her ekran boyutunda bakım isteyen bir katman ekler.
Göz kısma testi
Tasarım bitince ekrandan uzaklaşıp gözlerinizi kısın, ya da geliştirici araçlarında gövdeye filter: blur(6px) verin. Detay gider, leke kalır. Kalan lekelerin içinde ilk göze çarpan şey sayfanın asıl mesajı değilse hiyerarşi kurulmamıştır.
Bu testi ilk turda tıklama ısı haritalarından daha güvenilir bulurum. Isı haritası kullanıcının ne yaptığını gösterir, bunun için de trafik ve haftalar gerekir; göz kısma testi tasarımın ne önerdiğini henüz tek kullanıcı görmemişken on saniyede gösterir. Isı haritasının sırası sonra.
Mobilde hiyerarşi sıraya dönüşür
Masaüstünde yan yana duran iki öge eşit ağırlıkta okunabilir. Tek kolona indiğinde bu eşitlik kaybolur: üstteki önce okunur, alttaki ikinci olur. Peki hangisi üstte kalacak? Bu kararı kırılma noktasında bilinçli vermek gerekir, kaynak kodundaki sıralamaya bırakmak değil, çünkü HTML sırası çoğu zaman masaüstü yerleşimine göre yazılmıştır. Mobil düzeni açıp göz kısma testini bir kez daha yapmak o sırayı hemen görünür kılar.