UI'de içerik hiyerarşisi

1) Neden hiyerarşi gereklidir

• 3-5 saniye içinde üç soruyu yanıtlar: Nedir? - Önemli olan nedir? - Ne yapmalı?;
• Arayüzü öngörülebilir ve taranması kolay hale getirir
• Hataları azaltır ve dönüşümü artırır.

İlkeler: sinyaller> gürültü, sıra> çeşitlilik, bağlam> mutlak kurallar.

2) Önem seviyeleri ve yapısı

1. Navigasyon bağlamı (marka, bölüm, kırıntılar/ekmek kırıntıları).

2. H1 - ekran hedefi (mümkün olduğunca kısa, gerekirse fiil).

3. Kurşun/altyazı (bir fayda veya durum satırı).

4. Birincil eylemler (1-2 anahtar CTA).

5. Birincil veriler (ana KPI'lar, birinci basamak kartlar).

6. İkincil veriler (parçalar, filtreler, yardımcı tablolar).

7. Meta/Yardım (ipuçları, notlar, yasal metin).

Kural: Bir ekranda - bir H1, en fazla iki birincil CTA.

3) Tipografi ve ritim

Yazı tipi ölçeği: H1 28-32, H2 22-24, H3 18-20, gövde 14-16, mikro 12 (web'de px/pt eşdeğeri).
Satır aralığı: 1. 3–1. Vücut için 5, 1. 2–1. Başlıklar için 3.
Girinti ritmi: temel birimin katları (4/8 px). Zagolovok↔blok: 16-24; paragraf: 8-12.
Kontrast: WCAG AA minimum; Başlık her zaman altyazılardan/metadan daha kontrastlıdır.
Renk vs ağırlık: renk - aksan, boyut/yağ yerine "koltuk değneği'değil.

4) Izgara ve düzen

Sabit ağ geçitleri ile 12 sütun (masaüstü )/4-6 (mobil) ızgara.
Görsel olarak ilk = DOM'da ilk: ekran okuyuculara ve SEO'lara yardımcı olur.
Okuma ekseni: soldan sağa (LTR) veya sağdan sola (RTL) - sinyallerin sırasını yansıtır.
"Dikkat bölgeleri": üst sol/orta - başlık ve kurşun; "eylem çubuğu" - yakınında/altında.

5) Görsel öncelik sinyalleri

Boyut ve ağırlık (tipografi) birincil sinyaldir.
Pozisyon (yukarıda/solda = LTR'de daha önemli).
Renk (CTA için vurgu, statüler - sabit bir palete göre).
İkonografi (yalnızca metin desteği olarak).
Girintiler/çerçeveler (çok fazla "hava" içeren bir kart daha önemlidir).
Dinamikler (animasyon tahriş olmadan dikkat çekmek için 200 ms ≤).

6) Aşamalı açıklama

• Katlamanın üstünde - sadece bağlam, amaç ve birincil eylem.
• Akordeon/sekme bölümleri ikincil verilerdir.
• Matkap-aşağı: Kart ^ panel ^ modal.
• Aşırı yüklenmiş "yardımcı" yerine satır içi ipuçları.
• İskeletler/yer tutucular yük süresince yapıyı korur.

7) Tipik ekranlarda hiyerarşi

7. 1 Pano

Üstte H1 + zaman filtresi.
KPI çubuğu (3-5 kart) - ilk satır.
Grafikler/tablolar - ikinci satır, sıralama/filtreler yan yana.
Anomaliler/uyarılar - ayrı sütun/bant, KPI ile karıştırmayın.

7. 2 Katalog/lobi

H1 + hızlı filtreler/cips.
Başlığa daha yakın sıralama, kartta CTA "Oynat/Satın Al".
Etiketler (yeni/üst/jackpot) - görsel olarak isme ikincil.

7. 3 Varlık Kartı (Oyun/Öğe)

Kahraman bölgesi: isim (H1), temel bilgiler (RTP/volatilite/derecelendirme), birincil CTA.
Ayrıntılar: Açıklama/Özellikler/Geri Bildirim sekmeleri.
Meta veriler: etiketler ve yasal metin - altta.

7. 4 Formlar/sihirbazlar

Adım başlığı + kısa kurşun ("2 dakika, kart devreden çıkarılmadı").
Alanların sıklığa göre sırası/zorunlu.
CTA sağ/alt, destekleyici eylemler - alt/sol bağlantıları.
Hatalar - alanın yanında, kısaca ve durumda.

8) Devlet önceliklendirme

• Norm - Yükle - Başarı/Boş - Hata.
• Yüklemede - çerçeveyi (iskeletler) tutun, CTA atlamaz.
• Hata - H1'ne oldu ", CTA -" tekrar/temas'olarak değişir.

9) İçerik belirteçleri ve tasarım sistemi

• 'font. yöneliyor. xl ',' yazı tipi. Vücut. md ',' boşluk. 200 ',' yarıçap. md ',' yükseklik. sm '.
• Metin rolleri: 'metin. Başlık ',' metin. lead ',' mesajı. İkincil ',' metin. Meta ',' metin. yardımcı '.
• Renk rolleri: 'Accent/neutral/success/warn/danger' + 'levels' (100-900).
• Bileşenler: 'KPI. Kart/Bölüm. Başlık/Satır içi. Yardım/Meta. Hat '.

10) Ölçüm ve kalite

• Tarama Süresi (medyandan ilk anlamlı tıklama/eyleme kadar).
• Odak Sırası Hataları (kullanıcının görünümü kaç kez "özlediği").
• CTA Görünürlüğü % (kaç kişi CTA'yı gördü ve tıklandı).
• INP/CLS (yüklerken hiyerarşi "atlama" olmamalıdır).
• A/B: Daha büyük H1 vs daha güçlü kontrast; Yan panelde vs üstte çip filtreleri.

• 'first _ focus _ target', 'primary _ cta _ exposed/clicked', 'section _ collapse _ toggle', 'help _ showed'.

11) iGaming için uygulamalar (örnek)

Casino lobisi: H1 "Lobi", "Yeni/Canlı/Jackpots/Favori" cips, sonra fayans. Her kart bir isim, sağlayıcı simgesi, CTA "Play" içerir; yeni/jackpot etiketleri - ikincil.
Operatör panosu: ilk satır - NGR/GGR/DAU/CR, ikincisi - eğilimler ve anomaliler, üçüncü - tablolar.
Ödeme adımı: H1 "Yenileme", kurşun "Komisyon yok, anında", dönüşüm yöntemlerinin listesi, üstte minimum metatext.

12) Antipatterns

Ekranda aynı güçte on vurgu ("görsel çığlık").
Metin olmadan resim/simge olarak başlıklar (erişilebilirliği ve aramayı keser).
"Küçük baskıda sonuçlar've dev afişlerde bildirimler.
Aynı görsel ağırlığa sahip birincil CTA'nın yanındaki yardımcı bağlantılar.
Tutarsız düzen: bugün "yukarıdan,'yarın" soldan filtreler.

13) Uygulama kontrol listesi

1. Ekran hedefini tanımlayın (H1 + 1-2 birincil eylemleri).
2. Seviyeleri işaretleyin: birincil/ikincil/meta; DS belirteçlerine pin.
3. Tipografi ölçeğini ve temel girinti ritmini toplayın.
4. Hata ayıklama durumları (önyükleme/boşluk/hata) STA/üstbilgi sıçramaları olmadan.
5. 3-5 kişiyle 5 dakikalık bir "tarama testi" yapın: ne fark ettiniz, nereye tıkladınız.
6. Telemetri bağlayın (pozlama CTA, tarama süresi, odak sırası).
7. Önce/sonra örnekleri olan kılavuzlardaki deseni düzeltin.

14) Alt satır

İçerik hiyerarşisi'ana için büyük bir yazı tipi'değil, bir çözüm sistemidir: tipografi, ızgara, renk, girinti ritmi, DOM'daki düzen ve farklı durumlardaki davranış. Her seviye kendi rolüne ve ağırlığına sahip olduğunda, arayüz açık, hızlı ve öngörülebilir hale gelir ve kullanıcılar eylemlerine güvenir.