Görsel hiyerarşi: tasarımda gözün okuma sırasını belirlemek

Görsel hiyerarşi nedir?

Görsel hiyerarşi, bir tasarımdaki öğelerin önem sırasına göre fark edilmesini sağlayan düzendir. Okur bir sayfaya baktığında gözü rastgele gezmez; belirgin olandan az belirgin olana doğru ilerler. Tasarımcı, bu ilerlemeyi bilinçli kurarsa okur ne yapacağını düşünmeden yönlenir.

Görsel hiyerarşi bir tasarım ilkesidir, bir bileşen ya da araç değildir. Sayfadaki başlığın, görselin, açıklamanın ve eylem düğmesinin hangi sırayla okunacağını belirler. Bu sıra iyi kurulmadığında okur aradığını bulamaz, eylem düğmesini kaçırır ya da metnin neresinden başlayacağını bilemez.

Hiyerarşiyi kuran araçlar

Hiyerarşi birkaç görsel değişkenin ayarlanmasıyla kurulur: • Boyut: büyük öğe önce fark edilir; başlık gövde metninden büyük olur • Ağırlık: kalın yazı ya da dolu bir alan ince yazıya göre öne çıkar • Kontrast ve renk: zeminden güçlü ayrışan öğe dikkat çeker; sınırlı bir vurgu rengi tek bir öğeyi seçtirir • Boşluk: bir öğeyi çevreleyen geniş boşluk onu tek başına bir odak yapar • Konum ve hizalama: sol üst, merkez ya da okuma akışının başı daha erken görülür • Tekrar ve tutarlılık: aynı düzeydeki öğeler aynı biçimde göründüğünde okur sırayı öğrenir

Bu araçlar birbirini besler ama aynı anda hepsi yükseltilirse etki kaybolur. Çoğu zaman bir ya da iki araçla farkı yaratıp diğerlerini sakin tutmak yeterlidir.

Birincil öğeyi seçmek

Hiyerarşi kurmadan önce sorulacak soru şudur: Bu ekranda okurun yapmasını istediğim tek şey nedir? Cevap bir ürün sayfasında satın alma düğmesi, bir makalede başlık, bir formda gönder eylemi olabilir. Birincil öğe seçilmeden araçlar kullanılırsa vurgu rastgele dağılır.

Birincil öğe seçildikten sonra sonraki düzeyler belirlenir. Ürün sayfasında ürün adı ve ana görsel destekleyici düzeyde, teknik özellikler ve yardımcı bağlantılar ayrıntı düzeyinde yer alabilir. Aynı düzeyde birden çok öğe bulunması sorun değildir; sorun, birincil düzeyde birden çok öğenin yarışmasıdır.

İkincil eylemleri, örneğin vazgeç ya da daha sonra seçeneğini, birincil eylemden bilerek zayıf tutarsınız. Dolu bir düğme yanında çerçeveli ya da yalnız yazı hâlinde bir düğme, hangisinin ana yol olduğunu açıkça söyler.

Gözle kısarak bakma testi

Hiyerarşinin işleyip işlemediğini görmenin pratik yolu, ekrana gözleri kısarak ya da ekranı bulanıklaştırarak bakmaktır. Ayrıntılar silinir, yalnızca büyük kütleler ve güçlü kontrastlar kalır. Bu görüntüde hâlâ ilk fark ettiğiniz öğe, tasarımın fiilî birincil öğesidir.

Bu öğe sizin seçtiğinizle uyuşmuyorsa, rakip bir öğe dikkati çalıyordur. Genellikle sebep parlak bir görsel, gereksiz yoğun bir renk ya da büyük bir reklam alanıdır. Çözüm birincil öğeyi büyütmekten çok, rakip öğeyi sakinleştirmektir.

Test, farklı ekran boyutlarında da yinelenmelidir. Masaüstünde güçlü olan hiyerarşi, tek sütuna inen mobil ekranda başka bir sıraya dönüşebilir; başlık ile eylem arasındaki mesafe ve sıra yeniden kontrol edilmelidir.

Sık yapılan hatalar

En yaygın hata, her öğeyi öne çıkarmaya çalışmaktır. Birçok farklı renkte, büyük ve kalın başlıklarla dolu bir sayfa, okura nereden başlayacağını söylemez. Hiyerarşi, öğeler arasında fark yarattığı ölçüde çalışır.

Başka bir hata, vurguyu yalnız renge bırakmaktır. Renk körlüğü olan ya da ekranı kısık parlaklıkta kullanan okur renk farkını kaçırır; boyut, ağırlık ve konum da farkı taşımalıdır. Bir diğer hata tutarsızlıktır: aynı düzeydeki başlıklar sayfalar arasında farklı boyutlarda olursa okur sırayı öğrenemez.

Izgara, Gestalt ve tipografiyle farkı

Görsel hiyerarşi, komşu tasarım kavramlarıyla sık karıştırılır. Izgara sistemi, öğelerin yerleşeceği görünmez iskeleti kurar; hizalamayı ve tutarlılığı sağlar. Gestalt ilkeleri, gözün parçaları nasıl gruplayıp bütün gördüğünü anlatır. Tipografi ise yazının okunaklılığını ve karakterini ele alır.

Hiyerarşi bu araçları kullanır ama sorusu farklıdır: Hangi öğe önce, hangisi sonra? Izgara hizalamayla, Gestalt yakınlıkla, tipografi boyut ve ağırlıkla hiyerarşiye hizmet eder. Bu nedenle iyi bir tasarımda hepsi birlikte çalışır; ancak birinin yerine diğerini koymak sorunu çözmez.

Tasarım programlarında yeri

Görsel hiyerarşi, arayüz tasarımının temel becerilerinden biridir ve UX/UI Bootcamp içinde UI tasarım temelleri çerçevesinde çalışılır. Grid Sistemleri ve Görsel Hiyerarşi programı ise ızgara kurulumu, boşluk ölçeği ve görsel ağırlık konularına doğrudan odaklanır; tasarım ekiplerinin ürün ekranlarını tutarlı kurmak için ihtiyaç duyduğu bu temeli verir.