Bir web sayfasını açan ziyaretçi her şeyi aynı anda okumaz. Gözü önce bir yere takılır, sonra başka bir yere geçer ve çoğu zaman birkaç saniye içinde sayfada kalıp kalmayacağına karar verir. Görsel hiyerarşi, bu bakış sırasını bilinçli olarak sizin belirlemenizdir. İyi kurulduğunda ziyaretçi ne sunduğunuzu hemen anlar ve bir sonraki adımı kolayca bulur. Kötü kurulduğunda her şey aynı yüksek sesle bağırır ve hiçbiri duyulmaz.
Görsel hiyerarşi ne demek?
Görsel hiyerarşi, sayfadaki öğelerin önem sırasına göre farklı ağırlıkta gösterilmesidir. En önemli bilgi en dikkat çekici şekilde, ikinci derecedeki bilgi biraz daha sakin, ayrıntılar ise en geride durur. Gazete manşetini düşünün: büyük başlık, altında daha küçük bir özet, onun altında da metin. Okur nereden başlayacağını düşünmek zorunda kalmaz.
Web sitelerinde de aynı mantık geçerlidir. Ana sayfanızın üst kısmında ne iş yaptığınızı söyleyen bir başlık, hemen altında kısa bir açıklama ve tek bir belirgin düğme varsa, ziyaretçi ne yapması gerektiğini anlar.
Neden önemli?
- Anlaşılırlık: Ziyaretçi sitenizin ne sunduğunu kısa sürede kavrar.
- Yönlendirme: Teklif isteme, arama ya da satın alma gibi istediğiniz adımı öne çıkarırsınız.
- Güven: Düzenli görünen bir sayfa, işini ciddiye alan bir firma izlenimi verir.
- Telefonda okunabilirlik: Küçük ekranda yer dar olduğu için neyin önce görüneceği daha da kritik hale gelir.
Hiyerarşiyi kuran araçlar
Boyut
Büyük olan önce görülür. Başlıklar metinden belirgin şekilde büyük olmalı; ama her başlığı dev yaparsanız fark kaybolur. Genelde üç seviye yeterlidir: ana başlık, ara başlık ve gövde metni.
Renk ve karşıtlık
Arka plandan ayrışan renk gözü çeker. Ana eylem düğmenizi markanızın vurgu rengiyle, ikincil düğmeleri daha sade bir stille gösterin. Sayfada beş farklı canlı renk kullanırsanız hiçbiri vurgu olmaktan çıkar.
Boşluk
Etrafında boşluk olan öğe öne çıkar. Boşluk, tasarımda israf değil, nefes alanıdır. Birbiriyle ilgili öğeleri yakın, ilgisiz olanları uzak tutmak da ziyaretçinin bilgiyi gruplamasını kolaylaştırır.
Kalınlık ve yazı tipi
Kalın yazı, aynı boyuttaki normal yazıdan daha önemli görünür. Sitede tek bir yazı tipi ailesiyle farklı kalınlıklar kullanmak, birçok farklı yazı tipini karıştırmaktan çok daha düzenli bir sonuç verir.
Konum ve sıra
Soldan sağa okuyan dillerde göz genellikle sol üstten başlar. Sayfanın üst kısmı ve satır başları bu yüzden değerlidir. En önemli mesajınızı sayfanın aşağısına gömmeyin.
Görseller ve ikonlar
Bir fotoğraf ya da çizim, yanındaki metinden daha önce fark edilir. Bu yüzden görseli, dikkat çekmek istediğiniz mesajın yanına koyun. Mesajla ilgisi olmayan dekoratif görseller dikkati dağıtır.
Nasıl başlanır? Adım adım
- Sayfanın tek amacını yazın. Bu sayfa ziyaretçiye ne yaptırmalı? Teklif formu doldurmak mı, ürün incelemek mi, aramak mı?
- Bilgileri önem sırasına koyun. Bir kağıda sayfadaki tüm öğeleri yazın ve 1'den başlayarak numaralandırın. Bir numara tek olmalı.
- Üç seviyeli yazı düzeni belirleyin. Ana başlık, ara başlık ve metin için boyut ve kalınlıkları sabitleyin, her sayfada aynısını kullanın.
- Bir vurgu rengi seçin. Bu rengi yalnız önemli düğme ve bağlantılarda kullanın.
- Boşlukları artırın. Sıkışık görünen bölümlerde önce öğe çıkarmayı, sonra boşluk eklemeyi deneyin.
- Telefonda kontrol edin. Masaüstünde yan yana duran öğeler telefonda alt alta dizilir. Sıralamanın hâlâ mantıklı olduğundan emin olun.
Basit bir test: bulanık bakış
Sayfanızın ekran görüntüsünü alın, gözlerinizi kısarak ya da görüntüyü bulanıklaştırarak bakın. Yazılar okunmaz hale geldiğinde hâlâ öne çıkan şey ne? Bu, sayfanızdaki bir numaralı öğe olmalı. Eğer ilk fark ettiğiniz şey bir arka plan deseni ya da önemsiz bir kutuysa, hiyerarşide sorun var demektir.
Bir diğer yöntem de sayfayı sizi tanımayan birine birkaç saniyeliğine gösterip ne gördüğünü sormaktır. Cevabı sizin istediğiniz mesajla aynıysa doğru yoldasınız.
Sık yapılan hatalar
- Her şeyi kalın ya da büyük yazmak.
- Aynı sayfada aynı ağırlıkta birden fazla ana düğme koymak.
- Ana mesajı kayan bir görsel gösterisinin içine saklamak.
- Başlık ile metin arasında yeterli boyut farkı bırakmamak.
- Sayfanın her köşesini doldurup hiç boşluk bırakmamak.
Kontrol listesi
- Sayfanın tek bir ana amacı var mı?
- İlk bakışta gözün düştüğü yer o amaca hizmet ediyor mu?
- Başlık seviyeleri birbirinden net şekilde ayrışıyor mu?
- Vurgu rengi yalnız önemli yerlerde mi kullanılıyor?
- Telefonda sıralama mantıklı kalıyor mu?
- Bulanık bakış testinden geçiyor mu?
Görsel hiyerarşi, yeni bir site kurarken en baştan planlanması gereken konulardan biridir; sonradan düzeltmek mümkün ama daha zahmetlidir. Sitenizi baştan bu mantıkla kurmak isterseniz kurumsal web sitesi hizmetimize göz atabilirsiniz.
Mevcut sitenizin düzeni hakkında görüş almak isterseniz alpinnext.tr adresinden ya da WhatsApp üzerinden 0510 220 33 51 numarasından bize ulaşabilirsiniz.