Tasarımda görsel hiyerarşi: Düzenleriniz neden işe yarar (ya da yaramaz)

Görsel hiyerarşi, işe yarayan her düzenin arkasındaki görünmez mimaridir. Okurun gözünü tam olarak nereye ve hangi sırayla yönlendireceğini belirler.

Uzun süredir tasarım yapıyorsanız bunu zaten biliyorsunuzdur. Ancak bunu bilmekle her seferinde kusursuz şekilde uygulayabilmek arasında büyük fark vardır. Bu yüzden şimdi işin mekanik tarafına bakalım. Tasarım hiyerarşisinin arkasındaki psikolojiye, onu oluşturan sekiz araca, tasarımcıların hâlâ sık yaptığı hatalara ve bunu çalışma biçiminizin kalıcı bir parçası hâline nasıl getirebileceğinize değineceğiz.

Görsel hiyerarşi gerçekten ne anlama gelir?

Görsel hiyerarşi, bir tasarımdaki öğelerin bazı unsurlar diğerlerinden önce dikkat çekecek şekilde düzenlenmesidir. Bu yalnızca başlığı büyük yapmakla ilgili değildir. Okurun düzenle karşılaştığı ilk andan itibaren yaptığı her bakışı, duraksamayı ve kararı yöneten bütünsel bir görüntüleme akışı oluşturmakla ilgilidir.

Doğru uygulandığında tasarım hiyerarşisi, içinde gezinmesi zahmetsiz hissettiren bir akış oluşturur. Kötü uygulandığında ise bilişsel sürtünme yaratır. Okurlar duraksar, rastgele göz gezdirir, önemli bilgileri kaçırır ve sayfadan uzaklaşır. Bu nadiren estetikle ilgili bir problemdir. Çoğu zaman yapısal bir sorundur.

Altta yatan psikoloji: Gestalt neden önemlidir?

Görsel hiyerarşi tasarımı, beynin kaostan nasıl düzen oluşturduğunu inceleyen Gestalt psikolojisinden büyük ölçüde beslenir. Gestalt teorisi, zihnin tek tek öğeleri birbirinden bağımsız şekilde işlemediğini söyler. Zihin; desenler, gruplar ve ilişkiler arar. Bunu bilinçli analiz devreye girmeden önce, içgüdüsel ve son derece hızlı şekilde yapar.

Bu nedenle hizalama öğeleri birbiriyle ilişkili hissettirir. Bu yüzden gruplanmış öğeler tek bir bütün gibi algılanır ve bu nedenle beyaz alan içinde tek başına duran bir öğe, olduğundan çok daha fazla görsel ağırlık taşır. Okurlar yalnızca tasarımınıza bakmaz. Beyinleri aynı zamanda tasarımdan aktif şekilde anlam üretir. Bunu anlamak, grafik tasarımda sezgisel hiyerarşiyi yalnızca bir araya getirilmiş gibi görünen düzenlerden ayıran şeydir.

Görsel hiyerarşinin sekiz unsuru

Görsel hiyerarşi tasarımı için gerekli araçlar, çoğu tasarımcının beklediğinden daha azdır. Asıl ustalık, bunların nasıl bir araya getirildiğinde yatar.

1. Ölçek ve boyut: Daha büyük olan, daha önemli olarak algılanır. Aralarında belirgin kontrast bulunan üç anlamlı ölçek adımıyla sınırlı kalın. Birbirinden neredeyse ayırt edilemeyen beş farklı başlık boyutu, bir hiyerarşi değil; görsel karmaşadır.
2. Kontrast: Yüksek kontrast, ilk bakışta dikkat çeker. En keskin kontrastı, en önemli unsur için saklayın. Diğer tüm öğeler hem görsel hem de işlevsel açıdan destekleyici bir rol üstlenmelidir.
3. Renk: Renk güçlü bir unsurdur ancak aynı zamanda aldatıcıdır, çünkü insanlar rengi farklı şekillerde algılar. Öncelikle yapısal temel olarak parlaklık ve kontrast oranları üzerinde çalışın. Renk tonu ikinci planda gelir.
4. Hizalama: Aynı hizayı paylaşan öğeler birbiriyle ilişkili olarak algılanır. Öğelerin farklı hizalanması, ayrım ya da vurgu anlamı taşır. Okurlar bunu bilinçli olarak fark etmese bile her hizalama tercihi bir anlam taşır.
5. Boşluk ve yakınlık: Beyaz alan boşluk değildir. Bir anlam taşır. Geniş aralıklar, bir öğeyi öne çıkarır. Yakın yerleştirilen öğeler gruplar oluşturur. Boşluk kullanımı, hiyerarşi araçları arasında en çok hafife alınan unsurlardan biridir.
6. Yazı tipi kalınlığı ve stili: Kalın, ince, italik: Bunlar sadece estetik tercihler değil, aynı zamanda hiyerarşi göstergeleridir. Gövde metniyle aynı boyutta olsa bile kalın bir yazı ağırlığı daha önemli algılanır. Tipografi tercihleri, yapısal tercihlerdir. Daha derine inmek isterseniz; harf aralığı, harf çifti aralığı ve satır aralığı gibi detaylar bu yapının büyük bölümünü oluşturur.
7. Doku: Doku, öğelere anlam ve dokunsal bir nitelik kazandırır. Özellikle dijital çalışmalarda, doku, tamamen renge bağlı kalmadan vurgu ve derinlik yaratabilir. Çoğu zaman gözden kaçar, ancak etkisi büyük olur.
8. Zaman ve hareket: Ekranlarda hiyerarşi zaman içinde kademeli olarak ortaya çıkabilir. Animasyonlar, geçişler ve kademeli olarak ortaya çıkan içerikler; dijital tasarıma özgü hiyerarşi araçlarıdır. Neyin önce göründüğü, nasıl hareket ettiği ve ardından gelenler öncelik sırasını belirler.

Net bir okuma akışı nasıl oluşturulur

Her düzenin bir okuma akışı vardır; bunu siz tasarlamış olsanız da olmasanız da. Eğer siz belirlemezseniz, okurlar kendi yollarını oluşturur. Çoğu zaman da sizin tercih etmeyeceğiniz bir yolu izlerler. Güçlü bir görsel hiyerarşi, akışı şansa bırakmak yerine onu sizin yönlendirmeniz anlamına gelir.

Birçok düzen, alışıldık okuma eğilimleriyle uyumlu şekilde çalışır. Metin yoğun editoryal içeriklerde F düzeni, net bir çağrıya sahip pazarlama tasarımlarında Z düzeni ya da ürün odaklı çalışmalarda merkezden dışa yayılan akışlar buna örnek gösterilebilir. Bunlar katı kurallar değildir. Birlikte çalışabileceğiniz ya da bilinçli şekilde tersine çevirebileceğiniz eğilimlerdir.

Pratik yaklaşım şudur: Düzeninizi önce gri tonlamalı olarak tasarlayın. Renk yok, süsleme yok. Okuma akışı yalnızca ölçek ve kontrast üzerinden net şekilde anlaşılmıyorsa, hiyerarşiniz henüz yeterince güçlü değildir. Renk ve detay yapının ardından gelir.

Profesyonel ipucu: Düzeninizin görsel ağırlığını göz kısma testiyle değerlendirin. Gözlerinizi hafifçe kısarak tasarıma bakın. İlk fark ettiğiniz şey, görsel giriş noktanızdır. Okurların ilk olarak görmesini istediğiniz yer gerçekten orası mı?

Bağlam her şeydir: Tasarımınızı gerçekte kim okuyor?

Masaüstünde kusursuz çalışan bir hiyerarşi, kalabalık bir sokakta telefondan bakıldığında tamamen başarısız olabilir. Güçlü bir tasarım hiyerarşisi, yalnızca düzenin kendisini değil; onu anlamlandırmaya çalışan kişinin içinde bulunduğu bağlamı da düşünmek demektir.

Kullanıcılarınız acele mi ediyor, yoksa rahatça mı göz gezdiriyor? Tasarımınız otuz metre uzaktan görülecek bir billboard’da mı yer alacak, yoksa bir elinde market poşeti tutan kişinin diğer eliyle baktığı bir mobil ekranda mı? Mesafe, ortam, cihaz ve görevin aciliyeti; hiyerarşinin nasıl kurulması gerektiğini doğrudan etkiler.

Kullanılan mecra da hangi prensibin daha baskın olacağını belirler. Büyük formatlı ve dış mekân çalışmalarında ölçek öne çıkar. Küçük ekranlarda kontrast ve boşluk kullanımı kritik hâle gelir. Tasarım dijital ortama geçtiği anda zaman ve hareket de kullanılabilir araçlara dönüşür. Hiyerarşiyi hayali bir ideal kullanıcı için değil, gerçek kullanım koşulları için oluşturun. (Tasarımınız baskıya mı gidecek? Dikkate almanız gerekenler sandığınızdan çok daha fazla.)

Zamana yayılan hiyerarşi: Kademeli bilgi sunumu

Kademeli bilgi sunumu, görsel hiyerarşi tasarımındaki en güçlü ve en az kullanılan yaklaşımlardan biridir. Mantığı oldukça basittir. Bilgiyi tek seferde değil, öncelik sırasına göre gösterin. İçeriği tek seferde sunmak yerine, sindirilebilir parçalara ayırın. Her şeyi aynı anda sunmak yerine içerikleri sindirilebilir aşamalara bölün.

Dijital ürün tasarımında bu yaklaşım, kullanıcıyı tek bir ekranla boğmak yerine adımları birden fazla ekrana yaymak anlamına gelir. Ancak bu prensip yalnızca UI tasarımıyla sınırlı değildir. Yakından incelendiğinde yeni detaylar sunan bir poster. Kapaktan iç sayfaya, oradan da detaylara yönlendiren bir yayın tasarımı. Uzaktan bakıldığında ana mesajı veren, yaklaşıldığında ikincil bilgileri ortaya çıkaran bir ambalaj tasarımı. Bunların hepsi kademeli bilgi sunumuna örnektir. Aynı prensip, tasarım farklı ortamlar arasında taşındığında da geçerlidir. Ekranda net görünen bir şey, baskıda aynı etkiyi her zaman korumayabilir.

İyi bir hiyerarşi yalnızca alanı düzenlemez. Zamanı da düzenler. Üstelik hedef kitlenizin her aşamada sınırlı bir dikkat süresine sahip olduğunu kabul eder.

Hiyerarşi ve erişilebilirlik: Göz ardı edilen bağlantı

Grafik tasarımda güçlü bir hiyerarşi ile güçlü erişilebilirlik birbiriyle çelişmez. Aslında aynı hedefe farklı açılardan yaklaşırlar. Net kontrast oranlarına, mantıklı bir okuma sırasına ve ölçeklenebilir tipografiye sahip bir tasarım hem daha erişilebilir hem de hiyerarşik açıdan daha güçlüdür.

Renk kontrast oranları yalnızca estetik tercihlerden ibaret değildir. Web İçeriği Erişilebilirlik Yönergeleri (WCAG), normal metinler için minimum 4.5:1 kontrast oranı önerir. Düşük kontrast, hedef kitlenizin önemli bir bölümü için okuma sırasını ve öncelik ilişkisini belirsiz hâle getirebilir. Eğer hiyerarşiniz, renk körü kullanıcıların ayırt edemeyeceği renk farklarına dayanıyorsa; büyük ihtimalle yeterince sağlam değildir.

Dijital tasarımda metin ve öğe boyutları da ciddi önem taşır. Kullanıcıların düzeni bozmadan metni yeniden boyutlandırabilmesi gerekiyorsa, bu sonradan eklenecek bir özellik değil; en baştan planlanması gereken bir gerekliliktir.

Grafik tasarımda yaygın hiyerarşi hataları (akıllı tasarımcılar bile bunları neden hâlâ yapıyor)?

Tasarım hiyerarşisinin prensiplerini bilmek tek başına yeterli değildir. Sayfa düzenini bozan hatalar genellikle bilgi eksikliğinden kaynaklanmaz. Bunlar baskı, alışkanlıklar ve birbiriyle çakışan önceliklerle ilgilidir.

Çok fazla odak noktası var. Her şey dikkat çekmek için yarıştığında, hiçbir şey gerçekten öne çıkamaz. Bu genellikle, birden fazla paydaşın kendi unsurunun en önemli öğe olmasını istemesiyle ortaya çıkar. Sonuç ise görsel bir karmaşaya dönüşür. Sizin göreviniz, bu konuşmayı yapmak zor olsa bile hiyerarşiyi korumaktır.

Masaüstünde çalışan bir hiyerarşi, mobilde tamamen dağılabilir. Büyük ekranlarda net görünen ölçek ilişkileri, küçük ekranlarda kolayca kaybolabilir. Bu yüzden hiyerarşinizi yalnızca stüdyo ortamında değil, farklı boyutlarda ve gerçek kullanım senaryolarında da test edin.

Yapının önüne geçen süslemeler. Etkileyici bir doku, güçlü bir arka plan veya detaylı bir illüstrasyon; yanlış öncelik seviyesinde kullanıldığında fazla görsel karmaşa yaratarak hiyerarşiyi zayıflatabilir. Süslemeler yapıyı desteklemeli, onunla yarışmamalıdır.

Gereğinden fazlasını yapmak. Ölçülülük de bir hiyerarşi aracıdır. Gerçekten gerekli olanı fark etmek çoğu zaman daha iyi bir çözüm ortaya çıkarır. Bilinçli kullanılan beyaz alan, geride kalan öğeleri daha güçlü hâle getirir. Bazen küçük dokunuşlar büyük fark yaratır.

Hiyerarşiyi yalnızca sonuçlara değil, çalışma sürecinize de dahil etmek

Görsel hiyerarşi becerinizi geliştirmenin en etkili yolu, onu sonradan düzeltilecek bir detay değil; çalışma biçiminizin temel bir parçası hâline getirmektir.

Her düzen projesine bir hiyerarşi planıyla başlayın. Henüz dosyayı açmadan önce şunu netleştirin: Bu tasarımın vermesi gereken en önemli mesaj nedir? İkinci sırada ne geliyor? Üçüncü sırada hangi unsur var? Bunları mutlaka yazın. Hazırladığınız düzen bu sıralamayı açık biçimde yansıtmalıdır.

Bir tipografik ölçek oluşturun ve ona sadık kalın. Modüler ölçekler, hiyerarşiyi destekleyen dengeli ve uyumlu boyut ilişkileri kurmanıza yardımcı olur. Ölçeğinizi belirleyin, seviyelerinizi tanımlayın ve bunları tutarlı şekilde uygulayın. Sistemler ancak onlara güvendiğinizde işe yarar. Eğer tek bir düzen yerine bütün bir marka için hiyerarşi oluşturuyorsanız aynı mantık daha geniş ölçekte de geçerlidir. İyi yapılandırılmış bir kurumsal marka kimliği sistemi, aslında büyük ölçekte kurulmuş bir görsel hiyerarşidir.

İnceleme sürecinize hiyerarşi kontrol noktaları ekleyin: wireframe aşamasında, düşük doğruluklu mockup aşamasında ve final teslimattan hemen önce. Her aşamada aynı soruyu sorun: Bu özeti daha önce hiç görmemiş biri, en önemli unsuru üç saniye içinde fark edebilir mi?

Kuralları gerçekten öğrendikten sonra onları bozabilecek özgüvene sahip olmak

Güçlü bir görsel hiyerarşi, her zaman geleneksel bir hiyerarşi anlamına gelmez. En etkileyici tasarım çalışmalarının bazıları, beklentileri bilinçli olarak tersine çevirir. Negatif alanın baskın odak noktası oluşturduğu bir düzen. Kusursuz yerleşim ve kontrast sayesinde küçük bir kelimenin en büyük görsel ağırlığı taşıdığı bir tipografik kullanım. Teknik olarak en önemsiz öğenin, diğer tüm unsurları akılda kalıcı hâle getirdiği bir tasarım.

Kuralları iyi şekilde bozmakla kötü şekilde bozmak arasındaki fark, onları gerçekten anlamaktır. Tasarım hiyerarşisinin neden bu şekilde işlediğini bilirseniz, onu bilinçli şekilde tersine çevirebilirsiniz. Aksi hâlde kuralları bozmanız, yalnızca bir hata gibi görünür.

Sistemi öğrenin. Sonra onu kendinize ait hâle getirin.

Tüm bunların özü şu:

Görsel hiyerarşi bir kontrol listesi ya da formül değildir. Her tasarım kararını iletişim önceliği açısından düşünme biçimidir. Gestalt’ın psikolojik mekaniklerinden, kalabalık bir trende kullanıcıların düzeninizi tek elle okuduğu gerçek dünyadaki deneyime kadar her şey aynı soruya dayanır: Bu tasarım, insanların neyin önemli olduğunu doğru sırayla ve zorlanmadan anlamasına yardımcı oluyor mu?

Grafik tasarımda hiyerarşiyi doğru kurduğunuzda, düzenleriniz yalnızca iyi görünmez. Gerçek işlevini de yerine getirir. Okurlar, nedenini hiç fark etmeden; tam olarak istediğiniz şeyi, tam olarak planladığınız sırayla yapar. Asıl mesele bu görünmezliktir. İşte sanat budur. Bunu kusursuz şekilde başarmaktan daha tatmin edici çok az şey vardır.