Tasarımda Görsel Hiyerarşi

Tasarımınızın birine nereye bakacağını söylemek için üç saniyesi vardır. Her şey eşit şekilde dikkat için bağırıyorsa, hiçbir şey okunmaz, hiçbir şey tıklanmaz ve kullanıcı ayrılır. Bu bir tasarım görüşü değildir. Görüş nasıl çalışır.

Görsel hiyerarşi, bu üç saniyelik pencereyi kontrol eden sistemdir. İnsanları gerçekten yönlendiren birini nasıl oluşturacağınız aşağıda verilmiştir.

Görsel hiyerarşi gerçekten nedir

Görsel hiyerarşi, gözün öğeleri kasıtlı bir sırayla işlemesi için öğelerin düzenlenmesidir. Rastgele değil, hepsi bir kerede değil, sırayla: bu önce, sonra bu, sonra bu.

Beyin bir kitap gibi sayfayı yukarıdan aşağıya okumuyor. Sinyaller için tarama yapar. Boyut, kontrast, renk, boşluk ve konum gözün neyin en önemli olduğunu söyler. İyi inşa edilmiş bir hiyerarşi, en önemli öğeyi kaçırılmaz hale getirir ve en az önemli öğeyi görmezden gelmesi kolay hale getirir.

Beş kontrol

Her görsel hiyerarşi beş kaldıraçtan inşa edilir. Tümüne aynı anda ihtiyacınız yok. Spesifik düzeniniz için doğru kombinasyona ihtiyacınız var.

1. Boyut

Daha büyük öğeler ilk olarak görülür. Bu en açık kaldıraç ve en güvenilir olanıdır. 48px başlığı her zaman 14px paragrafından önce dikkat çeker. Boyutlar arasındaki oran hiyerarşi oluşturur, mutlak sayılar değil.

Hata: Her şeyi büyük yapmak. Başlık, alt başlık, gövde ve CTA hepsi fazla boyutlandırıldığında, hiyerarşi düzleşir ve hiçbir şey yol göstermez.

2. Kontrast

Yüksek kontrast gözü çeker. Açık sayfada koyu öğe, mat arka planda parlak düğme, gri tonlama düzende renkli rozet. Kontrast, boyutunu değiştirmeden bir öğeyi öne çıkarmak için en hızlı yoldur.

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

3. Renk

Renk duygusal ağırlık oluşturur. Gri denizinde tek bir kırmızı rozet her zaman dikkat çeker, sadece kırmızı özel olduğu için değil, bağlamında kromat enerjiye sahip tek öğe olduğu için. Renk paleti, her renk tanımlanmış bir role sahip olduğunda hiyerarşiye hizmet eder: CTA'lar için birincil, gövde için tarafsız, meta veriler için sönük.

4. Boşluk

Boşluk boş alan değildir. Bu bir sinyaldir. Cömert boşlukla çevrili bir öğe önemli olarak okunur çünkü boşluk onu izole eder ve nefes almaya yer verir. Sıkı bir şekilde bir araya getirilen öğeler ikincil olarak okunur çünkü hiçbir şey öne çıkmaz.

Web tasarımında en yaygın hiyerarşi hatası bölümler arasında yetersiz boşluktur. Her bölüm bir sonrakine aktığında, göz bir fikrin nerede bittiğini ve diğerinin nerede başladığını söyleyemez.

5. Konum

Göz LTR dillerinde doğal olarak sol üst köşeden başlar ve oradan tahmin edilebilir desenleri takip eder. En önemli öğeyi doğal başlangıç konumuna koymak, başka bir kaldıraç uygulanmadan önce ona bir avantaj verir.

Tek başına konum zayıftır. Sol üst köşede küçük, düşük kontrastlı bir öğe hala merkezde büyük, yüksek kontrastlı bir öğeye yenilecektir. Konum, diğer dört kontrolü güçlendirdiğinde en iyi çalışır.

Kırpma testi

Hiyerarşinizin çalışıp çalışmadığını kontrol etmenin en hızlı yolu budur. Tasarımınıza kısarak bakın ve her şey bulanıklaşana kadar. Görünür kalan öğeler, hiyerarşinizin öncelik verdiği öğelerdir.

Kısarak bakarken gördüğünüz ilk şey CTA, başlık veya kahraman görüntüsü ise, hiyerarşiniz çalışıyor. Gördüğünüz ilk şey dekoratif kenar çubuğu veya gezinme çubuğu ise, değil.

Bu beş saniye alır ve herhangi bir kullanıcı testinden önce hiyerarşi sorunlarının yüzde 80'ini yakalar.

Yaygın hiyerarşi arızaları

Her şey kalın. Her paragraf kalın metinle başlarsa, hiçbir şey vurgulanmaz. Kalın nadır olduğunda çalışır.

Çok fazla odak noktası. Eşit boyutta, eşit renkte üç öğesi olan bir sayfanın hiyerarşisi yoktur. Üç rakibi vardır. Görüş penceresinde bir kazananı seçin.

Mobili görmezden gelmek. 1440px ekran için tasarlanan bir hiyerarşi sık sık 375px telefonunda çöker. Beş kontrol her kesim noktası için yeniden değerlendirilmelidir çünkü mekansal ilişkiler tamamen değişir.

Kontrastsız renk. Renkli arka planda renkli düğme kaybolur. Hiyerarşi yalnızca odak öğe ile çevresi arasındaki renk kontrast oranı ayrılığı oluşturmak için yeterince yüksek olduğunda çalışır.

Uygulamada hiyerarşi oluşturma

Herhangi bir sayfa düzeni için somut bir çerçeve aşağıda verilmiştir:

1. Tek bir şeye karar verin. Bu sayfada tek en önemli eylem veya ileti nedir? Bu öğe en büyük boyut, en yüksek kontrast ve en iyi konumu alır.
2. Diğer her şeyi sıralayın. Sayfadaki her öğenin, önem sırasına göre sıralanmış numaralı bir listesini oluşturun. Sıralama, her öğenin hangi kaldıraçı alacağını belirler.
3. Katman başına en az iki kontrolü uygulayın. En üst katman öğesi büyük boyut + yüksek kontrast alır. İkinci katman öğeler orta boyut + renk alırlar. Üçüncü katman öğeler küçük boyut + düşük kontrast alırlar.
4. Kırılana kadar kaldırın. Hiyerarşi zarar görene kadar öğeleri kaldırın. İşler kırılmadan önce kaldırdığınız son öğe muhtemelen gereksizdi.

Bu çerçeve açılış sayfaları, panolar, makaleler, e-postalar ve kullanıcının ilk olarak nereye bakacağını bilmesi gereken herhangi bir düzen için çalışır.

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 bilgileri işleme sırasını kontrol etmek için boyut, kontrast, renk, boşluk ve konum kullanır.

Görsel hiyerarşi neden önemli?

Çünkü kullanıcılar okumaz, tararlar. Net bir hiyerarşi olmadan, her öğe eşit olarak dikkat için rekabet eder, kullanıcı bunalmış hale gelir ve ayrılır. Hiyerarşi öğeleri koleksiyonunu rehberli bir deneyime dönüştürür.

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

En hızlı yöntem kırpma testidir. Tasarımınızı bulanıklaştırın veya kısarak bakın ve hangi öğelerin görünür kaldığını kontrol edin. Bunlar hiyerarşinizin öncelik verdiği öğelerdir. Yanlış öğeler hakim oluyorsa, doğru olanlar öncü olana kadar boyut, kontrast veya boşluğu ayarlayın.