UX-shakllarni loyihalash

1) Qonunning

1. Avval vazifa, keyin maydonlar. Shakllar - foydalanuvchi stsenariysining davomi, DB roʻyxati emas.
2. Bitta ekran - bitta maqsad. Vazifa tugamagan hamma narsani olib tashlang.
3. Hech qachon maʼlumotlarni yoʻqotmang. Avtoseyv, loyihani tiklash, xavfsiz takrorlash.
4. Qanday qilib «toʻgʻri» ekanini koʻrsating. Xatolikgacha bo’lgan qoidalar va misollar; ehtiyotkorlik bilan tasdiqlang.
5. Andoza foydalanish. Yorliqlar, fokus, kontrast, klaviatura navigatsiyasi.
6. Oldindan aytib bo’ladigan tezlik. Birinchi javob ≤ 100 ms, aniq maqom va taraqqiyot bilan jo’natish.

2) Shaklning axborot arxitekturasi

Maqsad → qadamlar → maydon. Natijadan boshlang (masalan, «pul toʻlash») va maydonlarning minimal toʻplamini tanlang.
Ma’nosi bo’yicha guruhlash: «Shaxsiy ma’lumotlar», «To’lov», «Tasdiqlash». Har bir guruh 6 ta maydonni ≤.
Progressiv ochish: qoʻshimcha maydonlarni shartlarga koʻra koʻrsating (toggle/mamlakat tanlovi).
Maydonlarning tartibi foydalanuvchining boshidagi kabi: ma’lumdan murakkabgacha.

3) Maket va setka

Mobil va ko’pgina vazifalar uchun bitta ustun - ko’rinish va tab-tartib bo’yicha tezroq.
Ikki ustuncha o’zaro bog’langan qisqa maydonlarga mos keladi (sana/vaqt, ismi/familiyasi).
Chiziq balandligi 40-48 px, maydonlar orasidagi masofa 8-12 px (bog’langan )/16-24 px (guruhlar).
Yorliqlarni maydon tepasida tekislash; o’ngda - tor shakllar uchun ishlatilmaydi.

4) Yorliqlar, pleysholderlar, xelperlar

Yorliq majburiydir. Pleysholder - oʻrnak, almashtirish emas.
Helper matnini quyidagi maydon ostida joylashtiring: qoidalar, formatlar, namunaga havola.
Ixtiyoriy maydonlarni «» oʻrniga «(ixtiyoriy)» deb belgilang.

Misol:

html
<label for = "iban"> IBAN <span class = "muted"> (optional) </span> </label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format A-Z, 0-9; example: DE89 3704 0044 0532 0130 00 </small>

5) Qadamlar va taraqqiyot

Koʻp bosqichli shakllar (KSh/toʻlovlar): 3-5 qadam, aniq taraqqiyot «2-qadam 4 dan».
Tugallangan qadamlarni saqlang; maʼlumot yoʻqolmasdan qaytishga ruxsat bering.
Navigatsiya tugmalari: «Orqaga», «Keyingi», yakuniy «Tasdiqlash» - har doim bir joyda.

6) Kirishni boshqarish

Klaviatura va atributlar:’type’,’inputmode’,’autocomplete’.
Kirish niqoblaridan muloyimlik bilan foydalaning (telefon, IBAN, PAN, sana).
Avtomatik toʻldirishni buzmang: toʻgʻri’autocomplete =» given-name» | «cc-number» | «one-time-code» va h.k.
Summalar/shortkatlar presetasi: «+ 50/+ 100/Hammasi» summa maydoni yonida.

Atributlar jadvali (soʻr.):

Maydon	type	inputmode	autocomplete
Email	email	email	email
Telefon	tel	tel	tel
Summa	text	decimal	off
PAN	text	numeric	cc-number
CVC	password	numeric	cc-csc
Xarita sanasi	text	numeric	cc-exp
OTP	text	numeric	one-time-code

7) Validatsiya va xatolar

Strategiya: kiritishdan oldin (helper), vaqtida (yumshoq maslahatlar), keyin (blur/submit).
Asinxron tekshirishlar (loginning o’ziga xosligi, limitlar, tavakkalchilik) - 250-400 ms debauns bilan.
Xato matni: sabab → qanday tuzatish kerak → muqobil.
Bir nechta xato uchun Summary paneli + birinchi xatoga eʼtibor.
Idempotency-Key tanqidiy harakatlar uchun (stavka/to’lov) va xavfsiz retralar.

8) Tugmalar va jo’natish

Birlamchi CTA tanlangan rang/oʻlcham, mavjud Enter.
’Busy’ - bosishning holati va takrorlanishini blokirovka qilish; kechikganda> 3-5 s - «Tasdiqlashni kutamiz»....
Muvaffaqiyatdan keyin - aniq holat (tost/ekran «Tayyor») + keyingi nima bo’ladi.

9) Foydalanish imkoniyati (A11y)

Toʻgʻri aloqalar’label → input’, xatolar’aria-describedby’orqali, tanqidiy aloqalar’role =’alert’orqali.
Koʻrinadigan’: focus-visible’, Tab tartibi vizual koʻrinishga mos keladi.
Matn/piktogramma kontrasti ≥ AA; ma’nosi faqat rang emas.
’prefers-reduced-motion’ ni qoʻllab-quvvatlash: minimal animatsiyalar.
Radiokapkalar guruhlari uchun’fieldset/legend’, maslahatlar uchun’role =’status’.

10) Mahalliylashtirish va xalqaro formatlar

Sanalar/valyutalar/raqamlar - kiritishda lokal, saqlash joyi - ISO/minor birliklar.
Nomlar/manzillarda turli alifbolarga ruxsat bering; defis/apostroflarni cheklamang.
Telefoningizni E.164 saqlang; mamlakat aniq yoki’+ CC’dan tanlanadi.

11) Ijro va barqarorlik

Birinchi vizual javob ≤ 100 ms; asinxron tekshiruvlar - ekranni to’sib qo’ymaydi.
Skeleton «osilgan» spinner o’rniga balandlikni aniqlang, CLSdan qoching.
Uzoq roʻyxatlarni virtualizatsiya qiling (masalan, mamlakatlar/banklar).
Faqat’transform/opacity’ni ommaviy blur/soyalarsiz jonlantiring.

12) Xavfsizlik va maxfiylik

PAN/CVC/pasport yozuvini kiritmang; RUM/konsolga yubormang.
Nozik maydonlarni niqoblab, avtosayvonda saqlamang.
Hisobingiz bor-yoʻqligini oshkor qilmang: «Agar elektron pochta roʻyxatdan oʻtgan boʻlsa, biz xat yuboramiz».
Saqlash - eng kam zarur; KYC nima uchun kerakligini koʻrsating.

13) Namunaviy ssenariylar bo’yicha patternlar

13. 1 To’lov/depozit

So’m maydoni, pul birligi aniq ko’rsatilgan.
yumshoq niqobli PAN, Luhn-tekshirish; CVC yashiringan; sana’MM/YY’s avto- ’/’.
Komissiya/muddatlar haqidagi matn yonma-yon, tooltip ichida emas.

13. 2 Mablag’larni olib qo’yish

Qadamlar: «Summa → Usul → Tasdiqlash».
Progress va «Odatda N daqiqa/soatgacha» (qattiq va’dalarsiz).
Mamlakat bo’yicha usulning variantlari; limitlar to’g "risida ogohlantirish.

13. 3 KYC

Fayllarni bosqichma-bosqich yuklovchi: format/vazn talablari, oldindan koʻrib chiqish, maxfiylik.
Tekshirish muddatlari va maqom kanali (pochta/xabarnoma).

13. 4 Limitlar va mas’uliyatli o’yin

Tushunarli birliklar (kun/hafta/oy), oldindan tuzatish, o’zgarishlarni tasdiqlash, «orqali kuchga kiradi»....

14) Antipatternlar

Yorliq oʻrniga Placeholder.
Har bir belgi uchun debaunsiz xatolar.
Xato roʻy berganda shaklni qayta tiklash.
Tanqidiy koʻrsatmalar faqat tooltip’da yashirilgan.
Valid belgilar/qoʻyishni taqiqlovchi qattiq niqoblar.
Bitta maydonni tekshirish uchun butun sahifani bloklash.
Aniq busy/progresssiz joʻnatish.

15) Sotish snippetlari

Xato maʼlumoti + birinchi muammoga eʼtibor

js function focusFirstError() {
const el = document. querySelector('[aria-invalid="true"]');
if (el) el. focus({ preventScroll:false });
}

Tezkor busy va idempotentlik tugmasi

js btn. addEventListener('click', async () => {
btn. classList. add('is-busy');
try {
const r = await fetch('/api/submit', {
method: 'POST',
headers: { 'Idempotency-Key': crypto. randomUUID() },
body: new FormData(document. querySelector('form'))
});
if (!r.ok) throw new Error();
// success UI
} catch {
// show retry
} finally {
btn. classList. remove('is-busy');
}
});

Mavjud radiokapkalar guruhining HTML-karkasi

html
<fieldset>
<legend> How to get </legend>
<label><input type="radio" name="method" value="sepa"> SEPA</label>
<label><input type="radio" name="method" value="swift"> SWIFT</label>
</fieldset>

16) Dizayn-tizim tokenlari (misol)

json
{
"form": {
"gap": 12,
"groupGap": 20,
"labelSize": 14,
"fieldHeight": 44,
"radius": 10
},
"motion": {
"pressMs": 90,
"hoverMs": 160,
"overlayInMs": 240
},
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}

CSS-presetlar

css
.form { display:grid; gap:12px; }
.form__group { display:grid; gap:20px; }
label { font-size:14px; }
.input { height:44px; padding:0 12px; border-radius:10px; }
.input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.field-error { color: var(--role-danger); font-size:.875rem; margin-top:6px; }

17) Metrika va eksperimentlar

Completion Rate, Time-to-Complete, Error Rate.
Retry Success Rate, tashlab ketilgan shakllar ulushi, qadam chuqurligi.
CTR maslahatlar/misollar, avto toʻldirishlar ulushi.
A/B: maydon tartibi, summa presetlari, xato matnlari, qadamlarga bo’linish.

18) QA-chek-varaq

Maʼnosi va oqimi

Maydonlar maqsadga muvofiq; ortiqcha narsa yo’q.
Guruhlar mantiqiy; guruhga ko’pi bilan 6 ta maydon.

Kirish

Toʻgʻri’type/inputmode/autocomplete’.
Niqoblar yumshoq, qo’shimchalar sinmaydi, oldindan aytish mumkin.

Validatsiya

Kirish oldidan Helper; blur/submit xatolari; debauns 250-400 ms.
Summary - koʻp xatolar uchun panel; birinchisiga diqqat.

Foydalanish imkoniyati

Yorliqlar bog’langan; kontrast ≥ AA;’: focus-visible’koʻrinadi.
Klaviatura navigatsiyasi; ’fieldset/legend’ radioturmalari.

Spektakl

Birinchi javob ≤ 100 ms; osilgan spinnerlar yo’q.
CLS yoʻq; Uzoq roʻyxatlar virtualizatsiya qilindi.

Xavfsizlik

Sezgir joylar mavjud emas; PAN/CVC avtosayvonda emas.
Idempotentlik va xavfsiz retrajlar kiritilgan.

19) iGaming xususiyatlari

Stavkalar: summa + presetalar maydoni, bir zumda’busy’, undo imkoniyati bilan optimistik tasdiqlash (agar reglament ruxsat bersa).
To’lovlar/xulosalar: aniq komissiyalar va dalalar yonidagi muddatlar, nafaqat maslahatlarda; KYC limitlari va maqomini tekshirish.
Turnirlar: minimal ma’lumotlar to’plamiga ega bo’lgan ro’yxatdan o’tkazish shakli, qoidalar va «qorong’u patternlarsiz» kelishiladigan chekbokslar.
Mas’uliyatli o’yin: aniq intervallar va natijani oldindan ko’rish bilan limit o’rnatish shakllari («Kunlik limitingiz ertangi kundan boshlab 2 000 bo’ladi»).

Qisqacha xulosa

Yaxshi shakl - aniq maqsad, minimal maydon to’plami, xatoga qadar tushunarli qoidalar, tezkor javob va saqlangan ma’lumotlar. Stsenariy tuzilishini loyihalashtiring, mavjudlik va lokallarni hurmat qiling, xavfsiz retrajlar va idempotentlikni yoqing. Bu shakllarni tez va ishonchli his qiladi - ayniqsa iGaming tanqidiy stsenariylarida.