Vizual ierarxiya va ustuvorlik

1) Vizual ierarxiya nima?

Vizual ierarxiya - bu foydalanuvchining e’tiborini taqsimlaydigan va maqsadli harakat qilish yo’lini (signup, depozit, o’yin qidirish, filtr, chiqish) tezkor va mojarosiz qiladigan interfeysdagi urg’ularni joylashtirish tizimidir. Ierarxiya kontrast, masshtab, pozitsiya, rang, axborot zichligi, harakat va oq makon orqali quriladi.

Maqsad: «kognitiv xarajatlarni» kamaytirish va First Meaningful Click ulushini kerakli elementlarga ko’paytirish.

2) Biznes effekt va KPI

• Maqsadli CTA konvertatsiyasi (ro’yxatdan o’tish, depozit, tanlanganlarga qo’shish)
• Vazifalarni bajarish tezligi (Time to Value)
• Chalkashlik koʻrsatkichining pasayishi (Confusion Rate)
• Muvaffaqiyatsizliklarni kamaytirish (Bounce), skroll chuqurligini oshirish va ushlab turish

• FMC (First Meaningful Click): yuklangandan keyin CTA ≤ N sekundni bosgan foydalanuvchilar%.
• TTV (Time to Value): kirish vaqtidan kalit qiymatigacha (masalan, slotni topish va ishga tushirish).
• Ekranlardagi asosiy CTA CTR: uy, katalog, o’yin sahifasi, kassa.
• Birlamchi/ikkilamchi bosishlarning munosabati (e’tibor intizomi).
• Scroll Depth - offer/turnir blokigacha.

3) Vizual ierarxiya prinsiplari (yadro)

1. Kontrast va masshtab: muhimroq - kattaroq va qarama-qarshi.
2. Pozitsiya va oʻqish tartibi: yuqori/chap va «birinchi ekran» ustunlikka ega.
3. Oq makon: havo = muhimlik. Juda tor boʻlsa, ustuvorlik yoʻqoladi.
4. Rang va to’yinganlik: rang urg’usi - «e’tibor valyutasi»; uni tejaymiz.
5. Shakl va ikonografiya: tugmalar shakli, markerlar, maqom belgilari farqlanishni kuchaytiradi.
6. Harakat va mikroanimatsiya: kamdan-kam uchraydigan, qisqa, yaxlit aksentlar; «yarmarkadan» qochish.
7. Guruhlash (gestalt): yaqinlik, oʻxshashlik, yopiqlik, tekislash, umumiy maydon.
8. Axborot zichligi: tanqidiy yo’lda - faqat kerakli, qolganlari «zaif» qatlamlarda.

4) Ustuvorliklar matritsasi (P1-P4)

P1 (Kritik-birlamchi): Ekranga 1-2 ta STA/element. Katta o’lcham, yorqin kontrast, qat’iy pozitsiya.
P2 (Muhim qoʻllab-quvvatlovchi): filtrlar, tezkor teglar, ikkilamchi CTA. Oʻrtacha kontrast, P1 yonida.
P3 (Yordam/kontekst): maslahatlar, reytinglar, mini-kartochkalar. Tinch uslub, ixcham.
P4 (Fon/referens): maʼlumot, futer, yuridik havolalar. Kichik kontrast va o’lcham.

Qoida: bitta ekranda bittadan ko’p bo’lmagan P1. Agar P1 raqobatlashsa, ular endi P1 emas.

5) Ierarxiya qatlamlari

Global: yuqori darajadagi navigatsiya, global qidiruv, xabarnomalar.
Sahifali: qahramon blok, H1/H2, asosiy bannerlar/offerlar.
Komponent: o’yin kartochkalari, kassa shakllari, turnir jadvallari.
Ichki komponentlar: maydonlar tartibi, imzolar, maqomlar, mikro-maslahatlar.

6) Tipik stsenariylar (iGaming-primerka)

• P1: «Akkaunt yaratish «/» Kirish »(katta tugma, qatʼiy pozitsiya).
• P2: Soʻz-loginlar, «Maxfiy soʻzni koʻrsatish», maxfiy soʻz siyosati.
• P3: Parolingizni unutdingizmi? ", xavfsizlik maslahatlari.

• P1: «Toʻldirish «/» Chiqarish »+ tanlangan usul.
• P2: Summa, tez presetlar, komissiya/limitlar yonma-yon.
• P3: Usulning yashirinadigan batafsil tavsifi, muddatlari.

• P1: Qidirish + asosiy filtrlar (Provayder, Volatillik, RTP, Yangi/Xit).
• P2: Segmentlar/teglar (Megaways, Jackpot, Buy Feature).
• P3: Ikkilamchi saralash, kartochka nishonlari (yangilik, xit, turnirlar).

• P1: Qoʻshilish/Mukofot tafsilotlari.
• P2: Yetakchilar jadvali (birinchi 5), qaytadan hisoblash taymeri.
• P3: Bosish/burish boʻyicha toʻliq qoidalar.

7) Bosmaxona va setka

Modulli shkala: 12-14 (matn), 16 (asos), 20-24 (sarlavhalar), 28-40 (H1/Hero).
Bazis chizigʻi: 4/8px qadamlar; vertikal ritm = o’qish qobiliyati.
Satr uzunligi: matn uchun 45-75 belgi; kartochkalar tavsifi uchun 20-40.
Satrlararo: matn uchun 120-150%, sarlavhalar uchun 110-120%.

8) Rang va kontrast

Matnning kontrasti: asosiy yoʻllardagi matnlar uchun AA darajasidagi koʻrsatkichlardan past emas.
Ranglar: Primary (CTA), Accent (diqqat), Info/Success/Warning/Danger (maqomlar).
Dark mavzu: chegaralar va matnlarning qarama-qarshiligini kuchaytirish, keng rangli tekisliklar to’yinganligini kamaytirish; «neon-og’riqdan» qochish.
Elementlarning holati: default/hover/focus/active/disabled - farqlanadi.

9) Aksentlar va tugmalar

Primary CTA: ekranda bitta, koʻrinadigan rang/masshtab, yetarli maydonlar (min-tap 44 × 44px).
Secondary/tertiary: silliq ohanglar, kontur uslublari.
Spinner ≠ ierarxiya: taraqqiyot fikr-mulohazalarni beradi, lekin P1’ni buzmasligi kerak.

10) E’tibor mexanikasi va tezligi

F-/Z patternlari: P1 ni kutilgan joyga joylashtiring.
Hik qonuni: kichikroq tezroq - birinchi qadamni qisqartiring.
Fitts qonuni: kattaroq va yaqinroq - bosish osonroq; muhim hit area ko’paytiring.
Seriyali maslahatlar: «matn devori» emas, balki qadam - qadam oʻrgating.

11) Uy ekrani/lendinglar

Qahramon blok: qisqa offer + yagona P1.
Vizual «reykalar»: 3-4 ta seksiya, maksimal birinchi skrollgacha (toifalar, yangiliklar, turnir).
Ijtimoiy dalillar: provayderlarning «haftaning xitlari» - P2, P1 to’xtamaydi.

12) Dashbordlar va jadvallar

Birinchi ekran: 1-2 asosiy KPI katta, sparklaynlar + trend-bayroqlar.
Jadval: ustunlarni muhimligi boʻyicha tekislash, asosiy ustunlarni «muzlatish», density switch (kompakt/standart) dan foydalanish.
Boʻsh holatlar: Keyingi qadamni tushuntirish (P1 tugmasi + maslahat).

13) Mobil vs Desktop

Mobayl: bitta P1 qat’iy ravishda skroll chizig’idan yuqori, tab-bar ≤ 5 punkt, floating CTA kassa/o’yin uchun mos keladi.
Desktop: konteyner kengligi 1200-1440px; satrlar uzunligini cheklang; P1 «cho’zish» dan qoching.

14) Mahalliylashtirish, raqamlar, RTL

Satrlar uzunligini (nemis/turk), turli valyutalar va razryadlarni hisobga olish.
RTL: toʻrni va urgʻu tartibini oynalash, lekin P1 ustunligini saqlab qolish.

15) A/B va ierarxiya metrikasi

• P1 o’lchami/kontrastini 12-16% ga oshirish → FMC va CTR o’sishi.
• Filtrlarni (P2) qidirishga yaqinlashtirish → TTV qidiruvini kamaytirish.
• Kassaning birinchi qadamidagi variantlarni qisqartirish

Kuzatish: FMC (N soniya), CTR P1, Scroll Depth, TTV, Confusion Rate (xato/qaytarish), Rage Clicks.

16) Audit tartib-taomillari (chek-varaq)

1. Har bir kalit ekranda P1 nomini bering - ulardan bittasi bormi?
2. P2 elementlari P1 ni qoʻllab-quvvatlaydimi?
3. Koʻrish usuli: P1 birinchi 3 ta fokusga kiradimi?
4. Yorqin/qorong’u mavzularda matnning/STAning qarama-qarshiligi yetarlimi?
5. Minimal hit areas bajarilganmi?
6. Shovqin: Konvertatsiyani yoʻqotmasdan elementlarning 20% ni olib tashlash mumkinmi?
7. Boʻsh holatlar ishlashga olib keladimi?
8. Holatlar (hover/focus/active) farqlanadimi?
9. Mobailda P1 oynasiz koʻrinadimi?
10. Metriklar quvurda ulanganmi va oʻqiladimi?

17) Anti-patternlar

Bitta ekranda ikkita yoki undan ortiq Primary.
P1 ni to’sib qo’yadigan «qichqiruvchi» bannerlar.
Kulrang rangda (kontrast etarli emas).
Tanqidiy yo’lda matnsiz piktogrammalar.
Haddan tashqari yuklangan kartochkalar: 6 + beyjey, tavsifning 4 satri.
Maqsadsiz animatsiyalar (miltillovchi/cheksiz).

18) Dizayn-tizim: ustuvorliklar tavsifi

Tokenlar:’color. primary`, `color. accent`, `elevation. p1`, `radius. lg`, `space. 8/12/16`.
Oʻlchov rollari:’btn. p1. lg`, `btn. p2. md`, `text. h1/h2/body`, `badge. status`.
/ Z-index: P1 qatlamlari kontent modullari ustida, lekin tizim modalkalaridan pastda.
Holatlar: namunali holatlar jadvali (skrin-gid).

19) Ustuvorlik algoritmi (psevdo)

1. Ekranning maqsadi (bitta jumla).
2. P1 (bitta element) ni belgilang va eng ko’zga ko’ringan sifatida rasmiylashtiring.
3. P1 ning yonida/undan keyin P2 (2-5 element) ni shakllantiring.
4. P3-P4 yashiring/buring.
5. Kirish va harakatchanlik chek-ro’yxatidan o’ting.
6. Koʻrish va time-to-P1 yoʻlini tekshiring (bosish ≤ 3 sek).
7. A/B ni ishga tushiring, FMC/TTV/CTR ni kuzating.

20) Mikrokopiya va matnlar

H1 sarlavhalari - qisqa, fe’l/qiymat: «10 soniyada o’ynashni boshlang».
CTA - harakat va natija: «Bir daqiqada to’ldirish», «Hozir o’ynash».
Maslahatlar - ish bo’yicha, ko’pi bilan bitta satr, jargonsiz.

21) Acceptance Criteria ierarxiya vazifalari uchun

Ekranda yagona P1 aniqlangan; biz skrolsiz ko’ramiz (mobayl/desktop).
P1 kontrasti gidlaynlarga mos keladi; hit area o’lchamlari ≥ 44 × 44px.
P2 vizual jihatdan P1 dan zaifroq (kontrast/masshtabning 1-2 bosqichiga).
Elementlarning holati farqlanadi; klaviatura fokus uslublari mavjud.
FMC/TTV/CTR/Scroll Depth uchun tahliliy voqealar ulangan.

22) Qisqa xulosa (TL; DR)

Ierarxiya - diqqat intizomi. Ekranda bitta aniq P1, P2 orqali qoʻllab-quvvatlash, kamroq shovqin, yetarli kontrast va oʻqiladigan bosmaxona. O’zingizni chek varaqasi bilan tekshiring, FMC/TTV/CTR o’lchang va gipotezalarni A/B testlari bilan tasdiqlang.