UI tarkibining iyerarxiyasi

1) Nega iyerarxiya kerak?

• 3-5 soniyada uchta savolga javob beradi: bu nima? → nima muhim? → nima qilish kerak?;
• interfeysni oldindan aytib bo’ladigan va oson skanerlanadigan qiladi;
• xatolarni kamaytiradi va konversiyani oshiradi.

Prinsiplar: signallar> shovqin, ketma-ketlik> xilma-xillik, kontekst> mutlaq qoidalar.

2) Ahamiyat darajasi va tuzilmasi

1. Navigatsiya konteksti (brend, bo’lim, bo’laklar/non bo’laklari).

2. H1 - ekranning maqsadi (eng qisqa, zarurat bo’lganda fe’l).

3. Lead/subtitr (foyda yoki maqomning bitta satri).

4. Primary actions (1-2 asosiy CTA).

5. Primary data (asosiy KPI, «birinchi chiziq» kartochkalari).

6. Secondary data (tafsilotlar, filtrlar, yordamchi jadvallar).

7. Meta/Help (maslahatlar, izohlar, yuridik matn).

Qoida: bitta ekranda - bitta H1, ikkitadan ko’p bo’lmagan primary CTA.

3) Bosmaxona va ritm

Shriftlar shkalasi: H1 28-32, H2 22-24, H3 18-20, body 14-16, micro 12 (veb uchun px/pt ekvivalenti).
Satrlararo oraliqlar: 1. 3–1. body uchun 5, 1. 2–1. sarlavhalar uchun 3.
Cheklovlar ritmi: bazaviy birlikning kattaligi (4/8 px). Mavzu sarlavhasi: 16-24; 8 - 12-xatboshilar.
Kontrast: minimal WCAG AA; sarlavha har doim imzo/metadan farqlidir.
Rangi vs og’irligi: rangi - aksent, o’lchami/yog’i o’rniga «qo’ltiq» emas.

4) Setka va maket

12 ustunli panjara (desktop )/4-6 (mobile).
Visually first = first in DOM: skrining va SEO yordam beradi.
Oʻqish oʻqi: chapdan oʻngga (LTR) yoki oʻngdan chapga (RTL) - signallar tartibini aks ettiring.
«E’tibor zonalari»: yuqori chap/markaz - sarlavha va lead; «harakat polosasi» - uning yonida/ostida.

5) Ustuvorlikning vizual signallari

O’lchami va og’irligi (bosmaxonasi) - birlamchi signal.
Pozitsiya (yuqori/chap = LTRda muhimroq).
Rang (CTA uchun urg’u, statuslar - belgilangan palitra bo’yicha).
Ikonografiya (faqat matnni qo’llab-quvvatlash sifatida).
Chegara/ramkalar (katta «havo» kartochkasi muhimroq qabul qilinadi).
Dinamika (bezovta qilmasdan diqqatni jalb qilish uchun 200 ms ≤ animatsiya).

6) Progressiv ochish

• Above the fold - faqat kontekst, maqsad va birlamchi harakat.
• Bo’lim-akkordeonlar/tablar - ikkilamchi ma’lumotlar.
• Tafsilotlar (drill-down): kartochka → panel → modal.
• Haddan tashqari yuklangan «xelplar» o’rniga inline-maslahatlar.
• Skeletonlar/pleysholderlar yuklash vaqtida tuzilishini saqlab qoladi.

7) Namunaviy ekranlardagi ierarxiya

7. 1 Dashboard

H1 + yuqori vaqtli filtr.
KPI (3-5 kartochka) - birinchi chiziq.
Grafiklar/jadvallar - ikkinchi chiziq, saralash/filtrlar yonma-yon.
Anomaliyalar/alertlar - alohida kolonka/lenta, KPI bilan aralashtirilmaydi.

7. 2 Katalog/lobbi

H1 + tezkor filtrlar/chiplar.
Saralashni sarlavhaga yaqinlashtirish, kartadagi «O’ynash/Sotib olish» CTA.
Yorliqlar (yangi/top/jekpot) - nomiga nisbatan vizual ravishda ikkilamchi.

7. 3 Mohiyat kartochkasi (o’yin/tovar)

Qahramon-zona: nomi (H1), asosiy faktlar (RTP/o’zgaruvchanlik/reyting), primary CTA.
Tafsilotlar: «Tavsif/Tavsiflar/Sharhlar» tablari.
Meta maʼlumotlar: belgilar va yuridik matn - pastda.

7. 4 Shakl/ustalar

Qadam sarlavhasi + qisqa lead («2 daqiqa, xarita hisobdan chiqarilmaydi»).
Maydonlarning chastotasi/majburiyligi bo’yicha tartibi.
CTA pastki/oʻng tomonda, yordamchi harakatlar pastki/chap tomonda.
Xatolar - maydon yonida, qisqacha va ishda.

8) Holatlarni ustuvorlashtirish

• Norma → Yuklab olish → Muvaffaqiyat/Bo’sh → Xato.
• Yuklanayotganda - karkas (skeletonlar) ni saqlang, CTA sakrab tushmaydi.
• Xatoda - H1 «nima bo’ldi», CTA - «takrorlash/bog’lanish» ga o’zgaradi.

9) Kontent-tokenlar va dizayn-tizimi

• `font. heading. xl`, `font. body. md`, `space. 200`, `radius. md`, `elevation. sm`.
• Matn rollari:’text. title`, `text. lead`, `text. secondary`, `text. meta`, `text. helper`.
• Rang rollari:’accent/neutral/success/warn/danger’+ «darajalar» (100-900).
• Komponentlar:’KPI. Card/Section. Title/Inline. Help/Meta. Line`.

10) O’lchash va sifat

• Scan Time.
• Focus Order Errors (foydalanuvchi ko’z bilan necha marta «o’tkazib yuboradi»).
• CTA Visibility% (CTAni koʻrganingizcha bosing).
• INP/CLS (ierarxiya yuklanayotganda «sakramasligi» kerak).
• A/B: katta H1 vs kuchli kontrast; chip filtrlar yuqoridan vs yon panelda.

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

11) iGaming uchun amaliyotlar (misol)

Casino lobbisi: H1 «Lobbi», «Yangi/Live/Jekpotlar/Sevimli» chiplari, keyin plitkalar. Har bir kartochkada - provayderning nomi, belgisi, CTA «O’ynash»; «yangi/jekpot» belgisi - ikkinchi marta.
Operator dashbordi: birinchi satr - NGR/GGR/DAU/CR, ikkinchi satr - trendlar va anomaliyalar, uchinchi satr - jadvallar.
To’lov qadami: H1 «To’ldirish», lead «Komissiyasiz, bir zumda», konversiya usullari ro’yxati, yuqoridan minimal metatext.

12) Antipatternlar

Ekranda o’nta bir xil urg’u («vizual qichqiriq»).
Sarlavhalar matnsiz rasm/ikonkalar kabi (foydalanish va qidirishni buzadi).
«Natijalar kichik shriftda», bildirishnomalar esa ulkan bannerlar bilan.
Yordamchi havolalar primary CTA bilan bir xil vizual vaznda.
Kelishilmagan tartib: bugun «yuqoridan», ertaga «chapdan».

13) Joriy etish chek-varaqasi

1. Ekranning maqsadini aniqlang (H1 + 1-2 birlamchi harakatlar).
2. Darajalarni belgilang: primary/secondary/meta; DS tokenlariga biriktiring.
3. Bosmaxona shkalasi va cheklovlarning asosiy ritmini yigʻing.
4. STA/sarlavhalarsiz (yuklash/boʻsh/xato) holatlarni tuzating.
5. 3-5 kishi bilan 5 daqiqalik «skan-test» o’tkazing: nimani ko’rdingiz, qaerga bosdingiz.
6. Telemetriyani (exposure CTA, scan time, focus order) ulang.
7. Namunani «oldin/keyin» misollari bilan gidlaynlarga oʻrnating.

14) Jami

Kontent ierarxiyasi «asosiy narsa uchun katta shrift» emas, balki yechimlar tizimi: bosmaxona, to’r, rang, chekinish ritmi, DOM tartibi va turli holatlardagi xatti-harakatlar. Har bir darajaning o’z roli va og’irligi bo’lsa, interfeys tushunarli, tez va oldindan aytib bo’ladigan, foydalanuvchilar esa o’z harakatlariga ishonch hosil qiladi.