UX-gidline va interfeys standartlari

1) Qonunning

Go’zallikdan oldin aniqlik. Ma’no va harakat 1-2 soniyada aniq.
Ekranga bitta maqsad. Qolganlari ikkinchi darajali yoki yashirin.
Ketma-ketlik. Bir xil pattern = bir xil kutish.
Andoza foydalanish. Kontrast, fokus, klaviatura, tovush.
Kontekstlik. Maslahatlar va matnlar - kerakli joyda.
Lokalizatsiya-birinchi. Satrlar uzunligi, formatlari, madaniyati - dastlab dizaynda.
Qaytariluvchanlik. Har qanday xatarli harakatni bekor qilish/tasdiqlash mumkin.
O’lchanishi. Har bir qoida metrika bilan (qadam konvertatsiyasi, vaqt, xatolar).

2) To’r, chekinishlar va ritm

Panjara: 4/8-pt qadam; 12 (desktop), 6 (tablet), 4 (mobile) ustunlari.
Komponentlarning ichki cheklovlari: 4 marta; tashqi - 8/ 12/16/24.
Vertikal ritm: sarlavha → sarlavha → kontent → harakat (CTA).
Chegaralar va ajratuvchilar: tejamkor; «havo» va bosmaxonaning ierarxiyasini afzal ko’rish.

3) Bosmaxona

Kegley shkalasi: 12/14/ 16/20/24/32/40 (body 16).
Satr balandligi: 1. 4–1. 6 matn uchun, 1. 2–1. sarlavhalar uchun 3.
Satr uzunligi: 45-75 belgi (desktop), 35-55 (mobile).
Tanlash: semantik urg’ular uchun yog’li; kaps - faqat belgilarda.
Oʻqish qobiliyati: matnlar tabiiy tarzda yangrashi kerak.

4) Rang va kontrast

Semantika:’success/info/warning/error/neutral’.
Kontrast: minimal WCAG 2. 1 AA (matn/fon ≥ 4. 5:1; katta ≥ 3:1).
Rang ≠ yagona signal. Nishoncha/matn/shakl qoʻshing.
Fokus halqa: har doim koʻrinadi (CSSda oʻchirilmasin).

5) Navigatsiya va axborot arxitekturasi

Foydalanuvchi yoʻli: "Men qayerdaman? Bu yerda nima bor? Keyingi nima?" - Albatta.
Menyu ierarxiyasi: asosiy navigatsiyada 2 darajadan ≤.
Non bo’laklari: chuqur bo’linmalar uchun.
Qidirish: Murakkab kataloglarda global miqyosda mavjud; ’/’ issiq tugmasi.
Navigatsiya holatlari: Aktiv tablar/sahifalar tokenlar bilan yoritilgan.

6) Komponentlar va patternlar

Dizayn tizimining tarkibiy qismlaridan foydalanamiz («uy qurilishi» dan tashqari).
Ekranga bitta primary-CTA; qolganlari - secondary/tertiary.
Holatlar: default/hover/focus/active/disabled/loading - har bir interaktivda majburiy.
Boʻsh holatlar: kontekst + qiymat + CTA (+ ikkilamchi link).
Umumiy alertlar: bitta page-alert + lokal inline-maslahatlar.

7) Shakllar, validatsiya va xatolar

Yorliq majburiydir. Placeholder - almashtirish emas, balki formatning namunasi.
blur uchun inline-validatsiya, submit uchun summary-xatolar.
Xato haqida xabar: nima notoʻgʻri + qanday tuzatish mumkin + cheklov/format.
Avto-skroll va birinchi xatoga eʼtibor;’aria-invalid’,’aria-describedby’.
Niqoblar va formatlar: ogohlantiradi, lekin kiritishni buzmaydi (peyst mumkin).
Maʼlumot saqlanishi: Qayta ishga tushirilganda hech narsa yoʻqotilmaydi.

8) Holatlar va fidbek

Muvaffaqiyat: 2-4 s tost, neytral-ijobiy ohangda, CTA «keyingi nima».
Info/notice: yumshoq banner/tultip, oqimni bloklamaydi.
Warning/Error/Critical: ierarxiya vizual/semantik; tanqidiy - aniq ta’sirga ega modalka/banner.
Yuklash: skeleton> spinner; kutish vaqtini baholash> 3 s.

9) Kontent va microcopy

Uchta javobning qoidasi: nima sodir bo’ladi?
CTA: amal feʼli + obʼekt («Oʻzgarishlarni saqlash», «Tasdiqlash»).
Raqamlar/sanalar/valyutalar: lokal formatlar.
Ton: do’stona; stressli qadamlarda (to’lov/xavfsizlik) - neytral.

10) Foydalanish imkoniyati (A11y)

Tugmachadan toʻliq navigatsiya; tablarning mantiqiy tartibi.
Interaktivlar uchun i’aria-’rollari, tost/maqom uchun hayot mintaqalari.
Kontrastlar, fokus halqalar, interaktivlarning o’lchamlari ≥ 44 × 44 px.
Ikonkalar/tasvirlardagi matnli muqobillar; ’th ’/’ scope’ jadvallari.
Tekshirish: avtomatik (linter/skaner) + qo’lda skrinider ssenariylari.

11) Mahalliylashtirish va baynalmilallashtirish

Barcha satrlar kontekstli i18n kalitlarida.
«Uzun tillar» testi (DE/TR), RTL rejimlari.
Raqamlar/valyutalar/vaqtlar - formatlash utilitlari.
Tone-map: ssenariylar bo’yicha rasmiyatchilik/his-tuyg’ular darajasi (onbording/to’lovlar/xavfsizlik).

12) Responsivlik va moslashuvchanlik

Breykpointlar: 360 / 768 / 1024/1280 +.
Mobile-first: tanqidiy yo’l bir qo’l bilan mavjud, bosh barmoq zonasida CTA.
Gestlar va klaviatura: imo-ishoralar tugmalar bilan takrorlanadi; desktop - hotkey.
Zichligi: desktopda - «havo», mobilda - vertikal tejash.

13) Qorong’u mavzu

WCAG bo’yicha kontrast saqlanib qoladi; fon uchun «sof qora» (to’q kulrang) dan qochish.
Nurlanish/soyalar - zaiflashgan; fokus halqa kontrastli.
Rasmlar va logotiplar - inverterlangan versiyalarda.
Oʻtish siyosati: foydalanuvchi tanlovini saqlab qoling (system/light/dark).

14) Animatsiyalar va harakat

Davomiyligi: 120-200 ms (kichik), 200-300 ms (o’tish joylari).
Tezlanish funksiyalari - tabiiy (ozgina sekinlashadigan cubic-bezier).
Animatsiyalar oqimni bloklamasligi va oʻqishni yomonlashtirmasligi kerak.
’prefers-reduced-motion’ ni hurmat qilish.

15) Spektakl

LCP ≤ 2. 5 s, yashil zonada TTI/TBT; kod-spliting; dangasa media yuklash.
Uzoq roʻyxatlarni virtuallashtirish; ma’lumotlarni keshlash.
Tezlikni idrok etish uchun Skeleton; «jank» maketini minimallashtirish.

16) Xavfsizlik va maxfiylik

So’rovlar sabablarini aniq tushuntirish (kamera, KYC, geo).
Shaffof muddatlar/komissiyalar/limitlar; agar kechikishlar bo’lsa, «bir zumda» bo’lmaydi.
Maxfiy ma’lumotlar - ochiq-oydin «ko’rsatish/yashirish».
Qaytarib bo’lmaydigan harakatlar uchun tasdiqnomalar; harakat/kirish xabarnomalari jurnali.

17) Sifat metrikasi UX

Qadam konvertatsiyasi va tugashigacha boʻlgan vaqt.
Error rate va Time-to-Fix.
CTR va stsenariylarning takrorlanishi.
Xatodan keyin/yuklangandan keyin Drop-off> N soniya.
Mavzular bo’yicha qo’llab-quvvatlashga murojaatlar (o’zgarishlardan oldin/keyin).
A11y - chiqarish uchun nuqsonlar (maqsad - 0 kritik).

18) Chek varaqlari

Chiqarish oldidan ekran

• Bitta asosiy maqsad va bitta primary-CTA.
• Navigatsiya va «men qayerda» maqomi aniq.
• Kontent qisqacha: har bir blokga 1-2 ta taklif.
• Holatlar: loading/empty/error/success qoplangan.
• A11y: AA kontrast, fokus ko’rinadi, interaktivlarda’aria-’.
• Lokalizatsiya: satr uzunliklari/formatlari/RTL tekshirildi.
• Spektakl: keraksiz «og’ir» bloklar yo’q.

Chiqarishdan oldingi shakl

• Yorliqlar va formatlar misollari mavjud.
• Inline-validatsiya + submit uchun summary.
• Skroll birinchi xatoga, maydonda diqqat.
• Xabarlar: nima/qanday/nima uchun; foydalanuvchi uchun 500/400 kodlarsiz.
• Xato/qayta ishga tushirilganda maʼlumotlar yoʻqolmaydi.

19) Anti-patternlar

«OK» ma’naviy qadamlarda CTA sifatida.
Leybl o’rniga pleysholder.
Rang yagona holat signalidir.
Spinnerlar vaqtni baholamasdan va muqobilsiz.
Fokus-trep va ESC-yopilishsiz modal oynalar.
Stillarni/ikonkalarni aralashtirish, dizayn tizimidan tashqarida komponentlarni takrorlash.
Tanqidiy ssenariylardagi hazil/emoji (to’lov/xavfsizlik).

20) «oldin/keyin» misollari

Shakl xatosi

Do: «Xato 400»

Undan keyin: "Sananing formati notoʻgʻri. DDdan foydalaning. MM. GGG"

Boʻsh holat

Do: «Bu yerda boʻsh»

Keyin: "Bu yerda birinchi toʻldirishdan keyingi operatsiyalar tarixi paydo boʻladi. [Hisobvaraqni toʻldirish]"

Muvaffaqiyat xabari

Do: «Tayyor»

"To’lov qabul qilindi. Balans yangilandi. [Tarixga qarang]"

Navigatsiya

Do: foydalanuvchi qayerda ekanligi aniq emas

Keyin: aktiv tablar + non parchalari + aniq sahifa sarlavhasi

21) Dizayn-revyu uchun shablonlar

Ekran karkasi

Sarlavha → qisqacha tavsif → kontent/roʻyxat → fidbek/maqomlar → harakatlar.

Shakl karkasi

Sarlavha → maslahat → maydon (yorliq + helper + xato) → CTA → ikkilamchi harakatlar → eslatmalar (komissiya/muddatlar).

Microcopy namunasi

Sarlavha (ops.)

1-2 jumla: kontekst + keyingi qadam

CTA: amal + obyekt

Ikkilamchi link: yordam/qoidalar

22) Jarayonlar va standartlarni saqlash

Definition of Done (UX): maket + matnlar + holatlar + A11y + i18n + metrika.
PRda UX-revyu: 18-21-bo’limlardan chek-varaq.
Hujjatlar: har bir sahifa wiki/Storybook ga qoʻllanmani qoʻshadi/yangilaydi.
Audit har chorakda bir marta: kontent, A11y, spektakl, konsistentlik.

Yakuniy shpargalka

Bitta maqsad, bitta asosiy CTA.
Davlat va fidbek oldindan loyihalashtirilgan.
A11y va mahalliylashtirish - «keyin» emas, balki noldan.
Kamroq rang - ko’proq semantika va ritm.
O’lchang: konvertatsiya, xatolar, vaqt, murojaat.
Hamma narsa dizayn tizimi orqali: bir xil qoidalar → bir xil kutishlar → bashorat qilinadigan UX.

Ushbu qo’llanmani sizning asosiy stsenariylaringiz (ro’yxatdan o’tish/KS, depozit/chiqish, bonuslar/turnirlar) uchun tayyor shablonlar bilan to’ldirishim va sizning jarayoningiz uchun chek varaqalarini yig’ishim mumkin.