Kısaca: Görsel hiyerarşi, bir tasarımdaki öğeleri önem sıralarını gözün hemen kavrayacağı şekilde düzenlemektir. Böylece kullanıcı neye önce, neye sonra bakacağını düşünmeden bilir. Hiyerarşiyi boyut, renk ve kontrast, yazı ağırlığı, boşluk, gruplama ve konumla kurarsınız. Ama kurmaya başlamadan önce içeriği önem sırasına koyun. Çünkü her şeyi vurgulamaya çalışırsanız hiçbir şey öne çıkmaz.
Kısa cevap
Bir sayfaya bakan kişi ilk saniyelerde üç soruya cevap arar: Burası ne? Benim için ne var? Ne yapmalıyım? Görsel hiyerarşi bu cevapları doğru sırayla öne çıkarmanın yoludur. Bu yazıda hiyerarşiyi kuran araçları, bunları birlikte nasıl kullanacağınızı ve tasarımınızı nasıl test edeceğinizi anlatıyorum.
Görsel hiyerarşi nedir?
Nielsen Norman Group görsel hiyerarşiyi, öğeleri önem sıralarını gösterecek şekilde düzenlemek olarak tanımlar. Ona göre bu düzeni en çok renk ile kontrast, ölçek ve gruplama kurar (NN/g). Görsel hiyerarşi doğru olduğunda kullanıcı sayfayı kolayca anlar ve yapmak istediği işi tamamlar. Yanlış olduğunda ise en önemli bilgi gözden kaçar ya da göz sayfada kararsızca dolaşır.
Yukarıdaki iki kartta kelimeler birebir aynı. Soldakinde her satır eşit ağırlıkta olduğu için okur nereden başlayacağını bilemiyor. Sağdakinde ise göz önce başlığa, sonra renkli alt başlığa, ardından butona gidiyor. Açıklama metni de ihtiyaç duyan için orada bekliyor.
Görsel hiyerarşi nasıl kurulur?
1. Önce içeriği sıralayın
Tasarım programını açmadan önce sayfadaki her öğeyi bir listeye yazın ve önem sırasına koyun. Birinci sırada tek bir şey olmalı. “Hepsi önemli” cevabı, hiyerarşinin olmadığı anlamına gelir. Bu adım tasarımdan çok içerik kararıdır. Bu yüzden onu müşteriyle birlikte yapmanız gerekir.
2. Boyut
En güçlü araç boyuttur: Göz önce büyük olana gider. Başlıkla gövde metni arasında belirgin bir fark olmalı. Örneğin 16 piksellik metnin yanında 18 piksellik başlık hiyerarşi kurmaz. Ayrıca boyutları rastgele seçmek yerine bir tipografik ölçek kullanın. Bunun bir yolunu altın oran yazısında, font boyutu seçimini font seçimi yazısında anlattım.
3. Renk ve kontrast
Çevresinden farklı olan göze batar. Örneğin sakin bir sayfada tek bir canlı renkli buton, gözü oraya çeker. Bu yüzden vurgu rengini az kullanın. Her yere sürdüğünüz vurgu rengi vurgu olmaktan çıkar. NN/g’nin önemli bir uyarısı da var: Hiyerarşiyi yalnızca renkle kurmayın. Çünkü renk körlüğü olan kullanıcılar bazı renk farklarını göremez. Kısacası rengi boyut ve ağırlıkla destekleyin. Kontrastı ölçmeyi renk kontrastı yazısında anlattım.
4. Yazı ağırlığı ve stili
Aynı boyuttaki iki metinden göz önce kalın olanı okur. Bu yüzden kalın, yarı kalın ve normal ağırlıkları bilinçli kullanırsanız boyutu değiştirmeden hiyerarşi kurarsınız. Büyük harf, italik ve altı çizili gibi stilleri ise az kullanın. Çünkü okurlar web’de altı çizili metni bağlantı sanar.
5. Boşluk ve gruplama
Bir öğenin etrafındaki boşluk ne kadar fazlaysa, o öğe o kadar önemli görünür. Gruplama ise hangi öğelerin birbirine ait olduğunu gösterir. Örneğin başlık, açıklaması ve butonu birbirine yakın durur. Diğer gruplarla aralarında ise daha geniş bir boşluk kalır. Aslında bu, Gestalt’ın yakınlık ilkesidir. Gruplamayı çerçeve ya da arka plan rengiyle de yapabilirsiniz, ama çoğu zaman boşluk tek başına yeterlidir.
6. Konum
Soldan sağa okuyan kültürlerde göz genellikle sol üstten başlar. Ayrıca kullanıcılar sayfanın üst kısmına, aşağısından daha çok bakar. Bu yüzden önemli bilgiyi üste ve sola yakın koymak hiyerarşiyi destekler. Gözün sayfadaki yolunu F pattern ve Z pattern yazısında ayrıntılı anlattım.
Görsel hiyerarşi araçlarını birlikte kullanmak
Görsel hiyerarşi tek bir araçtan değil, araçların birlikte çalışmasından doğar. Ama hepsini aynı anda en yükseğe çıkarmak ters teper. Büyük, kalın, renkli ve büyük harfli bir başlık bağırır. Genellikle iki araç yeterlidir. Pratik bir kural şudur:
| Seviye | Örnek öğe | Tipik araçlar |
|---|---|---|
| 1. Birincil | Sayfa başlığı, ana mesaj | En büyük boyut, kalın ağırlık, çevresinde geniş boşluk |
| 2. İkincil | Ara başlıklar, önemli bilgi (fiyat, tarih, süre) | Orta boyut, vurgu rengi ya da yarı kalın |
| 3. Üçüncül | Gövde metni, açıklamalar | Normal boyut ve ağırlık, yüksek okunabilirlik |
| Eylem | Ana buton | Vurgu rengi, belirgin biçim; sayfada tek ana buton |
Sık yapılan hatalar
- Her şeyi vurgulamak: Üç farklı kırmızı buton, iki büyük başlık ve kalın yazı dolu paragraflar. Sonuçta hepsi gözü aynı anda çektiği için göz hiçbirine gitmez.
- Çok küçük boyut farkları: Başlık ile metin arasında 2–4 piksellik fark, hiyerarşi değil kararsızlık gibi görünür.
- Eşit boşluklar: Başlığın üstündeki ve altındaki boşluk aynıysa, okur başlığın hangi paragrafa ait olduğunu çıkaramaz.
- Dekoratif öğelerin öne geçmesi: Büyük arka plan görseli ya da süsleme bazen başlıktan çok dikkat çeker. Bu durumda hiyerarşi tersine dönmüştür.
- Mobili unutmak: Masaüstünde yan yana duran öğeler mobilde alt alta geçer. Bu yüzden mobilde de önem sırasının yerinde kaldığını kontrol edin.
Görsel hiyerarşi için üç test
- Kısma testi: Gözlerinizi kısın ya da tasarımı bulanıklaştırın. Metinleri artık okuyamadığınızda hangi öğeleri hâlâ seçebiliyorsunuz? Bunlar sizin birincil öğeleriniz olmalı.
- Gri tonlama testi: Tasarımı siyah beyaza çevirin. Hiyerarşi hâlâ çalışıyorsa, renge fazla yaslanmıyorsunuz demektir.
- Sıralama testi: Birine tasarımı gösterip nereye sırayla baktığını sorun. Söylediği sıra, ilk adımda yazdığınız önem listesiyle aynı mı?
NN/g de bir öneride bulunuyor: Hiyerarşiyi kurduktan sonra bir adım geri çekilin. Ardından hedef kullanıcıların tasarımı amaçladığınız gibi okuyup okumadığını test edin. Hiyerarşinin genel yerleşim içindeki yerini merak ediyorsanız grafik tasarımda kompozisyon yazısına göz atabilirsiniz.
Sık sorulan sorular
Görsel hiyerarşi ile tipografik hiyerarşi aynı şey mi?
Tipografik hiyerarşi, görsel hiyerarşinin metinle ilgili kısmıdır. Yani başlık, ara başlık ve gövde metninin boyut, ağırlık ve aralık farklarıdır. Görsel hiyerarşi ise bunun yanında görselleri, butonları, renk alanlarını ve boşluğu da kapsar.
Bir sayfada kaç görsel hiyerarşi seviyesi olmalı?
Çoğu sayfa için üç seviye ve bir eylem öğesi yeterlidir. Çünkü seviye sayısı arttıkça aralarındaki farklar küçülür ve okur ayrımı yapamaz hâle gelir.
Görsel hiyerarşi SEO’yu etkiler mi?
Doğrudan değil, ama dolaylı olarak evet. Web’de görsel hiyerarşiyi H1, H2, H3 gibi doğru başlık etiketleriyle kurun. Böylece hem arama motorları hem de yapay zeka araçları sayfanın yapısını daha kolay anlar. Bir metni sadece büyük ve kalın yazmak yerine doğru başlık etiketini kullanın.
Bu yazı Kasım 2026 itibarıyla geçerli bilgilere dayanır.
