Görsel Hiyerarşi Nedir?
Kısa tanım
Görsel hiyerarşi, bir sayfadaki öğelerin önem sırasını boyut, renk, kontrast, konum, yakınlık ve boşluk gibi görsel araçlarla düzenleyerek kullanıcının gözünü önce en önemli bilgiye, sonra diğerlerine yönlendirme tekniğidir. Kullanıcıların çoğu sayfayı satır satır okumak yerine taradığı için, net bir hiyerarşi sayfanın birkaç saniyede anlaşılmasını ve ana eylemin kolayca bulunmasını sağlar.
Diğer adları: visual hierarchy, beyaz alan, whitespace, negatif alan, görsel ağırlık
Gözü yönlendiren araçlar
Bir sayfaya bakan kişi bilinçli bir okuma sırası seçmez; göz önce en "ağır" öğeye gider. Tasarımcının işi bu ağırlığı bilerek dağıtmaktır:
- Boyut: Büyük olan önce görülür. Başlık ile gövde metni arasındaki fark yeterince belirgin değilse ikisi aynı düzeyde algılanır.
- Kalınlık ve renk: Kalın yazı ve doygun renk dikkat çeker. Sayfada tek bir vurgu rengi varsa ve yalnızca ana eylemde kullanılıyorsa, bu renk kendiliğinden bir yön işaretine dönüşür.
- Kontrast: Çevresinden ayrışan öğe öne çıkar. İkincil bilgiyi biraz soluklaştırmak bir hiyerarşi aracıdır; ancak okunabilirlik sınırının altına inmemelidir (bkz. renk kontrastı).
- Konum: Soldan sağa okunan dillerde sol üst bölge ve sayfanın ilk görünen alanı genellikle daha çok ilgi görür.
- Yakınlık ve hizalama: Birbirine yakın duran öğeler aynı grubun parçası olarak algılanır. Ortak bir grid sistemi bu ilişkileri tutarlı kılar.
- Tekrar: Aynı biçimdeki öğeler aynı türde bilgi olarak okunur; bu yüzden kart listeleri tutarlı görünmelidir.
Beyaz alan (whitespace) boş yer değildir
Beyaz alan, öğelerin arasında ve çevresinde bırakılan boşluktur; rengi beyaz olmak zorunda değildir. İki ölçekte çalışır: mikro beyaz alan satır aralığı, harf aralığı ve bir etiket ile alanı arasındaki mesafedir; makro beyaz alan bölümler, kolonlar ve kartlar arasındaki boşluktur.
Beyaz alan gruplamanın en ucuz yoludur. Bir form etiketini kendi alanına, bir önceki alandan daha yakın konumlandırmak, kutu veya çizgi eklemeden hangi etiketin hangi alana ait olduğunu anlatır. Bir öğenin etrafındaki boşluğu artırmak da onu, boyutunu büyütmeden öne çıkarır. "Ekranda boş yer kalmasın" baskısıyla her boşluğun doldurulması, hiyerarşiyi ilk bozan şeydir.
Örnek: bir fiyat kartında önem sırası
- Paket adı ve fiyat: En büyük ve en kalın metin. Kullanıcının karşılaştırdığı şey bu.
- Ana eylem: Vurgu renginde, tek bir buton. Kartta iki eşit ağırlıkta buton varsa göz ikisi arasında kararsız kalır. Ayrıntılar için CTA maddesine bakılabilir.
- Kapsanan özellikler: Normal gövde metni, kısa bir liste.
- Koşullar ve dipnotlar: Daha küçük ve daha açık renkte, ama okunabilir.
Kartlardan biri öne çıkarılmak isteniyorsa ("en çok tercih edilen"), bunu tek bir farkla yapmak (kenarlık rengi veya bir etiket) genellikle yeterlidir. Her kartta başka bir öğe vurgulanırsa hiçbiri öne çıkmaz.
Görsel hiyerarşi ve HTML başlıkları aynı şey değil
Bir metnin ekranda büyük görünmesi ile HTML'de <h2> olması farklı kararlardır. Kod tarafındaki başlık yapısı, ekran okuyucuların ve arama motorlarının içeriğin bölümlerini anlamasına yarar; görsel hiyerarşi ise gözün yolunu belirler. İdeal olan ikisinin uyumlu olmasıdır, ama görünüm uğruna etiket seçilmemelidir: bir başlığın küçük görünmesi gerekiyorsa doğru düzeydeki başlık etiketi CSS ile küçültülür; büyük görünsün diye düz metne başlık etiketi verilmez.
Hiyerarşiyi nasıl test edersiniz?
- Bulanıklaştırma testi: Tasarımı bulanıklaştırın veya gözlerinizi kısarak bakın. Metin okunmaz hâle geldiğinde hâlâ öne çıkan iki üç şey, sayfanın gerçek hiyerarşisidir.
- Beş saniye testi: Birine sayfayı beş saniye gösterip kapatın ve sayfanın ne hakkında olduğunu ve ne yapılabileceğini sorun. Cevap, sayfanın amacıyla örtüşmüyorsa vurgular yanlış yerdedir.
- Gri tonlama: Tasarımı siyah beyaza çevirin. Hiyerarşi yalnızca renge dayanıyorsa bu görünümde dağılır.