Bir sayfaya kısık gözle bakmak

Bir sayfa açıldığında göz önce bir yere konar, sonra bir sonrakine geçer. Bu sıra, tasarımcı onu bilerek kursa da kurmasa da oluşur. Kurulmadığında sayfa kendi kararını verir: en parlak rozet, en kalın yazı ya da en büyük görsel önce görülür; asıl yapılması istenen iş kalabalığın içinde kaybolur.

Görsel hiyerarşi, neyin önce görüleceğini seçmekten çok neyin geri çekileceğini seçmektir. Her şeyi vurgulayan bir sayfa, hiçbir şeyi vurgulamamış olur.

Okumak değil, taramak

İnsanların bir web sayfasındaki metnin ne kadarını okuduğunu ölçen araştırmalar, sayfanın büyük kısmının hiç okunmadan geçildiğini gösteriyor:

Bu yüzden sayfanın ilk birkaç saniyede neyi öne çıkardığı, metnin kendisi kadar önemlidir. Okur, taradığı birkaç öğeden sayfanın ne hakkında olduğuna ve ne yapması gerektiğine karar verir.

Görsel ağırlığı ne belirler?

Bir öğenin dikkat çekme gücüne görsel ağırlık diyoruz. Beş şey bu ağırlığı belirler:

• Boyut: Büyük öğe küçük öğeden önce görülür.
• Değer kontrastı: Zeminle arasındaki açıklık–koyuluk farkı. Renkten daha güçlüdür.
• Renk doygunluğu: Canlı bir renk, soluk tonlar arasında öne çıkar.
• Yalnızlık: Etrafında boşluk olan öğe, kalabalığın içindekinden daha kolay fark edilir.
• Konum: Sayfanın üst ve sol bölgesi (soldan sağa okunan dillerde) önce taranır.

Bu beş etkenin hepsi aynı anda çalışır. Kalın ve büyük bir başlık, küçük ama çok canlı bir rozetle aynı ağırlığa sahip olabilir. Sorun, bu dengeyi kâğıt üzerinde tahmin etmenin zor olmasıdır.

Kısık göz testi

Tasarımcıların eski bir alışkanlığı vardır: ekrana gözlerini kısarak bakmak. Gözler kısılınca yazılar okunmaz olur, ayrıntılar kaybolur; geriye yalnızca boyut ve kontrast kalır. Bulanık görüntüde hâlâ seçilen öğeler, sayfanın hiyerarşisinin tepesindedir.

Aşağıdaki demoda aynı ürün kartının iki düzenini bu testten geçirin. Bulanıklığı artırın ve rengi kapatın; hangi öğenin kaybolmadığına bakın.

Her şey vurgulandığında

Dağınık düzende yanlış giden tek bir şey yok; her öğe tek başına makul görünüyor. Sorun, hepsinin aynı anda önemli olmak istemesi. Ürün adı kalın, fiyat kalın, indirim rozeti kırmızı, açıklama iri. Göz bir yerden diğerine sıçrıyor ve asıl yapılması gereken iş, yani sepete ekleme, bu gürültünün içinde küçük bir buton olarak kalıyor.

Hiyerarşik düzen öğe eklemiyor, öğe geri çekiyor. Ürün adı tek büyük başlık oluyor, fiyat ve açıklama sakinleşiyor, kırmızı rozet sade bir etikete dönüşüyor ve sayfadaki tek doygun renk butona veriliyor. Sonuç, bulanık görüntüde bile ilk üç öğenin sırasının açıkça okunması.

Renk tek başına hiyerarşi kurmaz

Demoda rengi kapattığınızda dağınık düzenin kırmızı rozeti ağırlığının büyük kısmını kaybeder. Bu, iyi bir test sorusudur: hiyerarşi yalnızca renkle mi kuruldu? Renk körlüğü olan kullanıcılar, düşük parlaklıktaki ekranlar ya da güneş altında bakılan bir telefon, renk farkını siler. Değer kontrastı ve boyutla kurulan bir hiyerarşi bu koşullarda da ayakta kalır.

Kısa kontrol listesi

• Sayfanın tek bir birincil eylemi var mı ve en ağır öğelerden biri o mu?
• Doygun renk yalnızca vurgulanması gereken öğelerde mi kullanılıyor?
• Hiyerarşi, renk kapatıldığında da okunuyor mu?
• Birincil öğenin çevresinde onu ayıran yeterli boşluk var mı?
• Aynı ağırlıkta yarışan iki öğe kaldı mı? Kaldıysa biri geri çekilebilir mi?