Görsel Hiyerarşi: Bir Tasarımda Önce Neyi Görürüz?

Bir etkinlik afişine baktığınızda önce etkinliğin adını mı, tarihini mi, yoksa köşedeki büyük logoyu mu fark edersiniz? Bir web sayfasında başlık, açıklama ve düğme aynı anda dikkatinizi çekmeye çalışıyorsa nereden başlayacağınızı bulmak zorlaşabilir. Görsel hiyerarşi, tasarımdaki öğelerin önem sırasını görünür kılma işidir. Bilginin yalnızca sayfada bulunmasıyla yetinmez; hangi bilginin önce, hangisinin sonra anlaşılacağını da düşünür. Bu nedenle hem estetik hem de iletişimle ilgili bir konudur.

Görsel hiyerarşi oluşturmak için karmaşık bir çizim programına veya çok sayıda süse ihtiyacınız yoktur. Boyut, renk, yazı ağırlığı, boşluk ve yerleşim gibi temel araçlarla başlayabilirsiniz. Bir okul duyurusu, sunum slaytı ya da kişisel blog sayfası üzerinde aynı soruyu sorabilirsiniz: “Bu tasarıma bakan kişi ilk olarak neyi anlamalı?” Cevap belirginleştiğinde diğer kararları ona göre vermek kolaylaşır. Bu yazıda dikkat sırasını kurmanın temel yollarını günlük örneklerle ele alacağız.

Önce bilginin önem sırasını belirleyin

Tasarımı biçimlendirmeden önce içeriğe bakın. Bir etkinlik duyurusunda etkinliğin adı, ne zaman yapılacağı, nerede olacağı ve nasıl katılınacağı bulunabilir. Bunların hepsi gereklidir, ancak aynı görsel ağırlığa sahip olmaları gerekmez. Önce temel mesajı, ardından onu açıklayan bilgileri ve son olarak ayrıntıları ayırın. Bu sıralama, bazı bilgileri saklamak için değil, okuyucunun bütünü daha rahat çözebilmesi için yapılır. Önemli ayrıntıların erişilebilir kalması gerekir.

Bir blog yazısının girişinde de benzer bir düzen kurulabilir. Başlık konuyu söyler, kısa açıklama okuyucunun ne bulacağını anlatır, tarih ve kategori ise bağlam sağlar. Tarihin başlıktan daha büyük yazılması, özel bir gerekçe yoksa dikkati yanlış yere taşıyabilir. Bu nedenle tasarım kararlarını tek tek güzel görünen öğeler olarak değerlendirmeyin. Başlığın, açıklamanın ve yardımcı bilgilerin birbirleriyle ilişkisine bakın. Bir öğenin etkisi, yanında duran diğer öğelere bağlıdır.

Boyut ve yazı ağırlığıyla öncelik verin

Büyük bir başlık, çevresindeki küçük metinden ayrılır. Bu ayrım, okuyucuya nereden başlaması gerektiğini gösterebilir. Fakat her şeyi büyütmek hiyerarşi oluşturmaz; yalnızca bütün öğeleri aynı düzeyde güçlü yapar. Başlık için bir ana ölçü, alt başlık için daha küçük bir ölçü ve gövde metni için rahat okunabilen bir ölçü belirleyin. Ölçüler arasındaki farkın algılanabilir olması, küçük oynamalardan daha açık bir düzen sunar.

Her başlığı kalın yapmak gerekli mi?

Yazı ağırlığı da dikkat yönlendirebilir. Kalın bir kelime, aynı satırdaki normal metinden ayrılır. Ancak paragrafın yarısını kalınlaştırdığınızda vurgunun sınırı kaybolur. Metinde gerçekten öne çıkması gereken kısa bölümleri seçin. Başlıklarda boyut zaten yeterli bir ayrım yaratıyorsa ayrıca çok kalın bir yazı ağırlığı gerekmeyebilir. Tasarımdaki bütün araçları her öğede birlikte kullanmak yerine, her biri için yeterli olan küçük bir karar kümesi oluşturun.

Başlık ve gövde metninin farklı yazı karakterleriyle verilmesi de bir ayrım sağlayabilir. Yine de çok sayıda yazı karakteri kullanmak, dikkati içerikten tipografik çeşitliliğe taşıyabilir. Başlangıç için sınırlı bir seçimle çalışın ve bu seçimi sayfa boyunca tutarlı uygulayın. Aynı düzeydeki başlıklar aynı biçimde görünürse okuyucu belgeyi daha rahat tarayabilir. Amaç, her bölümün ayrı bir afiş gibi görünmesi değil, bütünün içindeki yerinin anlaşılmasıdır.

Renk ve kontrastı bilinçli kullanın

Renk, bir öğeyi çevresinden ayırabilir. Açık bir zeminde koyu başlık belirginleşirken, aynı zemin üzerindeki soluk bir metin geri planda kalır. Bu özellik yardımcı bilgileri sakinleştirmek için kullanılabilir; fakat metni okunamayacak kadar silikleştirmek uygun bir çözüm değildir. Görsel önem sırası ile okunabilirliği birlikte düşünün. Tarih başlıktan daha az dikkat çekebilir, ama kullanıcı onu okumak istediğinde zorlanmamalıdır. Düşük öncelik, düşük erişilebilirlik anlamına gelmemelidir.

Bir vurgu rengi seçtiğinizde onu her yere dağıtmak yerine belirli işlevlerle ilişkilendirin. Örneğin bağlantılar ve önemli bir düğme aynı renk ailesinde olabilir. Sayfanın bütün kutuları farklı güçlü renklerle doldurulursa hangi öğenin öncelikli olduğunu anlamak zorlaşır. Rengin anlamını tek başına kullanmamak da önemlidir. Seçilmiş bir menü öğesini yalnızca renk değiştirerek göstermek yerine alt çizgi, belirgin çerçeve veya açıklayıcı metin gibi ek bir işaret düşünün.

Boşluk, öğeler arasındaki ilişkiyi anlatır

Boşluk, içerik konulmamış rastgele bir alan değildir. Bir başlığın altında duran açıklamayla yakın olması, ikisinin birlikte okunacağını hissettirebilir. İki ayrı bölüm arasındaki daha geniş aralık ise konunun değiştiğini gösterir. Böylece çizgi, kutu veya farklı arka plan kullanmadan da gruplar oluşturabilirsiniz. Bir formdaki alan başlığı ve giriş kutusu birbirine yakınsa bağlantıları daha kolay görülür; sonraki alan grubuna kadar bırakılan boşluk da düzeni belirginleştirir.

Bir sayfada bütün aralıkları eşit yapmak her zaman iyi bir sonuç vermez. Paragraf içindeki satır aralığı, iki paragraf arasındaki mesafe ve iki bölüm arasındaki boşluk farklı görevler üstlenir. Bu ölçüler arasında tutarlı bir ilişki kurun. İlgili öğeler yakın, farklı gruplar daha uzak olsun. Tasarımın gereğinden fazla sıkıştığını hissediyorsanız önce yeni süsler eklemek yerine aralıkları inceleyin. Bazen yalnızca birkaç grubun ayrılması, bütün sayfanın daha anlaşılır görünmesini sağlar.

Yerleşim ve hizalama ile bir okuma yolu kurun

Öğelerin sayfadaki konumu dikkat sırasına katılır. Ana başlığın, açıklamanın ve ilgili düğmenin birbirinden çok uzak olması, bağlantılarını zayıflatabilir. Bir arada duran öğeler ise aynı görevin parçaları olarak algılanabilir. Hizalama, bu ilişkilere düzen kazandırır. Metin blokları farklı yerlerden başlıyorsa göz her bölümde yeni bir başlangıç noktası arar. Ortak bir hizalama çizgisi kullanmak, sayfanın taranmasını kolaylaştıran sade bir yöntemdir.

Birden fazla sütun kullandığınızda hangi içeriğin birlikte okunacağını açık bırakın. Örneğin bir duyuru kartının başlığı, görseli ve açıklaması aynı kartın sınırları içinde bulunabilir. Yanındaki kartla araya yeterli mesafe koymak, yanlış eşleştirmeleri azaltır. Bunun için her kartı ağır bir çerçeveyle çevrelemek şart değildir; aralık ve hizalama da iş görebilir. Kullanacağınız araç, içerik miktarına ve tasarımın diğer öğelerine göre değişir.

Görseller başlığın önüne geçiyor mu?

Büyük bir fotoğraf veya güçlü bir illüstrasyon, sayfanın en dikkat çekici öğesi olabilir. Bu durum amaçlıysa sorun yoktur: Görsel konuyu tanıtabilir ve mesajın bir parçasını taşıyabilir. Fakat dekoratif bir resim bütün dikkati çekip gerekli bilgileri arka plana itiyorsa ölçüsünü veya yerini yeniden düşünün. Görselin tasarımdaki görevi açık olmalıdır. Sadece boş bir alanı doldurmak için eklenen her öğe, okuyucudan bir miktar dikkat ister.

Görselin içindeki renkler ve ayrıntılar da çevresindeki metinle yarışabilir. Yazıyı doğrudan hareketli bir fotoğrafın üzerine koyduğunuzda okunabilirlik değişebilir. Başlığı ayrı bir alanda tutmak ya da araya sakin bir zemin koymak bazı tasarımlarda daha açık bir çözüm sunar. Görsel ile metni birlikte değerlendirin; ikisini ayrı ayrı beğenmek, yan yana durduklarında doğru sırayı oluşturduklarını göstermeyebilir. Küçük ekranda da aynı ilişkiyi yeniden kontrol edin.

Tasarımınızı basit bir gözden geçirmeyle sınayın

Hazırladığınız sayfaya kısa bir süre baktıktan sonra gözünüzün hangi öğelerde durduğunu not edin. İlk bakışta fark edilen bilgiler, önceden belirlediğiniz önem sırasıyla uyumlu mu? Sayfayı biraz küçülterek büyük kütleleri inceleyin. Ardından normal boyuta dönüp metinlerin okunabilirliğine bakın. Bu iki kontrol farklı sorulara cevap verir: Biri genel dikkat dağılımını, diğeri ayrıntıların kullanılabilirliğini gösterir. Yalnızca küçük görünüm üzerinden karar vermeyin.

Mümkünse tasarımı daha önce görmemiş birine gösterip “Bu duyurunun konusu ne?” veya “Katılmak için ne yapman gerekiyor?” gibi görevle ilişkili sorular sorun. “Güzel olmuş mu?” sorusu, mesajın anlaşılıp anlaşılmadığını pek açıklamaz. Gelen cevaba göre hangi öğenin yeri veya ağırlığı değişmeli, onu düşünün. Bir seferde çok sayıda değişiklik yapmak yerine tek bir sorunu ele almak, kararınızın etkisini görmenizi kolaylaştırır.

Sonuç: Dikkati düzenlemek, anlamı düzenlemektir

Görsel hiyerarşi, tasarımın üzerindeki bir süs katmanı değil, içeriğin anlaşılma sırasıdır. Önce temel mesajı belirleyin; boyut, renk, boşluk ve hizalamayı bu sırayı desteklemek için kullanın. Her öğenin aynı anda dikkat çekmesi gerekmez. Okuyucuya açık bir başlangıç noktası ve takip edilebilir bir yol sunduğunuzda, tasarım hem daha sakin hem de daha kullanışlı hâle gelir.