Web Tasarımında Görsel Hiyerarşi: Örneklerle Pratik Bir Çerçeve

Web tasarımında görsel hiyerarşi, bir sayfadaki dikkatin kasıtlı olarak sıralanmasıdır. Önce neyin okunacağına, sonra neyin okunacağına, ziyaretçi sayfada kaldığı sürece neyin okunacağına siz karar verirsiniz. Sayfa ya gözü bu sırayla kasıtlı olarak yönlendirir ya da dikkati en çok dikkat çeken öğeye kaydırır ve işletme ihtiyaç duyduğu okumayı kaybeder.

Beş kaldıraç hiyerarşiyi oluşturur: Boyut, ağırlık, boşluk, kontrast ve hareket. Diğer tüm teknikler bu beşinin bir kombinasyonudur. Çoğu sayfa bunlardan ikisini doğru, üçünü yanlış yapar; bu nedenle çoğu sayfa okunmadan kalabalık görünür. Çözüm daha fazla tasarım değil. Çözüm, işletmenin gerçekten ihtiyaç duyduğu okuma yoluna göre kaldıraçları sıralamak ve ardından her bir kaldıracı bu okumaya hizmet edecek şekilde kullanmaktır.

Bu yazı, bu çözümün operasyonel versiyonudur. Beş kaldıraç, Linear, Vercel, Stripe, Figma, Arc ve Apple'ten altı gerçek açılış sayfası, şu anda yaptıkları hiyerarşi hareketleri, yaygın hataları ve gerçek çözümleri gösteren üç öncesi/sonrası eleştirisi ve geliştirme ortamına göndermeden önce yirmi dakika içinde herhangi bir çalışan dosyada çalıştırabileceğiniz bir Figma denetim kontrol listesi.

Görsel Hiyerarşi, Çalışma Tanımı

Görsel hiyerarşi, bir izleyicinin bir sayfayı okuma sırasıdır. Öğelerin DOM'da görünme sırası değil, tasarım ızgarasında yer alma sırası değil, gözün onları gerçekten algılama sırasıdır.

Güçlü hiyerarşi, gözün her seferinde tam olarak bu sırayla önce birincil mesaja, sonra ikincil mesaja ve son olarak destekleyici içeriğe odaklanması anlamına gelir. Zayıf hiyerarşi, gözün rastgele dolaşmasına, rekabet eden öğeler arasında gidip gelmesine, başlıktan önce bir altbilgi bağlantısına odaklanmasına ve ziyaretçinin sayfa görevini yerine getirmeden ayrılmasına neden olur.

Görev, sayfaya göre değişir. Bir ana sayfa kahramanının gözü önce değer önerisine, sonra harekete geçirici mesaja (CTA) odaklanması gerekir. Bir fiyatlandırma sayfasının gözü önce önerilen kademeye, sonra daha ucuz kademeye, sonra da SSS'ye odaklanması gerekir. Bir blog yazısının gözü önce başlığa, sonra arka plana, sonra da ilk paragrafa odaklanması gerekir. Hiyerarşi kaldıraç ayarları görevle birlikte değişir. Hiyerarşinin var olması gerçeği değişmez.

Bu aynı zamanda konuyla ilgili çoğu makalenin de burada durduğu yerdir. Hiyerarşiyi tanımlarlar ve uzaklaşırlar. Asıl iş onu tanımlamak değil, belirli bir sayfada hangi kaldıraçın ne yaptığını seçmektir.

Hiyerarşiyi oluşturan beş kaldıraç

Boyut, ağırlık, boşluk, kontrast ve hareket, ihtiyacınız olan tek araçlardır. Diğer her şey bu beşinin bir kombinasyonudur.

Boyut, bir öğenin etrafındaki her şeye göre göreceli ölçeğidir. Ağırlık, öğenin ne kadar ağır göründüğünü belirler ve yazı tipi ağırlığı, kontur genişliği, dolgu yoğunluğu veya görsel kütle ile kontrol edilir. Boşluk, bir öğenin etrafında ne kadar boş alan olduğunu, öğenin nefes almasını ve birincil olarak okunmasını sağlayan negatif şekli ifade eder. Kontrast, bir öğe ile arka planı arasındaki renk, değer veya doygunluk farkıdır. Hareket, öğenin görünür hale gelip gelmediğini veya etkileşime nasıl tepki verdiğini belirler.

Her hiyerarşi kararı, bu beş kaldıraçtan bir veya daha fazlasının ayarlanmasıdır. Başlık, gövde metninden daha büyüktür, bu boyuttur. CTA kalın bir yazı tipindedir, bu ağırlıktır. Kahramanın yüzde seksen beyaz boşluğu vardır, bu boşluktur. CTA, koyu bir arka plana karşı parlak turuncudur, bu kontrasttır. Başlık, gövde metninden biraz önce görünür hale gelir, bu harekettir.

Çoğu sayfanın yaptığı hata, her öğede beş kaldıraçın hepsini aynı anda kullanmaktır. Her şey büyük, her şey kalın, her şeyin etrafında boşluk var, her şey yüksek kontrastlı, her şey hareket ediyor. Her öğe aynı sıralamayı talep ettiği anda hiyerarşi kaybolur. Disiplin, hangi kaldıraçların hangi öğeyi taşıdığını seçmek ve kaldıraçları nötr bırakmaya istekli olmaktır.

Faydalı bir kural. Bir sayfadaki her öğe en fazla iki kaldıraçta sıralanmalıdır. Kahraman başlığı büyük ve yüksek kontrastlı. Tamam. CTA kalın ve yüksek kontrastlı. Tamam. Destekleyici metin her kaldıraçta nötr. Tamam. Sayfa artık gözün takip edebileceği bir sıraya sahip.

Boyut ilk okumayı belirler

Sayfadaki en büyük öğe, gözün ilk bulduğu şeydir, bu nedenle en büyük öğe, işletmenin ilk okunmasını en çok istediği şey olmalıdır.

Çoğu ekip bunu teoride bilir ve pratikte görmezden gelir. Marka ekibi istediği için logoyu en büyük öğe yaparlar. Navigasyonu en büyük öğe yaparlar çünkü navigasyonda en çok bağlantı vardır ve bunlara uyması gerekir. Kahraman görselini en büyük öğe yaparlar çünkü fotoğrafçı çok para istedi. Bu kararların hiçbiri ziyaretçinin ilk okuması gerekeni yansıtmaz.

Çözüm incelikli değil. Sayfanın içeriğine bağlı olarak, ana başlık, değer önerisi veya birincil harekete geçirici mesaj (CTA), açık bir farkla en büyük öğedir. Biraz daha büyük değil. Görünür şekilde daha büyük. İlk görüntüleme alanında başka hiçbir öğenin ilk okuma için rekabet edemeyeceği kadar büyük.

Linear bunu özellikler sayfasında yapıyor. Başlık devasa, destekleyici metin küçük, navigasyon küçük, logo küçük. İlk okumayı talep eden tek bir içerik parçası var ve göz, sayfa yüklenmeden önce ona odaklanıyor. Bunu, başlık, navigasyon ve ana görselin yaklaşık olarak aynı boyutta olduğu tipik bir SaaS ana sayfasıyla karşılaştırın. Göz bölünür, okuma yolu kırılır.

Boyut da görecelidir. Gövde metni 16 piksel olan bir sayfada 48 piksellik bir başlık çarpıcıdır. Gövde metni 28 piksel olan bir sayfada 48 piksellik bir başlık çarpıcı değildir. Sıralamayı yaratan mutlak sayı değil, orandır. Herhangi bir açılış sayfasının ana öğesinde, en az 2,5x, ideal olarak 3x veya daha yüksek bir ana öğe-gövde oranı hedefleyin.

Kalınlık, ana öğeyi ikincil öğeden ayırır

Kalınlık ikinci filtredir ve çoğu sayfanın, kalın yazı tipini bir sıralama sistemi yerine dekorasyon olarak ele alarak sessizce çöktüğü noktadır.

Kalın yazı bir hiyerarşi aracıdır. Göze, bu öğenin yanındaki normal kalınlıktaki öğelerden daha yüksek bir sıralamaya sahip olduğunu söyler. Bir sayfada, önem açısından kabaca eşit olan üç farklı paragrafta kalın yazı olduğu anda, sıralama sinyali çöker. Kalın yazı, sıralama değil, doku haline gelir. Göz ona güvenmeyi bırakır.

Kalınlığı katı bir sıralama sistemi olarak kullanın. Sayfadaki en önemli öğeye en ağır kalınlık. İkincil öğeye biraz daha hafif kalınlık. Destekleyici metne normal kalınlık. Kalınlaştırılmış ifade, çevreleyen cümleden gerçekten daha önemli olmadıkça (ki bu nadirdir), gövde metninde kalın yazı kullanmayın.

Stripe bunu disiplinle yapıyor. Herhangi bir Stripe açılış sayfasına bakın. Kahraman başlığı kalın. Destekleyici metin normal. Gövde paragraflarının içinde neredeyse hiç kalın yazı yok. Sayfa, Stripe'in istediği sırayla okunuyor ve ağırlık seviyesi, asla gürültülü hissettirmeden işin çoğunu yapıyor.

Ağırlık, tipografinin ötesine uzanır. CTA düğmesi, dolgu rengi, kenar kalınlığı veya gölge efektiyle elde edilen, çevreleyen öğelerden daha ağır bir görsel ağırlığa sahiptir. Öne çıkan fiyatlandırma kademesi, daha koyu bir kart arka planı veya daha kalın bir kenarlıkla elde edilen, çevreleyen kademelerden daha ağır bir görsel ağırlığa sahiptir. Prensip aynıdır. Daha ağır kütle, daha yüksek sıralama anlamına gelir.

Yaygın bir hata. Tasarımcılar, anahtar ifadeleri "vurgulamak" için kalın iç paragraflara başvururlar. Bu vurguların çoğu aslında daha yüksek sıralama anlamına gelmez, sadece gergin bir vurgudur. Bunları kaldırın ve gövde metni daha temiz okunur ve gerçekten önemli olan kalın yazılmış ifadeler sıralamalarını geri kazanır.

Alan, az kullanılan bir kaldıraçtır

Boş alan, boş değildir; her diğer öğeye sıralamasını veren negatif şekildir.

Alan, öğeleri izolasyonlarına göre sıralar. Etrafında en çok boş alan bulunan öğe, boyutu veya ağırlığı ne olursa olsun, en önemli olarak algılanır. Çoğunlukla boş bir görüntü alanının ortasındaki küçük bir başlık, birincil olarak algılanır. Bir navigasyon, logo ve kahraman illüstrasyonunun yanına sıkıştırılmış büyük bir başlık, dört rakip öğeden biri olarak algılanır.

Apple'in ürün sayfaları, ustalık sınıfıdır. Bir iPhone ürün sayfasındaki kahraman genellikle, negatif alanla çevrili bir görüntü alanı içinde, altında kısa bir başlık bulunan tek bir fotoğraftır. En çok alanı alan öğe okumayı kazanır ve Apple her zaman her sayfada bunu başarır. Ürün birincildir, diğer her şey destekleyicidir ve alan kaldıraç işin çoğunu yapar.

Çoğu sayfa boş alan bırakmayı reddeder. Her zaman eklenecek bir referans logosu, bahsedilecek bir özellik, yerleştirilecek bir ikincil harekete geçirici mesaj (CTA) daha vardır. Her ekleme hiyerarşiyi düşürür. Tek başına okunabilirliği sağlayan unsur artık yeni eklemeyle rekabet eder ve sıralama sinyali zayıflar.

Buradaki disiplin, görüntüleme alanını çoğunlukla boş bırakma isteğidir. Bir açılış sayfasının kahramanının en az yüzde altmış, ideal olarak yüzde yetmiş veya daha fazla boş alana sahip olması ve ana mesajın bu boşluğun ortasında veya solunda net bir görsel ada oluşturması gerekir. Kahraman bu kadar boş alanla rahatsız hissediyorsa, ekip henüz kaldıraç mekanizmasına güvenmemiştir.

Alan, unsurların içinde de işlev görür. Gövde metninin satır yüksekliği, bölümler arasındaki boşluk, kartlardaki dolgu, başlık ile destekleyici metin arasındaki boşluk. Bunların her biri bir alan kaldıraç mekanizmasıdır ve her biri unsuru çevresine göre sıralar. Sıkı satır yüksekliği ve gevşek bölüm dolgusu, gözün bu paragrafın bir birim, bir sonraki bölümün farklı bir birim olduğunu anlamasını sağlar. Gevşek satır yüksekliği ve sıkı bölüm dolgusu, gözün her şeyin tek bir sürekli metin duvarı olduğunu ve sıralamayı bulmanın zor olduğunu anlamasını sağlar.

Kontrast, gözü odaklanmaya zorlar

Kontrast, kullanıcının okuyabileceği bir sayfayı, okumayı bırakamayacağı bir sayfaya dönüştüren şeydir.

Kontrast üç eksende çalışır. Değer kontrastı, bir öğe ile arka planı arasındaki açıklık farkıdır; erişilebilir renk kontrastı'ı yönlendiren ve okunabilirliği en doğrudan kontrol eden kaldıraçtır. Renk kontrastı, bir öğe ile çevresi arasındaki ton farkıdır; bir CTA'yı sayfanın geri kalanına karşı öne çıkaran kaldıraçtır. Doygunluk kontrastı, canlı ve soluk renkler arasındaki farktır; tek bir vurguyu doygunluğu düşük bir palete karşı öne çıkaran kaldıraçtır.

Stripe'nın birincil CTA'sı, düşük doygunluklu bir sayfaya karşı tek bir yüksek doygunluklu renktir. Göz onu anında bulur çünkü tüm görüntü alanındaki tek doygun öğedir. Linear, neredeyse tek renkli bir sayfaya karşı tek bir parlak mor düğmeyle aynı şeyi yapıyor. Bu CTA'ların hiçbiri en büyük öğe değil. Hiçbiri en ağır değil. Sayfadaki en yüksek kontrastlı öğe oldukları için gözü cezbediyorlar, hepsi bu.

Yaygın bir hata. Dikkat çekmek için yarışan beş veya altı doygun renge sahip sayfalar. Yeşil bir CTA, kırmızı bir hata durumu, mavi bir bağlantı rengi, turuncu bir vurgu, kahraman illüstrasyonunda pembe bir vurgu. Her renk gözü istiyor ve göz onları sıralamaya çalışmaktan vazgeçiyor. Bir vurgu rengi seçin, onu bir iş için kullanın (genellikle birincil CTA) ve diğer her şeyi doygunluktan arındırın.

Kontrastın da minimum bir eşiği vardır. Biraz daha koyu gri bir arka plan üzerinde gri olan gövde metni gözü ve erişilebilirliği hayal kırıklığına uğratır. Gövde metninde en az 7:1 ve UI öğelerinde 4,5:1 kontrast oranını hedefleyin. Bu eşiklerin altında, kontrast kolu sıralama yaratmayı bırakır ve yorgunluk yaratmaya başlar.

Hareket, diziyi tamamlar

Hareket, son kaldıraçtır ve çoğu ekip onu aslında yönlendirme ipucu olmasına rağmen dekorasyon olarak gördüğü için en sık yanlış kullanılanıdır.

Göz, hareketi takip etmek üzere programlanmıştır. Hareket eden her şey, boyut, ağırlık, boşluk veya kontrasttan bağımsız olarak, sayfadaki en yüksek öncelikli öğe olur. Bu, bir kaldıraç için çok fazla güçtür, bu yüzden hareket en kolay yanlış yapılanlardan biridir. Her öğenin yavaşça belirdiği, yukarı kaydığı ve üzerine gelindiğinde titreştiği bir sayfa, hareketin sabit olduğu bir sayfadır; bu da hareketin artık hiçbir şeyi sıralamadığı anlamına gelir.

Hareket özelliğini az kullanın ve yalnızca en yüksek öncelikli öğede kullanın. Kahraman başlık hareket eder. CTA'nın üzerine gelindiğinde bir durumu vardır. Destekleyici metin statiktir. Göz önce başlığa iner çünkü hareket eden öğedir, ardından imleç yaklaştığında CTA'ya iner ve okuma yolu korunur.

Vercel'un ana sayfası, hareketi birincil hiyerarşi kaldıraç olarak kullanıyor. Kahraman, kasıtlı bir sırayla hareket ediyor: önce başlık, sonra destekleyici metin, üçüncü olarak harekete geçirici mesaj (CTA) ve sayfanın geri kalanı, kullanıcı kaydırana kadar çoğunlukla statik kalıyor. Hareket, sıralamayı oluşturuyor. Ziyaretçi kahraman animasyonunu bitirdiğinde, sayfayı Vercel'un okumasını istediği sırayla okumuş oluyor.

Faydalı bir kısıtlama. Hareketi, görünüm alanı başına bir öğeyle ve tek bir birincil CTA'da etkileşim durumlarıyla (üzerine gelme, odaklanma, aktif) sınırlayın. Birden fazla öğe aynı anda hareket ediyorsa, hareket kaldıraç sıralama yapmıyor, süsleme yapıyor ve sayfa, gözü belirli bir yere yönlendirmeden huzursuz hissettiriyor. Hareketin sıralama olarak kullanılması, her animasyonun zaman doldurmak yerine bir soruyu yanıtladığı hareket tasarımı prensipleri düşüncesiyle de doğal olarak eşleşiyor.

Altı gerçek açılış sayfası, açıklamalı

Çerçeve, yalnızca yayınlanmış sayfalarla temas halinde kalırsa önem kazanır, bu nedenle şu anda üretimde olan altı sayfa burada.

Her bir analiz kısa ve somuttur. Sayfanın her bir kaldıraçta ne yaptığı, nerede kazandığı ve nerede para kaybettiği gösterilir. Bunların hiçbiri mükemmel değil. Hepsi SaaS açılış sayfası temelinin üzerindedir, bu da onları incelemeye değer kılan şeydir.

Linear, sıkıştırma olarak hiyerarşi

Linear, her bir kaldıraç tam olarak bir iş yaptığı için web'deki en temiz hiyerarşilerden birini sunar.

Boyut: Ana başlık, gövde metninin yaklaşık 4 katı büyüklüğünde. Kalınlık: Başlıkta tek bir kalın yazı tipi, diğer her yerde normal yazı tipi. Alan: Yüzde yetmiş negatif alana sahip bir ana başlık, rekabet eden illüstrasyonlar yok. Kontrast: Neredeyse tek renkli bir sayfaya karşı tek bir parlak mor CTA. Hareket: Ana başlıkta sessiz bir geçiş, sayfanın alt kısmında hiçbir animasyon yok.

Göz başlığa iner, destekleyici metni görür, CTA'yı bulur ve ziyaretçi kalırsa sayfanın geri kalanını okur. Her kaldıraç kalibre edilmiştir. Her seçim, tek bir okuma yoluna hizmet eder.

Linear'un para bıraktığı yer burası. Kahramanın altındaki özellikler tablosu, kahramandan daha yoğun hale geliyor ve göz sayfanın alt kısmına indiğinde sıralama sinyali biraz zayıflıyor. Bu tablodaki boyut oranını sıkılaştırmak, kahramanın hiyerarşisini sayfanın daha aşağısına doğru genişletecektir.

Vercel, hareket olarak hiyerarşi

Vercel, birincil hiyerarşi kaldıraç olarak hareketi kullanıyor ve diğer dört kaldıraç kasıtlı olarak sessiz olduğu için işe yarıyor.

Boyut: kahraman başlığı büyük ama devasa değil. Kalınlık: normal kalınlık, ağır değil. Boşluk: cömert, aşırı değil. Kontrast: düşük, CTA'ya kadar çoğunlukla gri tonlamalı. Hareket: baskın. Kahraman, hareket yoluyla okuma sırasını oluşturan kasıtlı bir dizide canlanıyor ve sayfanın geri kalanı, aşağıdaki bento tablosunda ortaya çıkan animasyonlarla kaydırmayı ödüllendiriyor.

Bahis işe yarıyor çünkü diğer kaldıraçlar, hareketin işi yapmasına izin verecek kadar kısıtlı. Kahraman da büyük, ağır ve yüksek kontrastlı olsaydı, hareket çılgınca görünürdü. Statik durum sakin olduğu için, hareket kaos değil, koreografi gibi algılanıyor.

Vercel'ün para kaybettiği yer. İlk yüklemedeki animasyon zamanlamaları, hareket azaltma tercihi olan kullanıcıları gereğinden fazla etkileyebilir. Daha agresif bir hareket azaltma tercihi yedekleme seçeneği, diğer herkes için koreografiyi kaybetmeden bu kitle için hiyerarşiyi koruyacaktır.

Stripe, kısıtlama olarak hiyerarşi

Stripe'ün hiyerarşisi çoğunlukla görünmezdir, bu da zanaatın en yüksek biçimidir.

Boyut: oranlar açık ama dramatik değil. Kalınlık: başlıkta tek bir ağır kalınlık, diğer her yerde normal. Alan: cömert. Kontrast: sayfa boyunca düşük, tek bir yüksek doygunluklu birincil CTA rengiyle. Hareket: CTA'da sessiz bir fareyle üzerine gelme durumu dışında neredeyse hiç yok.

Stripe'un disiplini, kısıtlanmışlığın disiplinidir. Her kaldıraçtan daha fazlasını çekebilirlerdi ama bunu yapmamayı tercih ettiler. Sonuç, Stripe'un istediği sırayla okunan, ancak asla tasarlanmış gibi hissettirmeyen bir sayfadır. Hiyerarşi hissedilir, görülmez.

Stripe'un para kaybettiği yer. Bazı ürün sayfaları, kahraman bölümünü aynı anda kod örnekleri, illüstrasyon ve destekleyici metinle doldurarak, boyut kaldıraçının ilk okuma etkisini zayıflatır. Kahraman bölümünü tek bir başlık ve harekete geçirici mesajla (CTA) sınırlandırmak ve kod örneğini ikinci görünüm alanına taşımak, sıralamayı geri getirecektir.

Figma, yoğunluk olarak hiyerarşi

Figma, neredeyse tüm rakiplerinden daha fazla içeriği kahraman bölümüne sığdırır ve yine de okuma yolunu açık tutar.

Boyut: Daha küçük bir arka plana karşı büyük başlık, ürün arayüzü öğeleri daha da küçültülmüş. Ağırlık: Ağır başlık, normal arka plan, hafif arayüz katmanları. Alan: Linear veya Stripe'den daha az, çoğu SaaS rakibinden daha fazla. Kontrast: Koyu arka plana karşı başlıkta yüksek, çevredeki öğelerde daha düşük. Hareket: Ürün önizlemesinde ince, başlığın kendisinde yok.

Figma'in kahraman bölümü, boyut ve ağırlık oranlarının, görüntü alanında rekabet eden daha fazla içeriğe rağmen okumayı kazanacak kadar agresif olması nedeniyle işe yarıyor. Bu iki unsurda daha zayıf bir denge, başlığı kaybettirebilirdi. Oranlar korunduğu için, sayfa hiyerarşiyi bozmadan normalden daha fazla yoğunluğa dayanabiliyor.

Figma'in para kaybettiği yer. Navigasyon, birden fazla birincil navigasyon öğesi, ikincil navigasyon, iletişim düğmesi ve oturum açma düğmesiyle görsel olarak karmaşıklaşıyor. Bunu navigasyonda tek bir birincil CTA'ya sıkıştırmak, kahraman bölümüne karşı rekabet sıralamasını düşürecektir.

Arc, isyan olarak hiyerarşi

Arc, boyut ve ağırlık geleneklerini kasıtlı olarak kırıyor ve kontrast ve hareket yükü taşıdığı için hiyerarşi hala işe yarıyor.

Boyut: dramatik değil. Ağırlık: ağır değil. Alan: değişken, bazen dar. Kontrast: sayfa boyunca yüksek, birden fazla doygun renkle. Hareket: yoğun, paralaks, kaydırma tetiklemeli açığa çıkarmalar ve animasyonlu illüstrasyonlarla.

Arc'nin kahramanı, standart oyun kitabına karşı bir örnektir. Başlık en büyük öğe değil, en ağır değil ve gözün mutlaka ilk olarak ona odaklanması gerekmiyor. Sayfa işe yarıyor çünkü Arc bilinen-bilinmeyen bir şey, ziyaretçi merakla geliyor ve hareket artı kontrast, geleneksel hiyerarşiye ihtiyaç duymadan işlev gören bir dizi boyunca gözü çekiyor.

Bu, çerçeveyi kanıtlayan istisnadır. Arc, markanın konumlandırma, hedef kitle beklentisi ve ziyaretçilerin kaydırma ve keşfetme isteği yoluyla izin satın alması sayesinde kuralları çiğneyebilir. Çoğu marka bu izni satın almamıştır ve satın aldıklarını varsaymamalıdır.

Arc'nin para kaybettiği yer. Hareket ağırlıklı kahraman, Arc'nin ne olduğunu bilmeyen ilk kez ziyaret edenleri şaşırtabilir. Hareketin üstünde daha net bir ilk okuma öğesi, markaya zaten güvenen kitleyi yabancılaştırmadan yeni gelenlere yardımcı olacaktır.

Apple, tiyatro gibi hiyerarşi

Apple'nin ürün sayfaları, alan ve hareketin gösteriyi yönettiği, kaydırma odaklı hiyerarşinin ustalık dersidir.

Boyut: devasa ürün görselleri, temel iddialarda neredeyse billboard ölçeğinde tipografi, diğer her yerde küçük. Ağırlık: çoğunlukla hafif. Alan: muazzam, genellikle herhangi bir görüntüleme alanının yüzde sekseninden fazlası. Kontrast: Bilinçli, genellikle neredeyse siyah bir arka plana karşı kahraman fotoğrafı. Hareket: Kaydırma ile tetiklenir, her bölüm ziyaretçi sayfada aşağı doğru hareket ettikçe ortaya çıkar.

Apple, tüm kaydırmayı hiyerarşi olarak ele alır. Her bölüm yalnızca bir okuma talep eder. Ziyaretçi, sayfanın önceden koreografisini yaptığı bir diziden geçer. Sayfa sona erdiğinde, Apple, Apple'in anlatmak istediği sırayla tek bir hikaye anlatmış olur.

Apple'in para kaybettiği yer. Ürün sayfaları düşük özellikli cihazlarda yavaş olabilir ve hareket koreografisi yavaş bağlantılarda bozulabilir, bu da ortaya çıkanları hiç görmeyen ziyaretçiler için hiyerarşiyi düzleştirebilir. Daha agresif bir düşük bant genişliği yedeklemesi, uzun kuyruk için okuma yolunu koruyacaktır.

Her sayfanın tahmine dayalı değil, bilinçli bir okuma yoluna sahip olduğu bir site mi istiyorsunuz? Brainy'ı işe alın. UXBrainy hiyerarşi denetimleri ve tam tasarım sistemi çalışmaları sunarken, AppBrainy ise aynı disiplinin çalışan bir uygulamaya uygulanmasını isteyen ekipler için ürün arayüzü (UI) çözümleri sunmaktadır.

Üç Önce ve Sonra Eleştirisi

Kaldıraçları bilmek bir şey, gerçek bir sayfayı düzeltmek ise başka bir şey; bu nedenle, üç yaygın hiyerarşi hatası ve kesin çözümleri aşağıda verilmiştir.

Birincisi: Beş rakip öğeye sahip kahraman sayfası. Yaygın bir SaaS kahraman sayfasında başlık, desk, birincil CTA, ikincil CTA, müşteri logosu şeridi ve kahraman illüstrasyonu bulunur; bunların hepsi ilk görünüm alanındadır. Her öğe gözü kendine çeker, hiçbiri kazanamaz. Çözüm: En önemli öğeyi seçin (genellikle başlık ve birincil CTA), ilk görünüm alanını sadece bu iki öğeyle kaplayın, diğer her şeyi sayfanın alt kısmına itin. Kahraman sayfası artık net bir ilk okuma deneyimi sunar.

İkincisi: Her şeyi kalınlaştıran sayfa. Başlıkta kalın metin, üç paragrafta kalın ifadeler, kalın alt başlıklar, kalın CTA'lar, kalın referanslar. Ağırlık kaldıraçının sıralaması durmuştur. Düzeltme: Kalın yazılmış tüm paragrafları, kalın yazılmış ifade gerçekten çevresindeki cümleden daha önemli olmadığı sürece kaldırın. Her bölümdeki en kalın öğeye tekrar kalın yazı tipi ekleyin. Ağırlık kolu, doku yerine sıralama sistemine geri döner.

Üçüncüsü. Beş farklı vurgu rengine sahip sayfa. Yeşil CTA'lar, kırmızı hata durumları, mavi bağlantılar, turuncu vurgular, pembe kahraman illüstrasyonları. Kontrast kolu sıralamayı bırakmış ve yorgunluğa yol açmaya başlamıştır. Düzeltme: Birincil CTA için bir vurgu rengi seçin, diğer her şeyi gri tonlamaya veya marka renginin soluk versiyonlarına dönüştürün, "renkli görünüyor"un "iyi sıralanıyor" ile aynı şey olmadığını kabul edin. Sayfa artık CTA'yı temiz bir şekilde sıralıyor ve marka daha güvenli görünüyor.

Her düzeltme bir yeniden tasarım değildir. Her düzeltme, kaldıraçlar işlerini yapana kadar rekabet eden öğelerin kaldırılmasıdır. Çoğu hiyerarşi problemi, tasarım problemleri gibi görünen çıkarma problemleridir.

Yirmi Dakikalık Figma Denetim Kontrol Listesi

Bu kontrol listesini, teslimattan önce herhangi bir çalışma dosyasında uygulayın ve üretime gönderilen hiyerarşi hatalarını yakalayın.

1. Göz Kısma Testi. Ayrıntılar bulanıklaşana kadar çizim tahtasına gözlerinizi kısın. Bir öğe açıkça okumayı kazanıyor mu? Değilse, kahraman öğenin boyut veya ağırlık sorunu vardır.

2. İlk Okuma Testi. Sayfayı kapatın, bir saniye için açın, tekrar kapatın. Ne okudunuz? Birincil mesaj değilse, o öğenin boyutunu ve kontrastını düzeltin.

3. Yazı Tipi-Ölçek Oranı. Birincil başlığı gövde metnine göre ölçün. Oran 2,5x'ten azsa, boyut ayarı yetersizdir.

4. Ağırlık Envanteri. Sayfadaki kalınlaştırılmış öğeleri sayın. Görünüm alanı başına üçten fazla varsa, ağırlık sıralama değil, dekorasyondur.

5. Doygunluk Sayısı. Sayfadaki doygun vurgu renklerini sayın. İkiden fazla varsa, kontrast sıralama değil, yorucudur. 6. Boşluk oranı. Ana görünümdeki boş alanı tahmin edin. Yüzde altmıştan az ise, boşluk ayarı yetersizdir.

6. Hareket envanteri. İlk yüklemede animasyonlu olan öğeleri sayın. İkiden fazla varsa, hareket sıralaması durmuştur.

7. CTA kontrastı. Birincil CTA'nın rengini arka planıyla karşılaştırın. Kontrast oranı 4,5:1'in altındaysa, göndermeden önce düzeltin.

8. Gövde metni kontrastı. Gövde metnini arka planıyla karşılaştırın. Oran 7:1'in altındaysa, sayfa okunabilirlik açısından sorun yaşıyor demektir.

9. Satır yüksekliği. Gövde metni satır yüksekliğini kontrol edin. Yazı tipi boyutunun 1,5 katından az ise, sayfa bir duvar gibi görünür.

10. Bölüm dolgusu. Ana bölümler arasındaki boşluğu kontrol edin. Bölümler birbirine karışıyorsa, boşluk ayarı birimleri ayırmıyor demektir.

11. Mobil küçültme testi. Dosyayı mobil genişlikte açın. Hiyerarşi korunuyor mu, yoksa başlık gövde metniyle aynı boyuta mı küçülüyor? Eğer ikincisi ise, yazı tipi ölçeğinin mobil cihazlara göre ayarlanması gerekiyor.

Bu on iki kontrolü geçen bir sayfa işlevsel hiyerarşiye sahiptir. Mükemmel olmayacak, ancak utanç verici de olmayacak ve işletmenin ihtiyaç duyduğu okuma yolu ziyaretçiye ilk saniyede görünür olacaktır.

SSS

Web tasarımında görsel hiyerarşi nedir?

Web tasarımında görsel hiyerarşi, ziyaretçinin önce birincil mesajı, sonra ikincil mesajı ve son olarak destekleyici içeriği tam olarak bu sırayla okuması için sayfadaki dikkatin kasıtlı olarak sıralanmasıdır. Beş kaldıraçtan oluşur: boyut, ağırlık, boşluk, kontrast ve hareket. Güçlü hiyerarşi, gözün varsayılan olarak birincil öğeye odaklanması anlamına gelir. Zayıf hiyerarşi, gözün rekabet eden öğeler arasında dolaşması ve sayfanın temel mesajını iletememesi anlamına gelir.

Bir web sitesinde görsel hiyerarşi nasıl oluşturulur?

Her sayfada, işletmenin ilk okunmasını en çok istediği öğeyi seçin, ardından beş kaldıraçtan (boyut, ağırlık, boşluk, kontrast, hareket) ikisini o öğeye güçlü bir şekilde uygularken diğer kaldıraçları nötr tutun. İkinci öğe için de biraz daha zayıf bir kaldıraç uygulamasıyla tekrarlayın. Destekleyici içeriği her kaldıraçta nötr bırakın. Sonuç, okuma yolunun zahmetsizce görünür olduğu bir sayfadır; bu da iyi bir web tasarım prensipleri'ün her teslim edilen açılış sayfasından beklediği şeydir.

En önemli görsel hiyerarşi prensipleri nelerdir?

Beş kaldıraç boyut, ağırlık, boşluk, kontrast ve harekettir. Boyut, en önemli öğeyi en büyük yaparak ilk okumayı belirler. Ağırlık, en yüksek dereceli öğe için ağır ağırlık ayırarak birincil ve ikincil öğeleri birbirinden ayırır. Boşluk, en önemli öğeye en fazla boş alanı vererek izolasyon yoluyla sıralama yapar. Kontrast, sayfadaki en yüksek doygunluk veya en yüksek değer öğesi olarak bağlılığı zorlar. Hareket, az kullanılan tek hareketli öğe olarak diziyi tamamlar. Beşinin de birlikte çalışması gerekir, tek başına değil.

Açılış sayfalarında görsel hiyerarşi neden önemlidir?

Açılış sayfalarının tek bir görevi vardır: tek bir mesaj iletmek ve tek bir eylemi tetiklemek. Hiyerarşi olmadan, ziyaretçinin dikkati rekabet eden öğeler arasında bölünür, mesaj parçalanır ve eylem gerçekleşmez. Hiyerarşi ile ziyaretçi değer önerisini okur, harekete geçirici mesajı bulur ve sayfanın amaçladığı sırayla dönüşüm gerçekleştirir. Bir açılış sayfasındaki dönüşüm artışının her yüzdesi, sayfanın kendi öğelerini ne kadar net bir şekilde sıraladığına bağlıdır; bu da tam olarak iyi açılış sayfası tasarım prensipleri'ün uygulamak için tasarlandığı şeydir.

Görsel hiyerarşi ve bilgi mimarisi arasındaki fark nedir?

Görsel hiyerarşi, gözün tek bir sayfayı veya ekranı nasıl okuduğudur. Bilgi mimarisi ise içeriğin ve navigasyonun tüm sitede nasıl organize edildiğidir. Hiyerarşi tek bir görüntüleme alanına özgüdür, bilgi mimarisi ise deneyime küreseldir. İyi bir bilgi mimarisine sahip bir site, kötü hiyerarşiye sahip sayfalar da yayınlayabilir ve bunun tersi de geçerlidir. Her ikisi de önemlidir ve her ikisi de kasıtlı olarak tasarlanması gereken ayrı disiplinlerdir.

Çoğu Sayfanın Kaçırdığı Desen

Güçlü hiyerarşiye sahip bir sayfa, çok sayıda tasarım seçeneğine sahip bir sayfa değil, her tasarım seçeneğinin tek bir okuma yoluna hizmet ettiği bir sayfadır.

Çoğu ekibin yaptığı hata, hiyerarşiyi stilistik bir kaygı olarak ele almaktır. Güçlü hiyerarşinin daha cesur, daha renkli, daha hareketli, daha görsel ilgi çekici anlamına geldiğini düşünürler. Oysa bunun tam tersi daha doğrudur. Güçlü hiyerarşi genellikle eksilticidir. Görünüm alanını çoğunlukla boş bırakmaya, her bölümde yalnızca bir öğeye ağırlık vermeye, vurgu paletini tek bir doygun renkle sınırlandırmaya, hareketi her katlamada bir öğeyle sınırlamaya istekli olmaktır. Sonuç, asla tasarlanmış gibi hissettirmeyen, kasıtlı bir düzende okunan bir sayfadır.

Güçlü hiyerarşi sunan markalar (Linear, Stripe, Apple) bunu içselleştirmiştir. Daha zayıf hiyerarşiye sahip sayfalar üreten markalar genellikle ekleme tuzağına düşerler; her üç aylık incelemede kahraman bölümüne yeni bir öğe, gövdeye yeni bir kalınlaştırılmış ifade, harekete geçirici mesaja yeni bir vurgu rengi eklenir ve kümülatif etki orijinal okuma yolunu boğar. Çözüm nadiren yeniden tasarımdır. Çözüm bir denetim, bir kaldırma işlemi ve her bir kaldıraçın tek bir amaç için kullanılması disiplinine geri dönmektir.

Eğer ekibiniz okuma yolunun belirsiz olduğu, her öğenin dikkat çekmek için yarıştığı, A/B testleri ne olursa olsun dönüşüm sayılarının değişmediği sayfalar üretiyorsa, altta yatan sorun neredeyse her zaman bir hiyerarşi sorunudur. Kaldıraçlar yanlış çekiliyor. Kaldıraçlar rekabet ediyor. Kaldıraçlar aynı anda çok fazla şey yapıyor. Sayfayı boyut, ağırlık, boşluk, kontrast ve hareket olmak üzere beş bağımsız kadran olarak ele alın, her birini işletmenin ihtiyaç duyduğu okuma yolu için ayarlayın ve sayfa tekrar çalışmaya başlayacaktır.

Her sayfanın kasıtlı bir okuma yoluna ve her görüntüleme alanında işini yapan bir hiyerarşiye sahip olduğu bir site istiyorsanız, Brainy'ı işe alın. UXBrainy, hiyerarşi denetimleri, tasarım sistemleri ve hiyerarşinin spesifikasyona entegre edildiği tam web tasarım projeleri sunar. AppBrainy ise, oturum açılmış ürün arayüzlerine aynı disiplini uygulayarak ürün kullanıcı arayüzleri sunar. Bu sayfadaki çerçeve, her projede, her sayfada, herhangi bir şey yayınlanmadan önce çalıştırdığımız şeydir.