Web Sitesi Görsel Hiyerarşi Nasıl Kurulur?
Bir sayfaya giren ziyaretçi her şeyi aynı anda okumaz; gözü belirli bir sırayla dolaşır ve bu sırayı tasarım belirler. Her öğenin eşit derecede öne çıktığı bir sayfada ise göz nereye bakacağını bilemez ve kullanıcı hızla ayrılır. Web sitesi görsel hiyerarşi, hangi bilginin önce görüleceğini bilinçli olarak kurma çalışmasıdır. Tasarımı yalnızca güzel görünmeye indirgemek, bu yönlendirmeyi tesadüfe bırakır. Bu yazıda konuyu tüm yönleriyle ele alıyoruz.
Peki web sitesi görsel hiyerarşi nasıl kurulur? Konuyu inceliyoruz. Siteniz için Weblike ile çalışabilirsiniz.
Önce Amacı Belirlemek
Bir sayfada ziyaretçinin yapmasını istediğiniz tek bir asıl eylem olmalıdır. Bu eylem netleşmeden hiçbir hiyerarşi kurulamaz. Amacı yazmak, sıralamayı belirler.
Boyut Farkı
Daha büyük olan önce görülür; bu en temel ve en güçlü araçtır. Ancak her şeyi büyütmek, hiçbir şeyi öne çıkarmamakla aynı kapıya çıkar. Ölçülü kullanmak, vurguyu korur.
Renk ve Kontrast
Zeminden belirgin biçimde ayrışan bir öğe dikkati anında çeker. Bu nedenle en önemli çağrının en kontrast renkte olması gerekir. Renk seçimi bu tercihi ele alır.
Konumun Gücü
Sayfanın üst bölümü ve sol taraf doğal olarak daha çok bakılan alanlardır. En kritik bilginin buraya yerleştirilmesi görülme olasılığını artırır. Konumu düşünmek, erişimi sağlar.
Beyaz Alan
Bir öğenin etrafındaki boşluk, o öğeyi öne çıkarır. Sıkışık bir düzende hiçbir şey ayrışmaz. Beyaz alan bu etkiyi ele alır. Boşluk bırakmak, vurgu üretir.
Başlık Düzeni
Başlıkların birbirine göre boyut ve ağırlık farkı, içeriğin yapısını gözle okunur kılar. Aynı görünen başlıklar hiyerarşi kurmaz. Başlık etiketi bu düzeni ele alır.
Tipografi
Yazı tipi ağırlığı, satır yüksekliği ve harf boyutu okunabilirliği doğrudan belirler. Zor okunan bir metin, ne kadar iyi konumlanırsa konumlansın okunmaz. Tipografi bu konuyu ele alır.
Metin Uzunluğu
Bir satırda çok fazla karakter bulunması gözün satır sonunu bulmasını zorlaştırır. Ölçülü bir satır genişliği okumayı kolaylaştırır. Sınırlamak, akıcılığı artırır.
Gruplama
Birbiriyle ilgili öğelerin yakın, ilgisiz olanların uzak konumlanması anlamı gözle aktarır. Rastgele dağılmış bir düzen okuyucuyu yorar. Gruplamak, anlamı kurar.
Hizalama
Öğelerin ortak bir çizgide hizalanması sayfaya düzen ve güven verir. Dağınık hizalama amatör bir izlenim bırakır. Hizalamak, düzeni gösterir.
Tek Ana Çağrı
Bir ekranda birden fazla eşit vurgulu çağrı bulunması, kullanıcıyı kararsız bırakır. Asıl çağrı belirgin, diğerleri ikincil olmalıdır. Çağrı metni bu tercihi ele alır.
Buton Hiyerarşisi
Birincil ve ikincil butonların görsel olarak farklılaşması, hangisinin öncelikli olduğunu anlatır. Aynı görünen iki buton seçim yaptırmaz. Buton tasarımı bu ayrımı kurar.
Görsel Kullanımı
Güçlü bir görsel dikkati anında çeker; bu nedenle nereye konulduğu önemlidir. Yanlış yerdeki bir görsel asıl mesajı gölgeler. Yerini düşünmek, odağı korur.
Hero Alanı
Sayfanın ilk görülen bölümü, ziyaretçinin kalıp kalmayacağına karar verdiği yerdir. Bu alanın tek bir net mesaj taşıması gerekir. Hero alanı bu konuyu ele alır.
Kaydırma Sırası
Bilgilerin sayfa boyunca hangi sırayla açılacağı, ziyaretçinin sorularını izleyen bir düzende olmalıdır. Rastgele sıralanmış bölümler ikna etmez. Sıralamak, anlatıyı kurar.
Mobilde Hiyerarşi
Küçük ekranda öğeler alt alta dizildiği için sıralama daha da belirleyici hale gelir. Masaüstünde yan yana duran iki öğenin mobilde hangisinin üstte olacağı kararlaştırılmalıdır. Mobil öncelikli tasarım bu düzeni ele alır.
Tutarlılık
Aynı işlevdeki öğelerin sitenin her yerinde benzer görünmesi, kullanıcının öğrenmesini kolaylaştırır. Sayfadan sayfaya değişen bir düzen yorar. Marka tutarlılığı bu konuyu ele alır.
Baskı ve Ekran Farkı
Ekranda kurulan hiyerarşi, farklı ekran boyutlarında aynı biçimde çalışmayabilir. Tasarımın birkaç boyutta denenmesi gerekir. Denemek, uyumu doğrular.
Sayfa Uzunluğu
Uzun bir sayfada aşağı inildikçe dikkat azalır; en önemli mesajların üst bölümlerde tekrarlanması gerekir. Sıralamak, mesajı ulaştırır.
Vurgu Sayısını Sınırlamak
Kalın, renkli ve büyük yazıların çokluğu hiçbirinin öne çıkmamasına yol açar. Az sayıda vurgu daha güçlü çalışır. Sınırlamak, etkiyi artırır.
Bölüm Geçişleri
Bölümler arasındaki görsel ayrımın net olması, sayfanın taranmasını kolaylaştırır. Birbirine karışan bölümler okuyucuyu yorar. Ayırmak, akışı kurar.
İlk Ekranda Ne Var
Kaydırmadan görülen alanda hangi bilginin bulunacağı en kritik karardır. Bu alanda eksik kalan bir mesaj, aşağıda telafi edilemez. Öne almak, görülmeyi sağlar.
Kalabalık Menü
Çok sayıda seçenek içeren bir menü, kullanıcının hangi yolu seçeceğini bilememesine yol açar. Menü yapısı bu sadeleştirmeyi ele alır. Azaltmak, kararı kolaylaştırır.
Görsel Ağırlık
Koyu renkli ve büyük öğeler gözde daha ağır durur ve dengeyi bozabilir. Sayfadaki ağırlığın dağılımına dikkat edilmesi gerekir. Dengelemek, düzeni korur.
Kesintili Okuma
Kullanıcıların çoğu metni baştan sona okumaz; başlıklara ve vurgulu bölümlere göz atar. İçeriğin bu okuma biçimine göre yapılandırılması gerekir. Uyarlamak, anlaşılmayı sağlar.
Bilgi Yoğunluğu
Bir ekrana çok fazla bilgi sığdırmaya çalışmak hiyerarşiyi tamamen bozar. Bilgiyi bölümlere yaymak, her birinin görülmesini sağlar. Seyreltmek, algıyı kolaylaştırır.
Hareket ve Animasyon
Hareket eden bir öğe dikkati her şeyden önce çeker; bu nedenle çok sayıda animasyon odağı dağıtır. Animasyon kullanımı bu dengeyi ele alır. Az kullanmak, vurguyu korur.
Okuma Sırasını Test Etmek
Sayfaya birkaç saniye bakan birine ne gördüğünü sormak, hiyerarşinin işleyip işlemediğini hızla gösterir. Bu basit deneme çoğu sorunu ortaya çıkarır. Sormak, gerçeği gösterir.
Erişilebilirlik Boyutu
Vurgunun yalnızca renkle kurulması, renk ayrımı yapamayan kullanıcılar için işe yaramaz. Boyut ve konumla da desteklenmesi gerekir. Erişilebilirlik bu konuyu ele alır.
Ölçmek
Kullanıcıların gerçekte nereye baktığı ve neye tıkladığı ölçülmelidir. Tasarım kararları varsayımla değil veriyle doğrulanır. Isı haritası analizi bu ölçümü sağlar. Genel araştırma için Google da kullanılabilir.
Hangi bilginin önce görüleceğini bilinçli olarak belirleyip ziyaretçinin dikkatini yönlendirme çalışmasıdır.
Sayfada ziyaretçinin yapmasını istediğiniz tek asıl eylemi belirlemekten; bu netleşmeden hiyerarşi kurulamaz.
Boyut farkı. Ancak her şeyi büyütmek, hiçbir şeyi öne çıkarmamakla aynı sonucu verir.
Bir öğenin etrafındaki boşluk onu öne çıkarır; sıkışık bir düzende hiçbir öğe ayrışmaz.
Bir ekranda tek bir belirgin çağrı; birden fazla eşit vurgulu çağrı kullanıcıyı kararsız bırakır.
Birincil ve ikincil butonlar görsel olarak farklılaşmalıdır; aynı görünen iki buton seçim yaptırmaz.
Öğeler alt alta dizildiği için sıralama daha belirleyici hale gelir ve hangisinin üstte olacağı kararlaştırılmalıdır.
Aynı işlevdeki öğelerin her yerde benzer görünmesi kullanıcının siteyi öğrenmesini kolaylaştırır.
Kullanıcıların gerçekte nereye baktığı ve neye tıkladığı izlenerek; kararlar veriyle doğrulanmalıdır.
Web sitesi görsel hiyerarşi; ziyaretçinin gözünün hangi sırayla dolaşacağını tesadüfe bırakmayıp bilinçli olarak kurar. Sayfa başına tek bir asıl eylem belirlemek, boyut ile kontrastı ölçülü kullanmak, beyaz alanla vurgu üretmek ve sonucu gerçek kullanıcı davranışıyla doğrulamak ise tasarımı işlevsel kılar. Konuyu tamamlayan web sitesi hero alanı yazımıza da göz atabilirsiniz.
BİZE ULAŞIN
Bizimle iletişime geçerek projeniz için hemen ücretsiz teklif alabilirsiniz.
