Önce: Görsel hiyerarşiyi bilmek neden önemli?

Pazarlama, marcom, ürün yönetimi alanında sadece görsel tasarımcılar çalışmıyor. Hatta bazı yerlerde bu alanda karar verenler görsel tasarımcı değil. “Gözüme bu güzel geldi” gibi kıyafet seçiminde kullanılabilecek cümlelerin azalmasını sağlamak adına, görsel tasarımcıların, tasarım ajansların veya bu konuda bilgili olan insanların etrafını eğitmesi, doğru işin seçilmesi, zaman, para ve emek tasarrufu adından önemli. O yüzden hiyerarşi ne demek görsel hiyearşi nedir bunları bu alanda çalışan herkesin bilmesi gerekir.

Başlayalım.

Görsel Hiyerarşi nedir?

Görsel hiyerarşi, öğelerin önem sıralarını göstermek için düzenleme ilkesidir. Tasarımcılar, kullanıcıların bilgileri kolayca anlayabilmesi için görsel karakteristikleri yapılandırır. Tasarımcılar öğeleri mantıksal ve stratejik olarak yerleştirerek kullanıcıların algılarını etkiler ve onları istenen eylemlere yönlendirir.

“Görsel hiyerarşi, deneyimin sunumunu kontrol eder. Bir sayfada nereye bakacağınızı bulmakta zorlanıyorsanız, büyük olasılıkla düzeninde net bir görsel hiyerarşi eksiktir. ”

– Nielsen Norman Grubu

Görsel Hiyerarşinin Yapı Taşları

Hiyerarşi, bir görsel tasarım tasarımcıların aşağıdaki özellikleri değiştirerek her sayfanın / ekranın içeriğinin önemini göstermek için kullandıkları ilke:

• Boyut – Kullanıcılar daha büyük öğeleri daha kolay fark eder.
• Renk – Parlak renkler genellikle sönük olanlardan daha fazla dikkat çeker.
• Kontrast – Dramatik kontrastlı renkler daha dikkat çekicidir.
• Hizalama – Hizalama dışı öğeler, hizalanmış olanlara göre öne çıkar.
• Tekrar – Tekrarlanan stiller, içeriğin alakalı olduğunu önerebilir.
• Yakınlık – Yakın yerleştirilmiş öğeler birbiriyle ilişkili görünüyor.
• Beyaz boşluk – Öğelerin etrafındaki daha fazla boşluk, gözü onlara doğru çeker.
• Doku ve Stil – Daha zengin dokular, düz olanlara göre öne çıkar.

Etkili bir görsel hiyerarşi, beklentileri olan kullanıcıları bilgilendirmeye, etkilemeye ve ikna etmeye yardımcı olur. Bu nedenle, bir web sitesinin, uygulamanın, broşürün, posterin veya ilgili ürünün başarılı olması için sayfalarını veya ekranlarını kullanıcıların belirsizliğini en aza indirecek, onlarla maksimum empati gösterecek ve onlara hoş bir görüntü verecek şekilde yapılandırmak çok önemlidir.

Güçlü Bir Görsel Hiyerarşi Nasıl Oluşturulur

Güçlü bir görsel hiyerarşi, kullanıcıları bir sayfanın / ekranın işlevselliğine götürür ve onlara doğru görsel ipuçlarını verir. Kullanıcılarınız hakkında bilgi edinmek için kullanıcı araştırmasına ihtiyacınız olacak, Ancak işte bazı genel gerçekler:

• Bir arayüzle karşılaştıklarında, kullanıcılar son derece hızlı tepki verirler (milisaniye cinsinden), kalmak veya ayrılmak konusunda içgüdüsel duygular geliştirirler.
• Kullanıcıların ‘ gözleri kültürel olarak etkilenen öngörülebilir okuma yollar izler. Soldan sağa okuyan Batılı kullanıcılar bir F- ve bir Z-kalıbı kullanır. Yani, şu şekilde bir hiyerarşi tasarlayabilirsiniz:
  • Bu doğal kalıpları güçlendirin ve kullanıcıları akıllıca oluşturulmuş bir yolda istenen hedefe doğru yönlendirin; veya
  • Kullanıcılar için bir odak noktasını vurgulamak için bu kalıpları kırın .
  • Kullanıcılar hatırlamak yerine tanımayı tercih ediyor, (mesela: bir soruya ilişkin cevabı beyinlerinde anımsamak yerine onunla ilgili sunulan seçeneklerden tercih yapmak) – bu nedenle bir şeyleri okumak ve hatırlamak için çalışmak yerine tarayabilmelerine izin vermek önemlidir.

Böylece, kullanıcılara kendi bağlamlarında hedeflere ulaşmaya çalışırken en önemli şeyleri nasıl göstereceklerini tasavvur etmenize yardımcı olabilirsiniz. Ardından, en önemli bilgileri belirgin ve göz ardı edilemez hale getirmek için öğeleri seçebilir ve ölçeklendirebilirsiniz.

Şu noktalar özellikle önemlidir:

• Gestalt ilkeleri- Bunlar insan gözüne hitap ediyor. Kullanıcıların görsel öğeleri gruplandırmasına, her sayfada neyin önemli olduğunu fark etmesine ve markanızla güven oluşturmasına yardımcı olmak için bunları kullanın.
• Tutarlılık – Tanıdık simgeler, menü hiyerarşisi, renkler vb. Kullanıcılar için çok önemli yardımcılardır.
• Ana sahne – Bullanıcılara önemli şeyleri en baştan göstermek için.
• Boşluk – Net, temiz minimalist tasarımların anahtarı; kullanıcıların gözlerini sakinleştirmek ve onları önemli ön plandaki öğelere yönlendirmek için kullanın.
• Tipografi – Mobil cihazlar için masaüstü erişimli ekranlar için üç düzey metin sunmak için en iyi yazı tipini, rengi ve kontrastı kullanın.
• Mobil UX tasarımına özgü ayrıntılar – Küçük ekranlardaki kullanıcılar öğeleri hemen fark edebilmeli ve çok daha kolay gezinmelidir.
  • Tipografi ve stil – Şaşaalı yazı tipleri bazı endüstrilerde daha uygundur, ancak süslü metinler ve özel efektler (ör. Kabartmalı, silik metin) kullanıcıların dikkatini dağıtabilir ve hatta küçük dikkat dağıtıcı unsurlar kullanılabilirliği azaltabilir.
    • Birincil – Gazete başlığı gibi sayfanın / ekranın temel bilgileriyle kullanıcıların dikkatini çekmek için bir başlık kullanın. Bir başlığın ilk iki kelimesi, kullanıcıların altındaki bölümün ana fikrini anlamasına izin vermelidir.
    • İkincil – Kullanıcıların içeriği taramasına ve içerikte gezinmesine yardımcı olmak için (örneğin) alt başlıkları kullanın.
    • Üçüncül – Gövde, daha küçük ama yine de oldukça okunabilir.

Tasarım Kuralları başlığın gövde metni boyutuna 3: 1 oranını öneriyo.

Görsel Hiyerarşi ile İlgili Dikkat Edilmesi Gerekenler

Görsel hiyerarşinizi kullanıcılar için optimize etmek için göz önünde bulundurulması gereken bazı önemli noktalar şunlardır:

• Mobil UX tasarımı ayrıntılar – Küçük ekranlardaki kullanıcılar öğeleri hemen fark edebilmeli ve çok daha kolay gezinmelidir.
• Tipografi ve stil – Şaşaalı yazı tipleri bazı endüstrilerde daha uygundur, ancak süslü metinler ve özel efektler (ör. Kabartmalı, silik metin) kullanıcıların dikkatini dağıtabilir ve hatta küçük dikkat dağıtıcı unsurlar kullanılabilirliği azaltabilir.
• Kullanıcıların anlayın – Kullanıcıları sıralı bilgi duygusuyla yönlendirmek istiyorsunuz – Yani, bir ekranda her şeyi vurgulamak amacınızı yenilgiye uğratır. Aynı zamanda, kullanıcılarınhangi öğelerin eşit derecede önemi olduğunu da bilmesi çok önemlidir  (örneğin, bazı kontrol panellerindeki dialpad).
• Amacını hatırlayın – Kullanıcıların etkileşimi boyunca her sayfa / ekranın fonksiyonu nedir? Örneğin, müşteri yolculuk haritaları özellikle neyin ne zaman önemli olduğunu görmeye yardımcı olur. Önem sırasını belirledikçe, dışarıda bırakabileceğiniz bazı gereksiz unsurları muhtemelen fark edeceksiniz. (Bunu buraya koymazsam ne değişecek? diye sormanız çok etkili olur. Gereksiz ikincil hedefleri kaldırmak, çoğu zaman birinci hedefe ulaşmanıza daha çok yardmcı olur. )

Genel olarak, tasarımınızın görsel hiyerarşisinin, birlikte en iyi şekilde görünmesi ve çalışması gereken iyi seçilmiş öğeleri düzenlemeye yönelik yapı olduğunu unutmayın – böylece kullanıcılar sorunsuz deneyimler yaşayabilirler.