UI-də məzmun iyerarxiyası

1) Niyə iyerarxiya lazımdır

• 3-5 saniyədə üç suala cavab verir: bu nədir? → nə vacibdir? → nə etmək lazımdır?;
• interfeysi proqnozlaşdırıla bilən və asanlıqla taranabilir edir;
• səhvləri azaldır və dönüşümü artırır.

Prinsiplər: siqnallar> səs-küy, ardıcıllıq> müxtəliflik, kontekst> mütləq qaydalar.

2) Əhəmiyyət səviyyələri və strukturu

1. Naviqasiya konteksti (marka, bölmə, qırıntılar/çörək qırıntıları).

2. H1 - ekranın hədəfi (lazım olduqda mümkün qədər qısa, feil).

3. Lead/alt başlıq (bir fayda və ya status sətri).

4. Primary actions (1-2 əsas CTA).

5. Primary data (əsas KPI, «birinci xətt» kartları).

6. Secondary data (detallar, filtrlər, köməkçi cədvəllər).

7. Meta/Help (məsləhətlər, qeydlər, hüquqi mətn).

Qayda: bir ekranda - bir H1, iki primary CTA-dan çox deyil.

3) Mətbəə və ritm

Şrift şkalası: H1 28-32, H2 22-24, H3 18-20, body 14-16, micro 12 (veb üçün px/pt ekvivalenti).
Sətirlərarası intervallar: 1. 3–1. body üçün 5, 1. 2–1. 3 başlıqlar üçün.
Girintilərin ritmi: baza vahidi (4/8 px). Başlıq blok: 16-24; paragraflar: 8-12.
Kontrast: minimum WCAG AA; başlıq həmişə imza/meta daha təzadlı.
Rəng vs çəki: rəng - ölçüsü/yağlılığı əvəzinə «dayaq» deyil, vurğu.

4) Grid və maket

Şəbəkə 12 sütun (desktop )/4-6 (mobile) sabit qatterlər ilə.
Visually first = first in DOM: screinriders və SEO kömək edir.
Oxu oxu: soldan sağa (LTR) və ya sağdan sola (RTL) - siqnalların sırasını əks etdirin.
«Diqqət zonaları»: yuxarı sol/mərkəz - başlıq və lead; «hərəkət zolağı» - onun yanında/altında.

5) Vizual prioritet siqnalları

Ölçü və çəki (mətbəə) - ilkin siqnal.
Mövqe (LTR-də yuxarıda/solda = daha vacibdir).
Rəng (CTA üçün vurğu, statuslar - sabit palitrada).
İkonoqrafiya (yalnız mətn dəstəyi kimi).
girintilər/çərçivələr (böyük «hava» ilə kart daha vacib qəbul edilir).
Dinamika (qıcıqsız diqqət çəkmək üçün 200 ms ≤ animasiya).

6) Proqressiv açıqlama

• Above the fold - yalnız kontekst, məqsəd və ilkin hərəkət.
• Bölmələr-akkordeonlar/tablar - ikinci dərəcəli məlumatlar.
• Basın detalları (drill-down): kart → panel → modal.
• Həddindən artıq yüklənmiş «help» əvəzinə inline ipuçları.
• Skeletonlar/pleysholderlər yükləmə zamanı strukturunu saxlayır.

7) Tipik ekranlarda iyerarxiya

7. 1 Daşbord

H1 + üst vaxt filtr.
KPI zolağı (3-5 kart) - birinci xətt.
Qrafiklər/cədvəllər - ikinci xətt, sıralama/filtrlər yaxındır.
Anomaliyalar/alertlər - ayrı bir sütun/lent, KPI ilə qarışdırılmamalıdır.

7. 2 Kataloq/lobbi

H1 + sürətli filtrlər/çiplər.
Başlığa yaxın çeşidləmə, kartdakı CTA «Play/Al».
Etiketlər (yeni/top/jackpot) - adı ilə bağlı vizual olaraq ikincidir.

7. 3 Mahiyyət kartı (oyun/məhsul)

Qəhrəman zonası: adı (H1), əsas faktlar (RTP/dəyişkənlik/reytinq), primary CTA.
Detallar: «Təsvir/Xüsusiyyətlər/Rəylər» sekmələri.
Metadata: etiketlər və hüquqi mətn - aşağıda.

7. 4 Formalar/ustalar

Addım başlığı + qısa lead («2 dəqiqə, kart silinmir»).
Tezlik/öhdəlik sahələrinin qaydası.
CTA sağ/alt, köməkçi hərəkətlər - alt/sol linklər.
Səhvlər - sahənin yanında, qısa və iş.

8) Vəziyyətlərin prioritetləşdirilməsi

• Norma → Yükləmə → Uğur/Boş → Səhv.
• Yükləmədə - çərçivəni (skeletonları) saxlayın, CTA qaçmır.
• Səhvdə - H1 «nə oldu», CTA - «təkrarlamaq/əlaqə saxlamaq» üçün dəyişir.

9) Məzmun və dizayn sistemi

• `font. heading. xl`, `font. body. md`, `space. 200`, `radius. md`, `elevation. sm`.
• Mətn rolları: 'text. title`, `text. lead`, `text. secondary`, `text. meta`, `text. helper`.
• Rəng rolları: 'accent/neutral/success/warn/danger' + «səviyyələri» (100-900).
• Komponentlər: 'KPI. Card/Section. Title/Inline. Help/Meta. Line`.

10) Ölçmə və keyfiyyət

• Scan Time (ilk mənalı klik/hərəkət qədər media).
• Focus Order Errors (neçə dəfə istifadəçi gözlərini «qaçırır»).
• CTA Visibility% (CTA-nı gördüyünüz qədər vs.
• INP/CLS (hiyerarxiya yükləmə zamanı «atlamamalıdır»).
• A/B: daha böyük H1 vs daha güclü kontrast; yan paneldə yuxarıdan vs çip filtrləri.

• `first_focus_target`, `primary_cta_exposed/clicked`, `section_collapse_toggle`, `help_shown`.

11) iGaming üçün təcrübələr (nümunə)

Casino lobbisi: H1 «Lobbi», «Yeni/Canlı/Jackpotlar/Sevimli» çipləri, sonra plitələr. Hər kartda - adı, provayder nişanı, CTA «Play»; «Yeni/Cekpot» etiketləri ikincidir.
Operator Dashboard: birinci sətir - NGR/GGR/DAU/CR, ikinci - trendlər və anomaliyalar, üçüncü - cədvəllər.
Ödəniş addımı: H1 «Doldurma», lead «Komissiya olmadan, anında», çevirmə üsullarının siyahısı, yuxarıdan minimum metatext.

12) Antipattern

Ekranda on eyni vurğu («vizual fəryad»).
Sözsüz şəkillər/nişanlar kimi başlıqlar (əlçatanlığı və axtarışı pozur).
«Xırda şriftlə nəticələr» və nəhəng bannerlərlə bildirişlər.
Primary CTA-nın yanında köməkçi linklər eyni vizual çəkidir.
Razılaşdırılmamış prosedur: bu gün «yuxarıdan filtrlər», sabah «soldan».

13) Giriş çek siyahısı

1. Ekranın məqsədini təyin edin (H1 + 1-2 ilkin hərəkətlər).
2. Səviyyələri təyin edin: primary/secondary/meta; DS tokenlərində bərkidin.
3. Tipoqrafiya şkalasını və əsas girinti ritmini toplayın.
4. States (download/boş/səhv) CTA/başlıqları olmadan düzəldin.
5. 3-5 nəfərlə 5 dəqiqə «skan testi» keçirin: hara kliklədiyinizi gördünüz.
6. Telemetriyanı bağlayın (exposure CTA, scan time, focus order).
7. Nümunəni «əvvəl/sonra» nümunələri ilə qaydalara yazın.

14) Yekun

Məzmun iyerarxiyası «əsas üçün böyük şrift» deyil, bir həll sistemidir: tipoqrafiya, tor, rəng, girintilərin ritmi, DOM qaydası və müxtəlif vəziyyətlərdə davranış. Hər bir səviyyənin öz rolu və çəkisi olduqda, interfeys başa düşülən, sürətli və proqnozlaşdırıla bilən olur və istifadəçilər öz hərəkətlərinə əmin olurlar.