Kısa cevap
Görsel hiyerarşi, içerikte neyin önce ve neyin sonra fark edilmesi gerektiğini ölçek, renk, boşluk ve konumla düzenlemektir.
Nerede işine yarar?
İşlemin önceliği ve içerik türleri görünür hale getirilir. Bütün öğeler yüksek kontrast ve büyük ölçü kullandığında belirgin bir sıra kalmayabilir. Hiyerarşi, görsel etkiyle birlikte okuma ve görev tamamlama kolaylığı üzerinden değerlendirilir.
Tanımdan uygulamaya, kendi denemene.
Bir cümlede uygulaması
Sayfa başlığını ana işlemden ve yardımcı açıklamalardan farklı ağırlıkta sunmak.
Neyle karıştırılmamalı?
Hiyerarşi tek bir öğeyi sürekli büyütmek değil, öğeler arasında anlaşılır ilişkiler kurmaktır.
Her şey önemliyse önce neye bakıyoruz?
Bir etkinlik sayfasında başlık, tarih, konuşmacı, açıklama, bilet düğmesi ve sponsorlar aynı ağırlıkta görünsün. Bütün bilgiler mevcut olsa da ziyaretçi neyi önce okuyacağını anlamakta zorlanabilir. Görsel hiyerarşi burada içerik silmek zorunda değildir; parçaların önem ve ilişkisini düzenler. Önce etkinliğin ne olduğu anlaşılır, ardından kişinin katılım kararını etkileyen bilgiler gelir, sonra ilgili işlem bulunur. Bu sıra içeriğin amacına göre değişebilir ama bilinçli olarak kurulmalıdır.
Örnekte büyük bir arka plan görseli sayfanın karakterini taşıyabilir. Fakat başlık düşük kontrastta kalıyor veya bilet eylemi görüntünün içinde kayboluyorsa görsel görevle yarışıyordur. Çözüm her şeyi daha parlak yapmak değildir. Görüntünün sakin bölgesini kullanmak, metin alanını ayırmak veya yardımcı öğeleri geri çekmek yeterli olabilir. Hiyerarşi, hangi parçanın büyüdüğünden çok öğeler arasındaki farkın ne anlattığıyla ilgilidir. Vurgu yalnız diğer parçalarla ilişkisi içinde anlam kazanır.
Aynı sayfayı mobilde düşün. Geniş ekranda yan yana görülen tarih ile açıklama artık alt alta gelebilir. Öncelik sırası yanlış kurulursa önemli bilgi uzun bir dekoratif alanın arkasında kalabilir. Görsel düzen ile belgenin okuma sırası birlikte ele alınmalıdır. Klavyeyle veya yardımcı teknolojiyle ilerleyen kişi için de anlamlı bir sıra bulunmalı. Ekrandaki konumu değiştirirken içerik ilişkilerini yalnız gözle görülen düzene emanet etmek yeterli değildir.
Hiyerarşiyi değerlendirmek için tasarıma uzun süre bakmak bazen yanıltıcıdır; tasarımcı bütün içeriği zaten bilir. Sayfayı ilk kez gören birinin ne anladığı ve hangi eylemi beklediği daha açıklayıcı olabilir. Bu tür gözlem tek başına bütün kullanıcıları temsil etmez. Yine de ilk mesajın, destekleyici bilginin ve işlemin birbirini nasıl taşıdığını konuşmaya yardım eder. Sorunu büyük veya küçük gibi genel sıfatlar yerine dikkat ilişkileriyle tarif etmek daha üretken bir geri bildirim sağlar.
Daha çok vurgu ve daha açık sıra.
Her öğeyi güçlendirmek
Başlığı büyütmek, düğmeyi parlatmak, etiketi çerçevelemek ve görseli hareketlendirmek tek tek fark edilirlik sağlayabilir. Hepsi aynı anda yapıldığında ise rekabet artar. Kullanıcı bütün öğelere bakıyor olabilir ama hangisinin ne anlama geldiğini ayırmakta zorlanabilir. Bir parçanın yeterince dikkat çekmediği durumda ilk çözüm yeni efekt eklemek değildir. Çevresindeki gereksiz vurguları azaltmak daha açık bir sıra yaratabilir.
İlişkileri belirginleştirmek
Önemli öğeyi diğerlerinden ayrıştırırken destekleyici bilgilerin okunurluğunu korursun. Boyut, konum, renk ve boşluk birlikte çalışır. Örneğin ana eylem bir düğmeyle görünürken yardımcı bağlantı daha sakin bir metin olabilir. Bu farklılık içerik türünü de anlatır. Hiyerarşi kullanıcıyı kandırmak için bir öğeyi saklama tekniği değil, mevcut seçenekleri ve öncelikleri daha anlaşılır sunma yaklaşımı olarak kullanılmalıdır.
Dikkat sırasını sınamak
Hiyerarşi yalnız büyük başlık kullanmakla kurulmaz. Kontrast, konum, boşluk ve tekrar da öncelik belirtir. Bütün öğeler aynı derecede vurgulandığında hangisinin önce okunacağı belirsizleşir. Sayfaya kısa bir bakışta hangi bilginin kaldığı, düzen hakkında yararlı bir işarettir.
- Birincil mesajı ve destekleyici bilgiyi ayır.
- CTA ile yardımcı bağlantının ağırlığını farklılaştır.
- Renk olmadan da sıralamanın anlaşılmasını kontrol et.
Hiyerarşi ile başlık seviyeleri aynı mı?
Birbirini desteklerler ama aynı değildir. HTML başlık seviyeleri belge yapısını anlatır; görsel hiyerarşi ise sayfadaki algısal önceliği kurar. Görsel boyut seçimi için anlamsal başlık sırasını bozmak doğru bir çözüm değildir.
İşin içinde sorulacaklar.
Hiyerarşi yalnız yazı boyutuyla mı kurulur?
Hayır. Kontrast, yerleşim, boşluk, yoğunluk, renk ve görsel ilişki de rol oynar. Büyük bir başlık kalabalık bir görüntü içinde geri planda kalabilir; küçük ama yalnız duran bir etiket güçlü dikkat çekebilir. Bu nedenle tek bir değeri değiştirerek bütün sorunu çözmeye çalışmak sınırlıdır. Öğeleri birlikte görmek gerekir. Hangi aracın seçileceği içerik ve marka diline göre değişir; bütün sayfalarda aynı büyüklük reçetesini uygulamak zorunlu değildir.
Ana eylem her zaman ilk ekranda mı olmalı?
Kullanıcının karar vermek için ne kadar bilgiye ihtiyaç duyduğuna bağlıdır. Basit bir işlemde erken eylem yararlı olabilir; karmaşık bir hizmette önce kapsamın anlaşılması gerekir. Yine de eylemin yeri belirsiz olmamalıdır. Uzun sayfalarda anlamlı noktalarda tekrar eden bağlamsal çağrılar kullanılabilir. Aynı düğmeyi her bölümde göstermek yerine, okuyucunun o noktada hangi adımı atmaya hazır olduğunu düşünmek daha açıklayıcı bir düzen oluşturur.
Görsel hiyerarşi ile HTML başlıkları nasıl ilişkilidir?
Birbirini desteklerler ama aynı mekanizma değildir. Başlık seviyeleri belgenin anlamsal bölüm düzenini kurar; görsel stiller bu yapıyı ekranda gösterir. Daha küçük görünmesi gerektiği için bir H2'yi H4 yapmak doğru çözüm değildir. Tasarım boyutu CSS ile ayarlanabilir. Başlıkları yalnız görsel dekor gibi seçmek yardımcı teknolojilerle veya metin görünümünde kullanılan sayfanın yapısını bozabilir. İçerik ilişkisi önce doğru tanımlanmalıdır.
Birden fazla odak noktası olabilir mi?
Olabilir; uzun bir sayfada farklı bölümler kendi odaklarını taşır. Sorun aynı anda ve aynı alanda birbiriyle ilişkisiz çok sayıda öğenin başrol istemesidir. Bölüm geçişleri, boşluk ve farklı kompozisyonlar okuyucunun yeni bir odağa geçtiğini anlatabilir. Hiyerarşi bütün siteyi tek bir sürekli vurguya dönüştürmez. İçeriğin ritmini kurar; bazı yerlerde güçlü ifade, bazı yerlerde sakin okuma alanı bırakır.
İlk bakışta kalan üç şeyi yaz.
Bir sayfayı kısa süre gösterip kapat. İzleyenin hatırladığı bilgileri kendi beklediğin önceliklerle karşılaştır. Bu küçük deneme bilimsel bir sonuç üretmez; tasarımın hangi öğelere ağırlık verdiği hakkında konuşma başlatır.
Görsel hiyerarşi kullanıcının dikkatini bir yarışa sokmak yerine ona anlamlı bir sıra sunar. Her öğenin güçlü olması gerekmez; doğru öğenin doğru anda anlaşılması gerekir. Bazen en etkili değişiklik yeni vurgu eklemek değil, gereksiz vurguyu geri çekmektir.
Bağlantılı kavramlar
- TipografiTipografi, yazının harf biçimi, ölçüsü, aralığı ve yerleşimiyle okunabilir ve anlamlı bir düzen kurmaktır.
- KompozisyonKompozisyon, bir görseldeki öğelerin ilişki, denge ve dikkat sırası oluşturacak biçimde düzenlenmesidir.
- CTACTA, kullanıcının bir sonraki anlamlı adımı atmasını isteyen düğme, bağlantı veya kısa eylem çağrısıdır.