Bu yazıda
Bir tasarımda bütün öğelerin eşit ağırlıkta görünmesi, okuyucunun nereden başlayacağını anlamasını zorlaştırabilir. Görsel hiyerarşi, bilgiye önem ve ilişki sırası kazandırır. Sadece başlığı büyütmekten ibaret değildir; yakınlık, boşluk, hizalama ve görsel vurgu birlikte çalışabilir. Bu rehber kavramı tek bir afiş veya web sayfasıyla sınırlamadan ele alır. Amaç her tasarıma aynı düzeni dayatmak değil, belirli bir okuma görevinde hangi bilginin önce bulunması gerektiğini görünür hale getirmektir.
Kısa cevap
Görsel hiyerarşi, öğelerin önem ve ilişkilerini görünür bir düzenle anlatır. Boyut, ağırlık, konum, boşluk ve kontrast bu düzeni destekleyebilir. Önce okuyucunun görevini tanımlayın; sonra ana mesajı, açıklamayı ve ayrıntıları ayırın. Her şeyi vurgulamak yerine birkaç belirgin düzey kurun ve gerçek içerikle kontrol edin.
Önce bilgi önceliğini metin üzerinde belirleyin
Tasarım başlamadan okuyucunun bilmesi gereken ilk üç şeyi yazın. Ürün adını görmek, çeşitleri karşılaştırmak ve iletişime geçmek farklı görevlerdir. Varsayımsal bir hizmet föyünde iletişim adresi kadar hizmetin ne olduğu da anlaşılmalıdır. Kararsız içerik sırasını sadece renkle veya büyük yazıyla çözmeye çalışmak yerine bilgi sahibinden öncelik isteyin.
Ağırlık farkını sınırlı düzeylerle kurun
Başlık, bölüm adı ve açıklama için birbirinden ayırt edilebilir düzeyler seçin. Her cümleye farklı renk ve boyut vermek düzeni güçlendirmeyebilir. Aynı görevdeki öğeler benzer davranmalı; farklı görevdekiler de gerektiği kadar ayrışmalıdır. Birden fazla ana vurgu varsa okuyucunun hangi noktadan başlayacağı tekrar değerlendirilmelidir.
Boşluk ve yakınlıkla ilişkileri açıklayın
Bir açıklamanın hangi görsele ait olduğu çoğu zaman konumundan anlaşılır. İlgili öğeleri yakın, bağımsız grupları daha ayrı tutmak seçeneklerden biridir. Boşluğu yalnızca doldurulacak eksik alan saymayın. Aynı ürünün fiyatı başka ürünün görseline daha yakınsa yanlış ilişki kurulabilir; böyle hatalar dekoratif ayrıntıdan önce çözülmelidir.
Rengi tek yönlendirme aracı yapmayın
Ana bilgiyi yalnızca farklı renge boyamak yeterli olmayabilir. Yazı ağırlığı, açıklayıcı başlık ve konum da kullanılabilir. W3C rehberleri dijital metin ile arka plan arasındaki yeterli kontrastın önemini açıklar. Bu teknik kontrolü kişisel beğeniyle karıştırmadan yapın; kurumsal paletin seçilmiş olması bütün metin birleşimlerini otomatik olarak uygun kılmaz.
Önizlemeyi gerçek görevle sınayın
Varsayımsal bir katalog sayfasında ürün adını ve doğru kodu bulmayı deneyin. Sayfayı yakınlaştırmadan veya tasarımcının açıklamasını dinlemeden gerekli ilişki anlaşılabiliyor mu? Bu küçük kontrol kapsamlı kullanıcı araştırması yerine geçmez; fakat gözden kaçan öncelik sorunlarını gösterebilir. Yalnızca güzel veya kalabalık gibi genel yorumlar yerine somut görev üzerinden geri bildirim isteyin.
Hiyerarşiyi farklı uygulamalarda koruyun
Aynı içerik afişten mobil ekrana geçtiğinde ölçüler değişir. İlişkilerin birebir konumla değil görevleriyle korunması gerekir. BOCW ile görüşmede metin ve görsellerin yanında okuyucunun ne yapacağını da anlatın. Uyarlama kontrolünde ilk mesajın, destekleyici bilginin ve devam adımının açık kaldığını inceleyin. Ana fikir korunurken düzen değişebilir.
Akılda kalacaklar
- Önce bilgi sırasını belirleyin, sonra görsel vurgu kurun.
- Aynı görevdeki öğeler arasında tutarlı düzeyler kullanın.
- Yakınlık ve boşluğu bilgi ilişkisini açıklamak için değerlendirin.
- Tasarım kabulünde gerekli bilgiyi bulma görevini deneyin; yalnızca renk beğenisi veya bütün alanların doluluğu üzerinden karar vermek yerine okuma sırasının amaca uygunluğunu gözlemleyin.
- Son kontrolde okuyucunun ilk gördüğü öğeyi kendi kendinize varsaymak yerine temsilî bir okuma göreviyle gözlemleyin; bilgi sırası değiştiğinde hangi vurgu kararlarının yeniden inceleneceğini de ekip içinde belirtin.
Sık sorulan sorular
Hiyerarşi sadece büyük başlık mı demek?
Hayır. Konum, boşluk, hizalama ve görsel ilişkiler de bilgi önceliğini anlatabilir.
Bütün önemli bilgiler aynı büyüklükte olmalı mı?
Her bilgi farklı anda gerekli olabilir. Ana mesajla destekleyici ayrıntıyı ayırmak okuma yolunu daha açık kılabilir.
Renk kaldırılınca tasarım anlaşılmalı mı?
Bu yararlı bir kontrol olabilir. Ana ilişkilerin yalnızca renk farkına bağlı olup olmadığını görmeye yardımcı olur.
