Tasarımda Görsel Hiyerarşi: İnsanların Nereye Baktığını Nasıl Kontrol Edersiniz

Tasarımınızın birisine nereye bakacağını anlatmak için üç saniyesi var. Her şey eşit derecede dikkat çekmeye çalışıyorsa, hiçbir şey okunmaz, hiçbir şeye tıklanmaz ve kullanıcı ayrılır. Bu bir tasarım görüşü değil. Görmenin nasıl çalıştığıdır.

Görsel hiyerarşi, bu üç saniyelik pencereyi kontrol eden sistemdir. İşte gerçekten insanları yönlendiren bir hiyerarşiyi nasıl oluşturacağınız.

Görsel Hiyerarşi Gerçekte Nedir

Görsel hiyerarşi, öğelerin göz tarafından kasıtlı bir sırayla işlenmesi için düzenlenmesidir. Rastgele değil, hepsi aynı anda değil, sıralı olarak: önce bu, sonra bu, sonra bu.

Beyin bir sayfayı kitap gibi yukarıdan aşağıya okumaz. Sinyaller arar. Boyut, kontrast, renk, boşluk ve konum, gözün neyin en önemli olduğunu söyler. İyi oluşturulmuş bir hiyerarşi, en önemli öğeyi gözden kaçırılmaz hale getirir ve en az önemli öğeyi kolayca görmezden gelinebilir kılar.

Beş Kontrol

Her görsel hiyerarşi beş kaldıraçtan oluşur. Hepsine aynı anda ihtiyacınız yok. Belirli düzeniniz için doğru kombinasyona ihtiyacınız var.

1. Boyut

Daha büyük öğeler önce görülür. Bu en belirgin kaldıraç ve en güvenilir olanıdır. 48 piksellik bir başlık her zaman 14 piksellik bir paragraftan önce dikkati çeker. Hiyerarşiyi boyutlar arasındaki oran yaratır, mutlak sayılar değil.

Hata: her şeyi büyük yapmak. Başlık, alt başlık, gövde ve CTA hepsinin aşırı büyük olduğu durumlarda hiyerarşi düzleşir ve hiçbir şey öncü olamaz.

2. Kontrast

Yüksek kontrast gözü çeker. Açık bir sayfadaki koyu bir öğe, mat bir arka plandaki parlak bir düğme, gri tonlamalı bir düzendeki renkli bir rozet. Kontrast, boyutu değiştirmeden bir öğeyi öne çıkarmanın en hızlı yoludur.

Bu tersi yönde de işler. Düşük kontrast öğeleri geri iter. Meta veriler, zaman damgaları ve ikincil etiketler, birincil içerikle rekabet etmemeleri için düşük kontrasta sahip olmalıdır.

3. Renk

Renk duygusal ağırlık yaratır. Gri bir denizde tek bir kırmızı rozet her zaman dikkati çeker; kırmızı özel olduğu için değil, bağlamında kromatik enerjiye sahip tek öğe olduğu için. Renk paleti, her rengin tanımlanmış bir rolü olduğunda hiyerarşiye hizmet eder: CTA'lar için birincil, gövde için nötr, meta veriler için soluk.

4. Boşluk

Beyaz alan boş alan değildir. Bir sinyaldir. Geniş boşlukla çevrilmiş bir öğe önemli okunur çünkü boşluk onu izole eder ve nefes almasına alan tanır. Bir arada sıkışmış öğeler ikincil okunur çünkü hiçbir şey öne çıkmaz.

Web tasarımında en yaygın hiyerarşi başarısızlığı, bölümler arasında yeterince boşluk olmamasıdır. Her bölüm bir sonrakine aktığında, göz bir fikrin nerede bittiğini ve başka bir fikrin nerede başladığını söyleyemez.

5. Konum

Göz, soldan sağa okunan dillerde doğal olarak sol üstten başlar ve oradan tahmin edilebilir kalıpları takip eder. En önemli öğeyi doğal başlangıç konumuna yerleştirmek, başka bir kaldıraç uygulanmadan önce ona avantaj sağlar.

Konum tek başına zayıftır. Sol üstteki küçük, düşük kontrastlı bir öğe yine de ortadaki büyük, yüksek kontrastlı bir öğeye yenik düşer. Konum en iyi diğer dört kontrolü desteklediğinde çalışır.

Göz Kırpma Testi

Hiyerarşinizin işe yarayıp yaramadığını kontrol etmenin en hızlı yolu bu. Her şey bulanıklaşana kadar tasarımınıza gözlerinizi kısın. Hâlâ görünür kalan öğeler, hiyerarşinizin önceliklendirdiği öğelerdir.

Gözlerinizi kıstığınızda ilk gördüğünüz şey CTA, başlık veya hero görseli ise hiyerarşiniz çalışıyor demektir. İlk gördüğünüz şey dekoratif bir kenar çubuğu veya bir gezinme çubuğuysa, çalışmıyor demektir.

Bu beş saniye sürer ve herhangi bir kullanıcı testinden önce hiyerarşi sorunlarının yüzde seksenini yakalar.

Yaygın Hiyerarşi Başarısızlıkları

Her şey kalın. Her paragraf kalın metinle başlıyorsa, hiçbir şey vurgulanmamış demektir. Kalın, nadir olduğunda işe yarar.

Çok fazla odak noktası. Eşit büyüklükte, eşit renkli üç öğesi olan bir sayfanın hiyerarşisi yoktur. Üç rakibi vardır. Görüntü alanı başına tek bir kazanan seçin.

Mobili görmezden gelmek. 1440 piksellik ekran için tasarlanmış bir hiyerarşi, 375 piksellik bir telefonda çoğunlukla çöker. Beş kontrolün her kesme noktası için yeniden değerlendirilmesi gerekir çünkü uzamsal ilişkiler tamamen değişir.

Kontrast olmadan renk. Renkli bir arka plan üzerindeki renkli bir düğme kaybolur. Hiyerarşi yalnızca odak öğesi ile çevresi arasındaki renk kontrast oranı ayrım yaratacak kadar yüksek olduğunda işe yarar.

Pratikte Hiyerarşi Oluşturma

Herhangi bir sayfa düzeni için somut bir çerçeve:

1. Tek şeye karar verin. Bu sayfadaki tek en önemli eylem veya mesaj nedir? Bu öğe en fazla boyutu, en fazla kontrastı ve en iyi konumu alır.
2. Geri kalanı sıralayın. Sayfadaki her öğenin öneme göre sıralanmış numaralandırılmış bir listesini oluşturun. Sıralama, her öğenin hangi kaldıracı alacağını belirler.
3. Katman başına en az iki kontrol uygulayın. Üst katmandaki öğe büyük boyut + yüksek kontrast alır. İkinci katmandaki öğeler orta boyut + renk alır. Üçüncü katmandaki öğeler küçük boyut + düşük kontrast alır.
4. Bozulana kadar kaldırın. Hiyerarşi zarar görene kadar öğeleri silin. Bir şeyler bozulmadan önce kaldırdığınız son öğe büyük olasılıkla gereksizdi.

Bu çerçeve açılış sayfaları, kontrol panelleri, makaleler, e-postalar ve kullanıcının önce nereye bakacağını bilmesi gereken her düzen için işe yarar.

SSS

Tasarımda görsel hiyerarşi nedir?

Görsel hiyerarşi, tasarım öğelerinin önem sırasına göre düzenlenmesidir. Gözün bir sayfadaki bilgiyi işleme sırasını kontrol etmek için boyut, kontrast, renk, boşluk ve konumu kullanır.

Görsel hiyerarşi neden önemlidir?

Çünkü kullanıcılar okumaz, tarar. Net bir hiyerarşi olmadan her öğe dikkat için eşit rekabet eder, kullanıcı bunalıma girer ve ayrılır. Hiyerarşi, bir öğeler koleksiyonunu rehberli bir deneyime dönüştürür.

Görsel hiyerarşiyi nasıl test ederim?

Göz kırpma testi en hızlı yöntemdir. Tasarımınızı bulanıklaştırın veya gözlerinizi kısın ve hangi öğelerin görünür kaldığını kontrol edin. Bunlar hiyerarşinizin önceliklendirdiği öğelerdir. Yanlış öğeler baskın çıkıyorsa, doğru olanlar öne çıkana kadar boyutu, kontrastı veya boşluğu ayarlayın.