Görsel hiyerarşi ve öncelik

1) Görsel hiyerarşi nedir

Görsel hiyerarşi, arayüzde kullanıcının dikkatini dağıtan ve hedef eyleme giden yolu (kayıt, para yatırma, oyun arama, filtre, çıktı) hızlı ve çatışmasız hale getiren bir vurgu sistemidir. Hiyerarşi kontrast, ölçek, konum, renk, bilgi yoğunluğu, hareket ve beyaz alan aracılığıyla oluşturulur.

Amaç: "bilişsel maliyetleri" azaltmak ve İlk Anlamlı Tıklamanın payını gerekli unsurlarla artırmak.

2) İş etkisi ve KPI'lar

• Hedef CTA dönüşümü (kayıt, para yatırma, favorilere ekleme)
• Değer Zamanı
• Karışıklık oranı
• Sıçrama, kaydırma derinliği ve tutma

• FMC (İlk Anlamlı Tıklama): Yüklemeden saniyeler sonra CTA ≤ N anahtarına tıklayan kullanıcıların yüzdesi.
• TTV (Time to Value): Girişten anahtar değerine kadar geçen süre (örn. bul ve çalıştır yuvası).
• Ekranlardaki anahtar CTA'nın TO'su: ev, katalog, oyun sayfası, gişe.
• Birincil/ikincil tıklama oranı (dikkat disiplini).
• Teklif/turnuva ile engellemek için Kaydırma Derinliği.

3) Görsel hiyerarşi ilkeleri (çekirdek)

1. Kontrast ve ölçek: daha önemli - daha büyük ve daha zıt.
2. Konum ve okuma sırası: üst/sol ve'ilk ekran "öncelik alır.
3. Beyaz alan: hava = önem. Çok sıkı - öncelik kaybolur.
4. Renk ve doygunluk: renk aksanı - "dikkat para birimi"; Onu kurtarın.
5. Form ve ikonografi: Düğme şekli, işaretleyiciler, durum simgeleri farklılığı artırır.
6. Hareket ve mikroanimasyon: nadir, kısa, bütün aksan; "Adil" olmaktan kaçının.
7. Gruplama (gestalt): yakınlık, benzerlik, kapatma, hizalama, ortak alan.
8. Bilgi yoğunluğu: kritik yolda - sadece doğru olanı, gerisi "zayıf" katmanlardadır.

4) Öncelikli Matris (P1-P4)

P1 (Kritik-Birincil): Ekran başına 1-2 CTA/öğe. Büyük boy, parlak kontrast, sabit konum.
P2 (Önemli destek): filtreler, hızlı etiketler, ikincil CTA'lar. Orta kontrast, P1'in yanında.
P3 (Yardım/Bağlam): ipuçları, derecelendirmeler, mini kartlar. Sakin stil, kompakt.
P4 (Arka Plan/Referans): yardım, altbilgi, yasal bağlantılar. Küçük kontrast ve boyut.

Kural: Bir ekranda en fazla bir P1. P1s rekabet ederse, artık P1s değiller.

5) Hiyerarşi katmanları

Global: üst düzey navigasyon, global arama, bildirimler.
Sayfa: kahraman bloğu, H1/H2, anahtar afişler/teklifler.
Bileşen: oyun kartları, gişe formları, turnuva masaları.
İç bileşen: alan düzeni, imzalar, durumlar, mikro ipuçları.

6) Tipik senaryolar (iGaming-fitting)

• P1: "Hesap oluştur "/" Giriş yap "(büyük düğme, sabit konum).
• P2: Sosyal girişler, "Parolayı göster", parola politikası.
• P3: Bağlantılar "Şifrenizi mi unuttunuz? ", güvenlik ipuçları.

• P1: Top Up/Display + seçili yöntem.
• P2: Miktar, hızlı ön ayarlar, yakındaki ücretler/limitler.
• P3: Gizli ayrıntılı yöntem açıklaması, zamanlama.

• P1: Arama + anahtar filtreleri (Sağlayıcı, Volatilite, RTP, Yeni/Hit).
• P2: Segmentler/Etiketler (Megaways, Jackpot, Satın Alma Özelliği).
• P3: İkincil sıralama, kart rozetleri (yeni, hit, turnuvalar).

• P1: Katıl/Ödül Detayları.
• P2: Skor tahtası (ilk 5), geri sayım sayacı.
• P3: Tıklama/çevirme kurallarını tamamlayın.

7) Tipografi ve ızgara

Modüler ölçek: 12-14 (metin), 16 (kök), 20-24 (alt başlıklar), 28-40 (H1/Hero).
Temel çizgi: 4/8px adımları; dikey ritim = okunabilirlik.
Satır uzunluğu: Metin için 45-75 karakter; Kart açıklamaları için 20-40.
Satır satır: Metin için %120-150, başlıklar için %110-120.

8) Renk ve kontrast

Metin kontrastı: Önemli yollardaki metinler için AA düzeyinden daha düşük olmayan yer işaretleri.
Renk rolleri: Birincil (CTA), Vurgu (dikkat), Bilgi/Başarı/Uyarı/Tehlike (durumlar).
Karanlık tema: sınırların ve metinlerin kontrastlarını güçlendirmek, geniş renk düzlemlerinin doygunluğunu azaltmak; "Neon acısından kaçının".
Öğelerin durumları: default/hover/focus/active/disabled - ayırt edilebilir.

9) Aksanlar ve düğmeler

Birincil CTA: ekran başına bir, gözle görülür renk/ölçek, yeterli alan (44 × 44px'e dokunun).
İkincil/üçüncül: pürüzsüz tonlar, kontur stilleri.
Spinner ≠ hiyerarşisi: ilerleme geri bildirim verir, ancak P1'i kesmemelidir.

10) Dikkat mekaniği ve hız

F-/Z-desenleri: Bakışın geçmesi beklenen P1'i yerleştirin.
Hick Yasası: Daha Az Eşittir Daha Hızlı - İlk Adım Seçeneklerini Kısaltın.
Fitts yasası: daha büyük ve daha yakın tıklamak daha kolaydır; artış isabet alanı önemli.
Seri istemleri: "Metin duvarı'ile değil, adımlarla öğretin.

11) Ana ekran/açılış sayfaları

Kahraman bloğu: kısa teklif + tek P1.
Görsel "reiki": 3-4 bölüm maksimum ilk kaydırma (kategoriler, yeni öğeler, turnuva).
Sosyal kanıt: sağlayıcı rozetleri, "haftanın hitleri" - P2, P1'i kesmeyin.

12) Gösterge panoları ve tablolar

İlk ekran: 1-2 anahtar KPI büyük, sparklines + trend rozetleri.
Tablo: sütunları öneme göre hizalayın, anahtar sütunlarını "dondurun", yoğunluk anahtarını kullanın (kompakt/standart).
Boş durumlar: sonraki adımı açıklayın (P1 düğmesi + istemi).

13) Mobil vs Masaüstü

Mobil: Bir P1 kesinlikle kaydırma çizgisinin üzerindedir, sekme çubuğu ≤5 noktaları, yüzen CTA ödeme/oyun için kabul edilebilir.
Masaüstü: konteyner genişliği 1200-1440px; Satırların uzunluğunu sınırlayın, P1'i "germekten" kaçının.

14) Yerelleştirme, sayılar, RTL

Hatların uzunluğunu (Almanca/Türkçe), farklı para birimlerini ve derecelerini dikkate alın.
RTL: Izgarayı ve vurgu düzenini yansıtın, ancak P1 baskınlığını koruyun.

15) A/B ve hiyerarşi metrikleri

• P1 boyutunda/kontrastında %12-16'lık bir artış - FMC ve TO'da bir artış.
• Filtreleri (P2) aramaya yaklaştırmak - oyun arama TTV'sini azaltmak.
• Yazar kasanın ilk adımındaki seçeneklerin azaltılması - yukarıdaki tamamlama.

Parça: FMC (N saniye), TO P1, Hedef bloğa Kaydırma Derinliği, TTV, Karışıklık Oranı (hatalar/dönüşler), Öfke Tıklamaları.

16) Denetim prosedürü (kontrol listesi)

1. Her tuş ekranında P1 adı - tam olarak bir tane var mı?
2. P2 elemanları P1'i destekliyor, onunla renk/kontrast içinde tartışmıyor musunuz?
3. Path of Sight: P1 ilk 3 odağı vuruyor mu?
4. Açık/koyu temalarda metin/ACTA kontrastı yeterli midir?
5. Minimum isabet alanları karşılandı mı?
6. Gürültü: Dönüşüm kaybetmeden öğelerin %20'sini kaldırabilir misiniz?
7. Boş durumlar eyleme yol açar mı?
8. Durumlar (hover/focus/active) ayırt edilebilir ve erişilebilir mi?
9. P1 cep telefonunda kaydırma yapmadan görünür mü?
10. Metrikler hunide bağlı ve okunabilir mi?

17) Anti-desenler

Bir ekranda iki veya daha fazla Birincil.
P1 ile örtüşen "Gösterişli" afişler.
Gri üzerinde gri (yetersiz kontrast).
Kritik yolda metin içermeyen simgeler.
Aşırı yüklenmiş kartlar: 6 + rozet, 4 açıklama satırı.
Hedefi olmayan animasyonlar (yanıp sönen/sonsuz).

18) Tasarım sistemi: önceliklerin belirlenmesi

Jetonlar: 'renk. Birincil ',' renk. aksan ',' yükseklik. p1 ',' yarıçapı. lg ',' uzay. 8/12/16`.
Boyut rolleri: 'btn. p1. lg ',' btn. P2. md ', metin. H1/h2/body ',' rozeti. Durum '.
Katmanlar/Z-indeksi: İçerik modülleri üzerinden P1, ancak sistem modellerinin altında.
Durumlar: Örnekleri olan durum tablosu (ekran kılavuzu).

19) Önceliklendirme algoritması (sözde)

1. Ekranın amacını tanımlayın (bir cümle).
2. P1 (bir öğe), en dikkat çekici olarak tasarım atayın.
3. P1'in yanında/sonrasında P2 (2-5 eleman) oluşturun.
4. P3-P4 gizleme/daraltma.
5. Satın alınabilirlik ve mobilite kontrol listesini tamamlayın.
6. Yolu ve time-to-P1 kontrol edin (≤3 saniyeyi tıklatın).
7. A/B başlatın, FMC/TTV/TO'yu gözlemleyin.

20) Mikroplar ve metinler

H1 başlıkları - kısa, fiil/değer: "10 saniye içinde oynamaya başlayın".
CTA - eylem ve sonuç: "Bir dakika içinde doldurun", "Şimdi oynayın".
İpuçları - durumda, maksimum bir satır, jargon olmadan.

21) Hiyerarşi Görevleri için Kabul Kriterleri

Ekranda tek bir P1 tanımlanır; Kaydırmadan görün (mobil/masaüstü).
P1 kontrastı yönergelere karşılık gelir; boyutlar alan ≥44×44px çarptı.
P2 görsel olarak P1'den daha zayıftır (1-2 kontrast/ölçek adımlarıyla).
Elementlerin durumları ayırt edilebilir; Klavye odak stilleri vardır.
FMC/TTV/CTR/Scroll Depth için bağlantılı analiz etkinlikleri.

22) Kısa Özet (TL; DR)

Hiyerarşi dikkat disiplinidir. Ekran başına bir açık P1, P2 üzerinden destek, daha az gürültü, yeterli kontrast ve okunabilir tipografi. Kendinizi bir kontrol listesiyle test edin, FMC/TTV/TO'yu ölçün ve hipotezleri A/B testleriyle onaylayın.