Visual Hierarchy: Boyut, Ağırlık, Renk, Konum ve Gestalt Prensipleri

Sürüm notu: Bu yazıdaki örnek ekranlar Playwright 1.65 ile Chromium 158'de render edilip ölçülmüştür; script'ler Node.js 24 ile çalıştırılmıştır.

Önce Tahmin Et

Sitedeki serilerin ortak örnek uygulaması Bookstore (bir online kitapçı) için bookstore-web'in kitap detay sayfası, ekip her istek geldiğinde bir şey ekleyerek büyümüş. Pazarlama "ücretsiz kargo görünsün" demiş, turuncu bir banner gelmiş; biri yazara link istemiş, mavi olmuş; puanlar mor yapılmış. Sayfanın stilinden birkaç satır:

.info p { margin: 6px 0; font-weight: 600; }
.banner { background: #f97316; color: #fff; padding: 6px 10px; }
.title { font-size: 22px; margin: 8px 0; color: #b91c1c; }
.author { color: #1d4ed8; font-size: 18px; }
.rating { color: #7c3aed; }
.price { font-weight: 400 !important; }
.btn { padding: 8px 12px; border: 0; background: #1d4ed8; color: #fff; font: inherit; font-weight: 600; }

Sayfada dört buton var (Add to cart, Add to wishlist, Read a sample, Share) ve dördü de .btn class'ını taşıyor. Sayfayı ilk kez açan bir müşterinin gözü önce nereye gider ve kitabın fiyatını bulması ne kadar sürer? Fiyatın bu sayfadaki en zayıf öğelerden biri olduğunu söylesem şaşırır mısın? Birazdan bunu ölçeceğiz.

Bir önceki yazıda checkout ekranını heuristic'lerle değerlendirdik ve akıştaki sorunları düzelttik. Bu yazıda akış değil, ekranın kendisi var: kullanıcı neyi önce, neyi sonra görmeli ve bunu boyut, ağırlık, renk ve konumla nasıl söyleriz.

Visual Hierarchy: Gözün Okuma Sırası

Visual hierarchy, ekrandaki öğelerin önem sırasının görsel olarak ifade edilmesi. Kullanıcı bir sayfaya baktığında her şeyi aynı anda okumaz; göz önce en çok öne çıkan şeye gider, sonra ikinciye, sonra geri kalanına. İyi kurulmuş bir hiyerarşide bu sıra, kullanıcının o sayfadaki işinin sırasıyla aynıdır. Kitap detay sayfasında iş basit: "Bu hangi kitap? Ne kadar? Stokta var mı? Sepete ekleyeyim." Açıklama ve ISBN (kitabın uluslararası standart numarası) gibi meta veri ise ihtiyaç olursa bakılan bilgiler.

Bunu üç seviyeyle düşünmek yetiyor. Birinci seviye sayfanın ne olduğunu söyler (kitabın adı). İkinci seviye kullanıcının karar verip aksiyon aldığı yerdir (fiyat, stok, Add to cart). Üçüncü seviye destekleyici bilgidir (açıklama, yayınevi, sayfa sayısı). Before sayfasının sorunu, bu üç seviyenin görsel olarak birbirinden ayrılmaması. Ölçelim:

node scripts/02-hierarchy.mjs

--- before: 3 font sizes, 6 text colors, 19 of 20 text elements bold, 4 solid buttons
  title        22px 700  contrast  6.47  top  70px
  price        16px 400  contrast 15.90  top 157px
  add to cart  16px 600  contrast  6.70  top 187px
  stock        16px 600  contrast  3.29  top 233px
  isbn         16px 600  contrast 15.90  top 257px
--- after: 4 font sizes, 5 text colors, 6 of 21 text elements bold, 1 solid buttons
  title        32px 700  contrast 17.73  top  24px
  price        28px 700  contrast 16.11  top 134px
  add to cart  16px 600  contrast  6.70  top 221px
  stock        16px 600  contrast  6.47  top 168px
  isbn         14px 400  contrast 17.73  top 423px

Script her görünür metin element'inin hesaplanmış font boyutunu, ağırlığını, rengini ve arka planını okuyor (getComputedStyle ile), kontrastı da WCAG'nin (Web Content Accessibility Guidelines; web erişilebilirlik standardı) formülüyle hesaplıyor. Before'da 20 metin element'inden 19'u kalın. Fiyat ise 16 piksel ve normal ağırlıkta; sayfadaki tek kalın olmayan metin o. ISBN numarası fiyatla aynı boyutta ve ondan daha kalın. Dört buton da dolu mavi. Tahminin cevabı burada: göz önce turuncu banner'a, sonra dört mavi butona gidiyor; fiyatı bulmak için satırları tek tek okumak gerekiyor.

Her Şey Önemliyse Hiçbir Şey Önemli Değil

Kalın yazı, parlak renk ve dolu buton birer vurgu aracı. Vurgu ancak çevresi sakin olduğunda işe yarar; on dokuz kalın satırın arasında yirminci kalın satır fark edilmez. Ekibe her yeni istek geldiğinde "bu da öne çıksın" demek kolay, ama her eklenen vurgu öncekilerin değerini düşürüyor. Before sayfası tam olarak böyle oluştu.

Bu yüzden hiyerarşi kurarken ilk iş çoğu zaman bir şeyi büyütmek değil, geri kalanı sakinleştirmek. Meta verinin etiketlerini kalın siyahtan normal griye çekmek, fiyatı büyütmekten daha çok fark yaratır. kullanılabilirlik araştırma şirketi Nielsen Norman Group'un visual hierarchy yazısı da benzer bir şey söylüyor: çok sayıda boyut yerine küçük, orta ve büyük olmak üzere üç boyutla çalışmak çoğu arayüz için yeterli.

Dört Araç: Boyut, Ağırlık, Renk, Konum

Boyut

En kaba araç. Büyük olan önce görülür, ama boyut alan da harcar. Kitap adını 22 pikselden 32 piksele, fiyatı 16'dan 28 piksele çıkardık; bu iki öğe sayfanın en büyük iki metni oldu. Geri kalan her şey 16 ya da 14 piksel. Boyut farkı az ve belirgin olmalı: 16 ile 17 piksel arasındaki fark hiyerarşi değil, tutarsızlık gibi okunur. Boyut skalasının nasıl kurulacağı bir sonraki yazının, typography yazısının konusu.

Ağırlık

Aynı boyuttaki iki metinden kalın olanı öne çıkar. Ağırlık, boyuttan daha az yer harcayan bir araç; stok bilgisi 16 piksel kalarak yalnız 600 ağırlığı ve yeşil rengiyle ikinci seviyeye çıkıyor. Kural basit: ağırlığı nadir kullan. After'da 21 metin element'inden yalnız 6'sı kalın: başlık, fiyat, onay işaretiyle birlikte stok satırı ve iki buton. Meta veri listesinde kalın hiçbir şey yok.

Renk ve kontrast

Renk iki iş yapıyor: dikkat çekmek ve anlam taşımak. Before'da renkler yalnız dikkat çekmek için kullanılmış: kırmızı başlık, mavi yazar, mor puan, turuncu banner. Hiçbiri bir anlam taşımıyor ve hepsi birbiriyle yarışıyor. After'da renk rolleri sabit: koyu gri ana metin, orta gri destekleyici metin, mavi tıklanabilir şeyler, yeşil stok durumu. Kontrast da bir hiyerarşi aracı: after'da ana metin #111827 beyaz üzerinde 17.73:1, yazar ve puan gibi ikincil metinler #4b5563 ile 7.55:1. İkincil metin geri çekiliyor ama okunabilir sınırın rahatça üstünde kalıyor. Renk ve kontrast eşiklerinin ayrıntısı dördüncü yazıda.

Konum

Sol üstte ve sayfanın başında duran öğe önce görülür. Before'da sayfanın en tepesindeki şey kampanya banner'ı; after'da kitap adı. Fiyat ve Add to cart, kapağın hemen yanında ve ekranın ilk görünen bölümünde kalıyor. Meta veri ise açıklamanın da altına indi; ISBN arayan kullanıcı oraya kadar kaydırır, aramayanın gözüne takılmaz.

Gestalt Prensipleri: Neyin Neyle Gruplandığı

Gestalt prensipleri, insanın görsel öğeleri tek tek değil gruplar hâlinde algıladığını anlatan gözlemler. Laws of UX sitesi bunları ayrı başlıklarla topluyor. Arayüzde en çok işe yarayanlar ve kitap detay sayfasındaki karşılıkları:

• Proximity: birbirine yakın öğeler birbiriyle ilgili algılanır. After'da yazar ve puan başlığın 4 piksel altında, fiyat bloğu ise 20 piksel uzakta; göz başlık grubunu ve satın alma grubunu ayrı görür.
• Similarity: aynı görünen öğeler aynı türden ve aynı önemde sanılır. Before'daki dört eşit buton, Share'in Add to cart kadar önemli olduğunu söylüyordu.
• Common region: aynı çerçevenin ya da arka planın içindeki öğeler bir grup olarak okunur. Fiyat, stok, kargo notu ve butonlar açık gri bir kutunun içinde: "satın alma kararı burada".
• Continuity: aynı çizgi üzerinde dizilen öğeleri göz takip eder. After'da başlık, fiyat, açıklama ve meta veri aynı sol kenara hizalı; göz tek bir dikey çizgide aşağı iner.
• Figure/ground: göz ön planı arka plandan ayırır. Gri kutu ön plana bir zemin veriyor; aynı prensip modal'larda ve dropdown'larda gölgenin işidir.

Before sayfasında proximity bile ters çalışıyor: stok bilgisi ISBN, yayınevi ve sayfa sayısıyla aynı listede, aynı aralıkla duruyor. Böylece satın alma kararını doğrudan etkileyen bir bilgi, kimsenin bakmadığı meta veri grubunun içinde kayboluyor.

Tarama Örüntüleri: F ve Diğerleri

Kullanıcılar web sayfasını genellikle okumaz, tarar. Nielsen Norman Group'un eye-tracking çalışmalarında en çok bilinen örüntü F pattern: göz önce üstte yatay bir satır okur, biraz aşağıda daha kısa bir satır, sonra sol kenardan aşağı iner. Şirketin vurguladığı nokta önemli: F pattern bir hedef değil, bir belirti. Sayfa nereye bakılacağını söylemediğinde kullanıcı bu en az emekli yola düşüyor ve sağ taraftaki bilgiyi kaçırıyor. Başlıkları, kısa paragrafları ve belirgin bir hiyerarşisi olan sayfada kullanıcı bunun yerine başlıktan başlığa atlıyor; Nielsen Norman Group buna layer-cake pattern diyor.

Az metinli, büyük görselli sayfalar için sık anlatılan bir de Z pattern var: sol üstten sağ üste, oradan çaprazlama sol alta, sonra sağ alta. Bunun araştırma desteği F pattern'inki kadar güçlü değil; bir kural olarak değil, sade bir landing sayfasında öğeleri dizerken bir hatırlatma olarak kullan. İkisinden çıkan pratik sonuç aynı: önemli bilgiyi satırların başına ve sol kenara koy, sağ uca ve uzun paragrafların ortasına saklama.

Kitap Detay Sayfasını Yeniden Dizmek

İçerik aynı kaldı; yalnız sıra, gruplama ve stil değişti. HTML'de satın alma bilgisi kendi bölgesine taşındı:

<section class="buy" aria-label="Buy">
  <p class="price">₺420.00</p>
  <p class="stock"><span aria-hidden="true">✓</span> In stock, ships tomorrow</p>
  <p class="shipping">Free shipping on orders over ₺500</p>
  <div class="actions">
    <button class="btn btn-primary" id="add">Add to cart</button>
    <button class="btn btn-secondary">Add to wishlist</button>
  </div>
  <div class="links">
    <a href="#">Read a sample</a>
    <a href="#">Share</a>
  </div>
</section>

Stil dosyası seviyelere göre üç bölüme ayrıldı. Değerler şimdilik sabit sayı; bunları typography, renk ve spacing token'larına çevirmek sonraki üç yazının işi:

body { background: #fff; color: #111827; }
.book { display: flex; gap: 32px; max-width: 760px; margin: 0 auto; padding: 24px 20px; }
.cover { flex: none; width: 200px; height: auto; }
.info { flex: 1; }
.info p { margin: 0; }

/* seviye 1: kitabın adı */
.title { font-size: 32px; font-weight: 700; line-height: 1.15; margin: 0; }
.author { margin-top: 4px; color: #4b5563; }
.author a { color: inherit; }
.rating { margin-top: 4px; font-size: 14px; color: #4b5563; }

/* seviye 2: fiyat ve aksiyon, tek bölgede gruplu */
.buy { margin-top: 20px; padding: 16px; background: #f3f4f6; border-radius: 8px; }
.price { font-size: 28px; font-weight: 700; }
.stock { margin-top: 4px; color: #166534; font-weight: 600; }
.shipping { margin-top: 2px; font-size: 14px; color: #4b5563; }
.actions { display: flex; gap: 8px; margin-top: 16px; }
.btn { padding: 10px 18px; border-radius: 6px; font: inherit; font-weight: 600; }
.btn-primary { border: 2px solid #1d4ed8; background: #1d4ed8; color: #fff; }
.btn-secondary { border: 2px solid #1d4ed8; background: #fff; color: #1d4ed8; }
.links { display: flex; gap: 16px; margin-top: 12px; font-size: 14px; }
.links a { color: #1d4ed8; }

/* seviye 3: açıklama ve meta veri */
.desc { margin-top: 20px; line-height: 1.55; }
.meta { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 24px; margin: 20px 0 0; }
.meta dt { font-size: 14px; color: #4b5563; }
.meta dd { margin: 2px 0 0; font-size: 14px; }

Kampanya banner'ı kaldırılmadı, anlamına uygun yere indi: "Free shipping on orders over ₺500" satın alma kararıyla ilgili bir bilgi, bu yüzden fiyatın altında küçük ve gri. Turuncu zemin yerine bağlam ona değer katıyor. Sonuç yan yana:

Ölçüm çıktısındaki after satırları da aynı şeyi sayılarla söylüyor: başlık 32, fiyat 28 piksel ve ikisi de 700 ağırlıkta; stok 16 piksel ama kalın ve yeşil, fiyatın hemen altında (top 168px); ISBN 14 piksel, normal ağırlıkta ve sayfanın en altında (top 423px). Kalın metin sayısı 19'dan 6'ya, dolu buton sayısı 4'ten 1'e indi.

Primary, Secondary ve Tertiary Button

Butonların da hiyerarşisi var. Primary button, ekrandaki ana aksiyon: dolu arka plan, en yüksek kontrast. Bir görünümde bir tane olur; kitap detayında bu Add to cart. Secondary button, mantıklı ama ikincil bir alternatif: aynı boyut, kenarlıklı ve içi boş (Add to wishlist). Tertiary aksiyonlar ise link gibi görünen, daha küçük metinler (Read a sample, Share). Üç seviye, kullanıcıya hangi aksiyonun beklendiğini okumadan söylüyor.

Bunu kontrol etmenin eski ve hâlâ işe yarayan bir yolu squint test: ekrana gözlerini kısarak bak ya da ekranı bulanıklaştır. Okunabilirlik kaybolunca geriye yalnız kütleler, renkler ve kontrast farkları kalır; hiyerarşi doğruysa önemli öğeler hâlâ seçilir. Aynı iki sayfayı html'e filter: blur(6px) ekleyerek render ettim:

Before'da bulanık görüntüde akılda kalan turuncu şerit ve dört mavi dikdörtgen; hangisinin satın alma butonu olduğu belli değil. After'da sırayla kitap adı, koyu fiyat, tek mavi buton ve gri kutu seçiliyor. Bu test bir ölçüm değil ama tasarım incelemesinde iki dakikada yapılabilen dürüst bir kontrol.

Üretimde Dikkat

Hiyerarşi en çok zamanla bozulur. Her yeni kampanya, uyarı ya da "bunu da gösterelim" isteği bir vurgu ekler. Bunu engellemenin pratik yolu kuralı yazılı yapmak: "bir görünümde bir primary button", "kalın metin yalnız başlık, fiyat ve durum bilgisinde". Bu yazıdaki gibi bir script, sayfadaki dolu buton sayısını ve kalın metin oranını CI'da kontrol edip eşik aşılınca uyarı verebilir. Bu, tasarım kararını kod incelemesinde konuşulabilir hâle getiriyor.

Hiyerarşiyi farklı genişliklerde de kontrol et. 800 piksel genişlikte fiyat ve Add to cart ilk ekranda; 360 piksel genişlikli bir telefonda kapak üstte kalırsa satın alma bölgesi ekranın altına düşebilir. Mobilde kapağı küçültmek ya da satın alma bölgesini kapağın hemen altına almak gerekebilir; bunun breakpoint kararları bu serinin responsive yazısında.

Bir de pazarlama ile tasarım arasındaki dengeyi gözet. "Banner daha görünür olsun" isteği meşru; cevap onu sayfanın en parlak öğesi yapmak değil, en ilgili yere koymak. Etkisini tartışmak yerine ölçmek istersen iki versiyonu karşılaştırmanın yolu Product Management'a Giriş serisinin A/B test yazısında anlatıldı.

Sık Düşülen Tuzaklar

Birincisi, hiyerarşiyi yalnız boyutla kurmaya çalışmak. Her şeyi büyütmek bir noktadan sonra yer kalmamasına ve sayfanın kalabalık görünmesine yol açar; ağırlık ve renkle geri kalanı sakinleştirmek çoğu zaman daha etkili.

İkincisi, rengi süs olarak kullanmak. Her bilgi türüne ayrı bir renk vermek, rengin anlam taşıma gücünü yok eder; mavi tıklanabilir, yeşil durum gibi sabit roller seç.

Üçüncüsü, eşit görünen butonlar. Aynı görünen şeyler aynı önemde sanılır (similarity); primary, secondary ve tertiary ayrımı yapılmadığında kullanıcı her butonu okumak zorunda kalır.

Dördüncüsü, F pattern'i hedef sanmak. Sayfayı "kullanıcı F şeklinde okuyor" diye tasarlamak yerine, iyi başlıklar ve gruplamayla kullanıcının o şekle düşmesini gereksiz kıl.

Küçük Bir Deneme

★☆☆ After sayfasında .btn-secondary'yi .btn-primary yap. Squint test'i kendi tarayıcında (geliştirici araçlarından html'e filter: blur(6px) ekleyerek) tekrarla ve hangi butonun ana aksiyon olduğunu hâlâ söyleyebildiğini kontrol et.

★★☆ 02-hierarchy.mjs'e kalın metin oranı yüzde 40'ı ya da dolu buton sayısı 1'i aşarsa process.exitCode = 1 veren bir kontrol ekle. Before için başarısız, after için başarılı olduğunu gör.

★★★ Kitap detay sayfasını 360 piksel genişlikte render et (node scripts/shoot.mjs web/02-book-detail/after.html 360). Fiyatın ve Add to cart butonunun ilk 640 pikselin içinde kalıp kalmadığını script'le ölç; kalmıyorsa kapak ve satın alma bölgesinin sırasını değiştiren bir düzen öner ve yeniden ölç.

Bir sonraki yazıda bu sayfadaki sabit font boyutlarını bir sisteme bağlıyoruz: modular type scale, satır uzunluğu ve line-height, sistem font'u ile web font arasındaki seçim, fiyat tablolarında tabular rakamlar ve Türkçe karakterlerin font subset'lerinde ve text-transform'da düştüğü tuzaklar.