Görsel Hiyerarşi Nedir ve Neden Önemlidir?

Görsel hiyerarşi prensiplerini anlamak ve uygulamak, tasarımcıların işlerini kolaylaştırdığı gibi kullanıcıların da daha iyi bir deneyim yaşamalarını sağlayan önemli bir unsurdur.

Görsel hiyerarşi, bilgilerin bir tasarımda yapılandırılma ve önceliklendirilme biçimidir. Örneğin; başlıkların gövde metninden daha büyük yazılması veya önemli bir çağrı butonunun (CTA) kırmızı veya yeşil gibi dikkat çekici bir renkte olmasını sağlamak tipografik hiyerarşi prensiplerine en temel örneklerdendir.

Görsel hiyerarşinin en temel kuralları Gestalt tasarım ilkelerinden gelir. Tasarım ve bireylerin tasarım öğelerini nasıl algıladıkları hakkındaki bu temel psikolojik teoriler görsel hiyerarşi yaratmanın temelini oluşturur. Bu ilkeler simetri, kapanış, benzerlik, yakınlık ve daha fazlasını içerir.

Web'deki tasarım hiyerarşi temelinin çoğu, uzun bir geçmişe sahip baskılı gazetelerin mizanpaj düzeninden gelmektedir.

Görsel Hiyerarşi Neden Önemlidir?

Görsel hiyerarşi, kullanıcıyı, ona sunulan içerik içerisinde doğru şekilde yönlendirmeyi amaçlar. İçerik içerisinde hangi bölümlerin önemli olduğu, içeriğin ilgili bölümlere ve kategorilere nasıl ayrıldığı, kullanıcının nereye odaklanması gerektiği görsel hiyerarşi ile sağlanır.

Bilgi kavrayabilme, görsel hiyerarşinin bir diğer önemli işlevidir. İçerik parçaları arasında görsel ilişkiler yaratılarak, bu içeriği görüntüleyenlere bilgiyi nasıl yorumlayacaklarına dair ipuçları verilir.

Kullanıcının bilgi kavrama hızını artırarak ve sunulan bilgiyi tüketen kişiye rehberlik ederek, tasarımın iletmek istediği mesaj güçlendirilir. Görsel hiyerarşi olmadan, her şey bir karmaşa olarak algılanabilir.

Etkileşimli Arayüzler için Görsel Hiyerarşinin Bileşenleri

Boyut, renk, biçim, mesafe, oran ve yönelimin uygun kullanımıyla oluşturulan bir kompozisyonun anlamı, kavramı ve havası, görsel hiyerarşiyi belirleyen grafik öğelerin yaratıcı kullanımıyla aktarılır. Görsel hiyerarşi, ziyaretçinin gözünü yönlendirmesi gereken bir açılış sayfası veya mobil bir kullanıcı arayüzünün gezinmesi olsun, her tür görsel tasarım için kritik öneme sahiptir. Kullanıcının her bir öğeyi anlaması, kompozisyondaki diğer öğelere ve bunların bağlamına dayanır. Kompozisyonel öğeler, görsel ilişkiler oluşturmak ve böylece bir tasarım boyunca görsel hiyerarşi oluşturmak için buna göre ele alınır.

Görsel Hiyerarşide Renk

Renk, görsel tasarımda en etkili yaratıcı unsurdur. Kırmızı bir çarpı ile siyah renkli bir çarpı arasındaki anlık çağrışımları düşünün. Kırmızı çarpı neredeyse evrensel olarak olumsuzluğu, bir durumun veya faaliyetin yasak olduğunu ifade eder. Bu durum rengin kullanımıyla anında iletişim kurma potansiyelimizi gösterir. Renk ayrıca genellikle grupları tanımlamak için kullanılır, örneğin üç tek renkli çarpı arasında bir kırmızı çarpının daha önemli olarak öne çıkması gibi.

Parlak, zengin renkler, soluk olanlardan daha fazla öne çıkar ve bu nedenle daha büyük bir görsel etkiye sahiptir. Bir arayüzde, renk bir yapı duygusu sunmak ve mevcut etkileşimlere işaret etmek için kullanılabilir. Tek renkli bir arayüzdeki tek bir renk, bir seçimi ayırt edebilir ve hatta kullanıcının üzerinde gezindiği bir düğmenin ötesinde ne olduğunu bile önerebilir.

Renk veya monokrom tasarım öğelerindeki renk eksikliği, kullanıcı arayüzü öğelerini ana hatlarıyla belirtmek ve kullanıcılara bilinçaltı düzeyde hitap etmek için kullanılabilir.

Renk, izleyicinin bilinçaltına açık bir şekilde bilgi iletebilen, anlam ve duygu ile de beslenir. Markalaşmada, renk üzerine çok sayıda psikolojik araştırma yapılmıştır çünkü renk, tüketicilerde markayla anlamlı bir etkileşime girmeden önce içgüdüsel bir tepki yaratır. Örneğin, maviler genellikle güvenilir, emniyetli ve sakinleştirici olarak algılanırken, kırmızılar uyarıcıdır ve insanların kalp atış hızlarını artırdığı bilinmektedir. Ancak, renkler kültüre bağlı olarak farklı bir öneme de sahip olabilir.

Web tasarımında anlamlı, yapısal renk kullanımına iyi bir örnek olarak The Names for Change sitesini incelemenizi tavsiye ederiz. Site, kendi anatomisini renk kullanımıyla hemen ziyaretçiye iletir; imgelerin dizilimi site ilk açıldığında otomatik olarak dağınık gelir ancak konu veya renge göre yeniden düzenlenebilir formattadır.

Ancak seçilen renk tonları, kâr amacı gütmeyen kuruluşun sitesiyle ilgili potansiyel zorluklardan birini aşmaya yardımcı oluyor. Çorap veya tampon gibi günlük ihtiyaçlar için bağış toplamak, kullanıcıların dikkatini ilk etapta çekmek adına yetersiz olabilir. Bu nedenle sitenin radikal grafik tonu, sıradan eşyaların algılanan değerini yükseltirken aynı zamanda gerekli kurumsal yapının da oluşmasını sağlar.

Dikkat çekici renk kullanımıyla görsel hiyerarşi ve yapı desteklenmektedir.

Görsel Hiyerarşide Boyut

Üç küçük kuşun yanında oturan büyük bir kuşun resmini hayal edelim. Ekstra bir bilgiye sahip olmadan bu basit grafik bize unsurları arasındaki ilişkiyi hemen iletir. Geleneksel grafik tasarımda, en önemli öğeleri en büyük yapmak ve ardından öğeleri hiyerarşik olarak küçültmek tipik bir stratejidir.

Başlıklar, bölümler ve alıntılar gibi önemli farklılıkları belirtmek için metin gövdelerinde de sıklıkla farklı yazı tipi boyutları kullanılır. Resim başlıkları gibi ikincil içerikler genellikle metnin ana gövdesiyle rekabet etmemek için daha küçüktür.

Instagram gibi en yaygın kullanılan uygulamaların görsel arayüzlerden bazılarını düşünün. Ekrandaki hiçbir şey, Instagram kullanıcılarının paylaştığı resimler ve videolarla rekabet edemez. Çoğu paylaşım, ekranın %60'ından fazlasını kaplar. Kullanıcı arayüzünün amacını bu noktada hemen anlayabilirsiniz.

Instagram arayüzü.

Görsel Hiyerarşide Hizalama

Görsel hiyerarşideki hizalama, öğeleri uzamsal olarak birbirine bağlayarak bir düzen duygusu iletir. Doğrusal olmayan bir romandaki bölümlerde olduğu gibi, grafik bir kompozisyonda çizginin dışında duran bir kare hayal edin. Tek bir öğe yerleşik bir yapıyı bozduğunda, kompozisyondan sıyrılır ve böylece geri kalanına göre anlam kazanır.

Katı bir kompozisyon, bir öğe görsel ızgaradan, yani bir düzen duygusundan sıyrılmadığı sürece bakan kişinin dikkatini çekmez. Hizalama hatası veya "ızgarayı kırmak", grafik bir öğeye daha fazla görsel ağırlık kazandırmak için bir fırsattır. Bu kavram, tasarımdaki görsel hiyerarşi için temeldir.

Geleneksel görsel tasarımdaki bir ilkeye göre, bir çerçevenin ortasına yerleştirilen öğeler daha önemli görünür. Örneğin, birincil içerik veya arayüz öğeleri merkeze yerleştirilebilirken, gezinme, menüler ve diğer ikincil içerikler genellikle yanlarda tutulur.

Ancak öncü tasarımcılar statükoya meydan okumayı severler. Etkileşimli tasarımlar, temel görsel hiyerarşi prensiplerini uyguladığında ve sınırları yenilikçi görsel kompozisyonlara zorladığında ilginç yeni deneyimler yaratılır. Farklı bir hizalama kullanılarak, öğeler arasında yeni çağrışımlar ve anlamlar oluşturulur.

Örneğin, müzisyen Jonathan Dagan, albüm kaydının yaratıcı yapısını iletmek için bir web sitesi oluşturdu. İlk olarak, ziyaretçiler geleneksel olarak bir albüm formatında hizalanmış olan albümün parçaları arasında tıklayarak müziği dinlemeye davet edildi. Ancak, ziyaretçilerin sitenin öğelerini yeniden hizalamasına izin verilerek, albümün konsepti yalnızca bir dizi parça olarak değil, zaman içinde parçalanmış öğelerin doğrusal olmayan bir yapısı olarak iletildi.

https://www.jviews.net/

Görsel Hiyerarşideki Şekiller

Şekillere gelince, basit kalp şeklinin çoğu sosyal ağ kullanıcı arayüzünde 'beğen' için potansiyel kullanımını nasıl hemen ilettiğini düşünelim. Önemi veya grupları belirlemek için dört daire arasında bir kalp düşünün. Geometrik formlar, şekiller öğelere kişilik veya anlam veren belirli çağrışımlar taşıdığı için renklere benzer.

Etkileşimli tasarımda, geometrik şekiller, metinden daha hızlı ve evrensel olarak anlam ilettikleri için etkili iletişim için olmazsa olmazdır. Metin yerine, genellikle basit geometrik şekiller olan simgeler (semboller), çoğu navigasyon sistemi ve kullanıcı arayüzü için analog haline gelmiştir.

Bir görseli 'beğenmenin', bir dosyayı indirmenin, bir telefon görüşmesi yapmanın veya bir mesajı kontrol etmenin ardındaki amaç, simgelerle (geometrik şekiller) basit ve doğrudan iletilir. Bu etkili görsel iletişim biçimi, dijital ürünlerin genellikle çok sayıda dille geniş uluslararası kitlelere hizmet ettiği küresel bir pazarda giderek daha önemli hale geliyor.

Geleneksel basılı ve dijital medya arasındaki farklı etkileşim modlarını vurgulamak için, gerçek bir gazetede ‘Sanat’ bölümünü aramak ile çoğu uygulamada arama simgesini kullanmak arasındaki farkı düşünün. Yakın zamana kadar, çoğu gazete web sitesi sayfalarını basılı bir gazetedeymiş gibi düzenliyordu ve içerikleri taramak beceriksiz ve kafa karıştırıcıydı.

Görsel Hiyerarşide Hareket

Hareket eden bir öğe, durgun öğeler grubunda daha fazla görsel ağırlık taşıyacaktır ve görsel hiyerarşideki hareket, baskıda kullanılması imkansız ancak görsel tasarımcının araç setine kesinlikle dahil edilebilecek bir ilkedir.

Artık faaliyette olmayan I Remember sitesi için, ana arayüz (animasyonluydu) hemen göze çarpıyor ve etkileşimi davet ediyordu. Hareket ve arayüz işlevsel gezinme araçları olmasına rağmen, görsel tasarımcılar bu unsurların potansiyel kaybını web sitesinin altta yatan misyonunu iletmenin bir yolu olarak kullandılar: Alzheimer hastalığı. Tıpkı kuruluşun fon topladığı hastaların solan anıları gibi, web sitesi de aktif etkileşim olmadan yavaş yavaş yok oluyor.

I Remember'da kullanılan hareketli tasarım hiyerarşisi.

Bilgi Hiyerarşisinde Ses

Ses, basılı medyada kullanılması imkansız olan ancak henüz hiyerarşi ilkeleri içinde geliştirilmemiş bir başka araçtır. Ses tamamen görsel olmadığından, başvurulacak kurallar yoktur. Ancak ses, içeriği ve ruh halini veya anlamı etkili bir şekilde ileten bir tasarım aracı da olabilir. Belirli sesleri taşıyan tasarım öğeleri, birbirlerine göre gruplandırılabilir ve en cesur olanlar en önemli gibi görünebilir veya gruptan ayrılmayı ifade edebilir.

Bir öğeye bağlı bir sesin kalitesi, içeriği hızla tanımlamalı, karakterize etmeli veya yapılandırmaya yardımcı olmalıdır. İlişkili görsel öğesiyle zıtlık oluşturan bir ses nasıl yeni bir anlam aktarabilir?

Sesler kendi başlarına o kadar karmaşık olabilir ki, görsel bir şey algılanmadan önce bütün bir ruh halini veya bir tasarımın mesajını oluştururlar. Renkli bir fonun bir ruh hali oluşturması gibi, bir ses de arka planda durabilir veya bir kullanıcı arayüzünde geri bildirim sağlayabilir, örneğin mobilde bir düğmeye basıldığında yanıt verebilir. Tekniğin ilkesi temeldir, ancak kullanılabileceği yaratıcılık sihrin gerçekleşebileceği yerdir.

Kolektifin yaratıcı çalışmasındaki önemi nedeniyle, Alman sanatçı grubu ZERO'nun Guggenheim'daki sergisi için oluşturulan web sitesi, sesi atmosferik bir fon olarak ve ayrıca sitede gezinirken bir geri bildirim biçimi olarak kullanıyor. Kalın zil sesleri, bir temanın başlangıcını temsil eden parçaları belirlerken, üçüncül projeler arka planda tıklıyor.

Guggenheim'da sesin önemli bir rol oynadığı sanatçı grubu ZERO'nun mekanı.

Görsel Hiyerarşinin Kalıcı Önemi

Görsel hiyerarşi basit bir kavramdır ve teoriyi anlamak aslında bir tasarımcının iyi yapılandırılmış bir kompozisyonu uygulamadaki pratik yeteneğinden daha kolaydır. Yine de, iyi bir tasarımı korurken yeni bir ortamda yaratıcı olmak zordur.

Dijital medyanın sınırlarını gerçekten zorlayan tasarım henüz emekleme aşamasında. Umuyoruz ki, aşağıdaki infografikte ortaya konulduğu gibi görsel hiyerarşi ve iyi tasarım ilkeleri, dijital medya deneyimimiz anlam ve zevkle dolu kalsın diye teknolojinin hızla ilerlemesine ayak uyduracaktır.