WEB TASARIMI UI HİYERARŞİSİ KURMAK

UI hiyerarşisi; tipografi, boyut, renk, kontrast ve whitespace gibi araçlarla bir sayfadaki elementlerin önem sırasını görsel olarak iletip kullanıcının gözünü doğru yere yönlendirmektir; bu yazıda hiyerarşinin hangi araçlarla kurulduğunu, Z ve F göz akışı pattern'lerini ve tasarımı test etme yöntemlerini öğreneceksiniz.

1. Görsel Hiyerarşi Nedir

Görsel hiyerarşi, bir tasarımdaki elementlerin önem sırasını görsel olarak iletmek. Hangisi en önemli (önce baksın), hangisi ikincil (sonra baksın), hangisi destek (gerekirse baksın).

Hiyerarşinin iki amacı

Hiyerarşiyi koda dökerken kontrast, renk ve semantik yapı kararları belirleyici olur; bu konularda erişilebilirlik ve düzen tekniklerini web teknolojileri dokümantasyonu üzerinden doğrulamak sağlıklı bir alışkanlıktır. Hiyerarşi iki amaca hizmet eder:

• İletişim: Hangi bilgi öncelikli (mesaj, fiyat, CTA), hangisi ikincil (özellik listesi, açıklama).
• Yönlendirme: Kullanıcının göz hareketini istediğin akışta tutmak. Soldan sağa, üstten aşağı, ana mesajdan eyleme.

Hiyerarşi otomatik olmaz; her tasarım kararı (boyut, renk, konum, kontrast) bilinçli olarak hiyerarşi inşa eder veya yıkar.

2. Hiyerarşi Araçları

Görsel hiyerarşi şu araçlarla kurulur:

1. Boyut

Büyük elementler önce dikkat çeker. Hero başlık 48px, alt başlık 24px, paragraf 16px — bu ölçek farkı önem sırasını söyler.

Tipografi scale (örnek 8'in katları üzerinden)

• H1: 48px (en büyük, sayfada bir tane)
• H2: 32px (ana bölümler)
• H3: 24px (alt başlık)
• H4: 20px (sub-section)
• Body: 16px (paragraf)
• Small: 14px (caption, meta)
• Tiny: 12px (legal, footnote)

Bu ölçek tutarlı kullanılırsa hiyerarşi otomatik kurulur.

2. Ağırlık (Weight)

Font weight: light (300), regular (400), medium (500), bold (700), black (900).

Bold ile vurgu

Aynı boyutta bold metin regular'dan çok daha güçlü hisseder. Bold etiketlerle "önemli bilgi" sinyali verilir.

3. Renk

Sıcak renkler (kırmızı, turuncu, sarı) öne çıkar; soğuk renkler (mavi, gri) geriye gider.

Renk hiyerarşisi

• Primary action (CTA): markanın primary renk + kontrastlı arka plan
• Secondary action: outline button veya soluk renk
• Body text: yüksek kontrast (#222 veya #111)
• Secondary text: orta kontrast (#666)
• Disabled / muted: düşük kontrast (#aaa)

4. Kontrast

Yüksek kontrast (siyah-beyaz) güçlü hiyerarşi sinyali; düşük kontrast (gri-açık gri) zayıf.

WCAG kontrast eşiği

WCAG erişilebilirlik standartı: body metin için min 4.5:1 kontrast oranı; büyük metin için 3:1.

5. Konum

Sayfada üst → daha önemli, alt → daha az. Sol → önce okunan (Latin alfabesi için), sağ → sonra.

F-pattern ile konum

"F-pattern" tipik göz hareketi: üst yatay tarama, sonra dikey kaydırma sol tarafta. Önemli mesajlar sayfanın F formunda kalan kısımlarına konulur.

6. Whitespace

Elementlerin etrafındaki boşluk. Bir elementi izole eden whitespace onu vurgular.

Boşluk aktif bir araç

Boş alan tasarımda pasif değil aktif unsur. "Buraya bak" demek için kelime değil boşluk gerekiyor.

7. Tekrar ve Pattern

Aynı şekilde görünen elementler "aynı kategori" sinyali verir. Farklı şekilde görünen "farklı kategori".

Farklılıkla vurgu

3 card aynı boyut + aynı stil → birbirine benzer 3 seçenek. Bir card farklı stil → "en popüler" gibi vurgu.

8. Hizalama

Hizalı elementler düzen; hizasız elementler kaos. Grid sistemi bu hizalamayı garanti eder.

3. Hiyerarşi Seviyeleri

Tipik bir UI'da üç hiyerarşi seviyesi:

• Birincil: En önemli mesaj/action. Hero başlık, primary CTA. Sayfada 1-2 tane.
• İkincil: Destek bilgi/seçenek. Section başlıkları, secondary CTA, supporting visuals.
• Üçüncül: Detay/meta. Caption, footnote, secondary metadata, footer.

Bu üç seviyeyi tutarlı uygulayan sayfa kullanıcıya net hiyerarşi sunar. Beş veya altı seviye karıştırılırsa hiyerarşi çözünür.

4. Pratik Örnek — Landing Page

Bir SaaS landing page'ini hiyerarşi açısından kuralım:

1. Hero başlık (H1): 48px bold, koyu renk. Sayfada en büyük element.
2. Alt başlık / lead: 20px regular, orta gri. Açıklayıcı.
3. Primary CTA buton: Marka rengi arka plan, beyaz metin, büyük (padding 16px 32px). Yüksek kontrast.
4. Secondary CTA: Outline (border only), aynı boyut. Daha az dikkat.
5. Hero görsel/illüstrasyon: Sağ tarafta. Büyük; ama metin kadar dominant değil.
6. Feature başlıkları (H2): 32px medium.
7. Feature açıklamaları: 16px regular.
8. Müşteri logoları: Küçük, soluk; "sosyal kanıt" rolü ama dikkat çekmemeli.
9. Testimonial: 18-20px italic, ortalanmış. Vurgu.
10. Footer: 14px, soluk gri. Minimal dikkat.

Kullanıcının gözü: önce hero başlık (büyük) → CTA (renkli) → hero görsel (büyük) → kaydırıyor → feature başlıklar (32px) → küçük açıklamalar (16px) → footer (14px).

5. Z ve F Pattern

Kullanıcı gözünün doğal akış pattern'leri:

Z Pattern

Az içerikli sayfalarda (landing page, hero section): üst sol → üst sağ → diagonal → alt sol → alt sağ. Bir Z şekli çizer.

Optimum yerleşim

• Üst sol: logo
• Üst sağ: secondary nav / CTA
• Orta: hero başlık ve görsel
• Alt sol: secondary action
• Alt sağ: primary CTA

F Pattern

İçerikli sayfalarda (blog, ürün listesi): üst yatay tarama, sonra daha kısa ikinci yatay, sonra dikey scroll sol tarafta. F şekli.

Optimum yerleşim

• İlk satırlar dikkat çeker
• Sol kenar daha çok izlenir
• Önemli bilgiyi sol tarafta tut
• Subheading her bölümün başında

6. CTA Hiyerarşisi

Bir sayfada birden çok CTA varsa hiyerarşi şart:

• Primary CTA: Sayfanın ana hedefi (kayıt ol, satın al). Yüksek kontrast renk, büyük, belirgin.
• Secondary CTA: Alternatif eylem (daha fazla bilgi, demo). Outline, daha az dikkat çekici.
• Tertiary CTA: Tamamlayıcı (giriş yap, fiyat sayfası). Sadece link, button değil.

Tek bir sayfada 5 farklı renk button, hepsi büyük, hepsi yüksek kontrast → kullanıcı "hangisine tıklayayım" diye düşünür → tıklamaz. Bir baskın CTA + ikincil sessiz seçenekler güçlü hiyerarşi.

7. Tipografi ile Hiyerarşi

Tipografi hiyerarşinin en güçlü aracı. Tipografik karar setleri:

• Font ailesi: Display (başlık) + body (paragraf) — iki farklı font ailesi tipik. Aynı font weight değişimleriyle de hiyerarşi kurulabilir.
• Scale: 8'in katları veya 1.25/1.5 oran tabanlı (modular scale).
• Line-height: Body için 1.5-1.7; başlık için 1.1-1.3. Tutarlı.
• Letter-spacing: Büyük başlıkta negatif (-0.02em), all-caps'te pozitif (0.05em).
• Color: Başlık çok koyu, body koyu gri, secondary text orta gri.

Bir font ailesi seçip 4-6 farklı weight + 6-8 farklı boyut kombinasyonu yeterli; çoğu site bu set ile tüm tipografi ihtiyacını karşılar.

8. Renk Sistemi ile Hiyerarşi

Renk paletinde de hiyerarşi:

• Primary brand: CTA, ana logo, anlam taşıyan elementler.
• Secondary: Destek vurgu.
• Neutral palette: Body text, arka plan, border. Çok soluk gri'den çok koyuya 5-7 tonlu.
• Semantic colors: Success (yeşil), warning (sarı), error (kırmızı), info (mavi). Az kullan; sadece anlam taşıdığında.

İyi renk paleti 3-4 ana renk + 6-8 neutral ton. Bunun ötesine geçen palet kaos.

9. Spacing Sistemiyle Hiyerarşi

Section'lar arası geniş boşluk, paragraflar arası dar boşluk, satır içi (kelime arası) en dar. Spacing scale ile bu disiplin kurulur.

Spacing scale örneği (8px tabanlı)

• 2: 16px (paragraph margin)
• 3: 24px (component internal)
• 4: 32px (related blocks)
• 6: 48px (different sections)
• 8: 64px (major sections)
• 12: 96px (page-level breaks)

Bu scale dışı değer (örn. 27px) yasak. Tutarlılık görsel ritim yaratır.

10. Dikkat Eksikliği Sorunu

Hiyerarşinin başarısız olduğu sayfalar:

• Her bölümün başlığı aynı boyutta → eşdeğer hissedilir, ana mesaj kaybolur.
• Çok fazla renk → hiçbir renk öne çıkmaz.
• Tüm metinler bold → hiçbir şey bold gibi hissedilmez.
• Yetersiz whitespace → her şey sıkışık, gözün takılacak yer yok.
• Aşırı whitespace → fragmentation; ilişki kayboluyor.

"Squint test" — gözleri kıs, sayfaya bak. Bulanıklaşmış görüntüde yine net bir hiyerarşi görünüyor mu? Görmüyorsan, hiyerarşi yetersiz.

11. Mobile Hiyerarşi

Mobilde ekran küçük; hiyerarşi daha kritik. Tipik prensipler:

• Birincil action sticky veya ekran altında (parmak erişimi).
• Üst kısımda en kritik bilgi (hero başlık, ana CTA).
• Görsel kontrast daha güçlü tutulmalı (küçük ekranda nüans kaybolur).
• Whitespace mobile'da bile yeterli; sıkıştırılmış mobile tasarım sıklığı UX'i bozar.
• Maksimum 2 birincil eylem; mobil dikkat kısa.

Desktop'tan mobile geçişte sadece elementleri küçültmek değil; hiyerarşinin de yeniden ayarlanması gerekir.

12. Erişilebilirlik ve Hiyerarşi

Görsel hiyerarşi ekran okuyucu kullanıcı için anlamlı değil; onun için semantik HTML hiyerarşisi gerekiyor:

• H1, H2, H3 sırası mantıklı (H1'den H4'e atlamak yanlış).
• HTML5 semantic tagler (header, nav, main, article, aside, footer).
• ARIA roles ve labels.
• Skip-to-content link (klavye kullanıcısı için).

Görsel hiyerarşi semantik hiyerarşiyle uyumlu olmalı; biri görsel, diğeri semantik kanal — ikisi de aynı önem sırasını iletmeli.

13. Hiyerarşiyi Test Etmek

Tasarımı yayına almadan önce hiyerarşi testleri:

1. Squint test: Gözü kıs, bulanık görüşte hiyerarşi net mi?
2. 5-second test: Bir kullanıcıya 5 saniye sayfayı göster; ana mesajı hatırladı mı, ne yapması gerektiği netti mi?
3. First click test: "Sayfada şu eylemi yapmak için nereye tıklarsın" sorusu. İlk tıklama beklenen yerde mi?
4. Heat map: Canlıda Hotjar veya Microsoft Clarity ile gerçek kullanıcı tıklamaları. Yoğunluk beklenen yere düşüyor mu?
5. Eye-tracking: Gelişmiş usability lab testi. Pahalı ama net görsel akış verisi.

Bu testler tasarımın gerçek dünyada nasıl algılandığını gösterir; tasarımcının ekran başında yaptığı varsayımları doğrular veya çürütür.

14. Hiyerarşi Olarak Animation

Modern web'de hareket de hiyerarşi aracı:

• Hover animasyonu interactive element sinyali.
• Scroll-triggered reveal yeni bilginin dikkat çekmesi.
• Microinteraction (loading spinner, success check) durum bilgisi.
• Parallax effect derinlik ve hiyerarşi sinyali (abartılmamalı).

Animation hiyerarşi kurar ama abartılırsa karşı etki yaratır; her elementin hareketi olduğunda hareket hiyerarşi sinyali olmaktan çıkar. Az ama anlamlı animasyon en etkili.

Sistemi bir disipline dönüştürmek

Tipografi ölçeği, renk hiyerarşisi ve spacing sistemini bir disiplin olarak yerleştirmek isteyenler için web tasarımı eğitim programı bu prensipleri gerçek arayüz projeleri üzerinden uygular; squint test ve heat map gibi yöntemler de birlikte ele alınır.

Toparlarsak

UI hiyerarşisi tasarımcının "bilinçaltı" iletişim kanalıdır. Kullanıcı hiyerarşiyi göz görmez ama her bakışta hisseder; doğru yapıldığında sayfada akıcı dolaşır, yanlış yapıldığında kaybolup gider.

İyi hiyerarşi her yeni tasarımda yeniden inşa edilmez; tutarlı bir tipografi, renk, spacing sistemi kurulduktan sonra her sayfada otomatik uygulanır. Bu sistem kurma disiplini, "tek tek güzel sayfa" tasarımcısı ile "tutarlı brand" tasarımcısı arasındaki sınırdır.