Görsel Hiyerarşi: Sayfada Neyin Önce Görüleceğine Karar Vermek
Bir sayfayı açtığınızda gözünüz her şeyi aynı anda görmez, bir sıra izler. Görsel hiyerarşi o sırayı tasarımcının belirlemesidir: boyut, kontrast, boşluk ve konum, hangi bilginin ilk okunacağına karar verir. Sıra kurulmazsa kullanıcı kendi sırasını uydurur, çoğu zaman da yanlış yerden başlar.
Hiyerarşiyi kuran dört değişken
Görsel hiyerarşi soyut bir estetik kaygı değil, birkaç ölçülebilir değişkenin toplamı. Boyut sırayı belirler: bir metin komşusundan belirgin biçimde büyükse önce o okunur. Kontrast, boyutun yapamadığını yapar; küçük ama koyu bir etiket, büyük ama soluk bir başlıktan önce fark edilebilir. Boşluk gruplama kurar, yakın duran öğeler ilişkili sayılır. Konum ise ilk üçünü ezebilir, çünkü ekranın üst şeridi hiçbir şey yapmadan zaten öncelikli.
Bu dördü birbiriyle yarışabilir. Aynı sayfada beş öğeyi birden vurguladığınızda hiçbiri vurgulanmamış olur; hiyerarşi bir sıralama olduğu için her şeyin birinci olması mümkün değil. Bir ekranda önce görülecek tek bir öğe seçin, ikinciyi de seçin, gerisini bilinçli olarak geride bırakın.
Z ve F desenleri ne anlatır
Z deseni az metinli, birkaç öğeli sayfalar için tarif edilir: göz sol üstten sağ üste gider, çapraz iner, alt şeridi tarar. F deseni ise yoğun metinli sayfalarda görülür. Kullanıcı ilk satırları yatay okur, aşağı indikçe sol kenara yaslanıp yalnızca satır başlarını tarar. Bu desenin kaynağı Nielsen Norman Group'un göz izleme çalışmaları.
Çoğu yazının buradan çıkardığı sonuç şu: F deseni var, o halde içeriği F'ye göre yerleştirin. Bu ters okuma. F deseni bir okuma tercihi değil, bir kaçış davranışı; kullanıcı taranabilir bir yapı bulamadığında satır başlarından anlam devşirmeye çalışır. Sayfanızda F deseni gözlüyorsanız düzeltilecek şey göz hareketi değil, metnin kendisi. Alt başlık ekleyin, paragrafı kısaltın, ilk cümleye asıl bilgiyi yazın; desen kendiliğinden dağılır.
Hiyerarşi işaretlemede de var
Görsel sıra ile belge yapısı iki ayrı katman ve ikisinin uyuşması gerekir. Ekran okuyucu kullanan biri sayfayı gözle taramaz, başlık listesiyle gezinir. O listede h2'den sonra h4 geliyorsa ya da tek satırlık bir uyarı metni sırf büyük görünsün diye h1 yapılmışsa, sizin kurduğunuz hiyerarşi o kullanıcıya hiç ulaşmaz. Başlık seviyesini içeriğin kapsamı belirlesin, punto ihtiyacını CSS çözsün (başlık etiketini boyut ayarı gibi kullanan tema sayısı hâlâ şaşırtıcı).
Kurduğunuz sırayı sınamak
En ucuz kontrol bulanıklaştırmak. Gözlerinizi kısıp baktığınızda hâlâ ayırt edebildiğiniz öğeler, kullanıcının ilk saniyede göreceği öğelerdir. Sıra beklediğiniz gibi çıkmıyorsa sorun renk paletinde değil, kontrast ve boyut dağılımında.
İkincisi beş saniye testi: birine sayfayı beş saniye gösterip kapatın, sonra ne hatırladığını sorun. Hatırladığı şey sizin birinci sıraya koyduğunuz şey değilse hiyerarşi çalışmıyor demektir. Bu testi beş kişiyle yapmak, analitikte haftalarca veri biriktirmekten çok daha hızlı cevap verir.