Foydalanuvchi profili interfeysi

1) Qonunning

1. Ekranda bitta fikr. Profil = har biri bitta CTA bilan qisqa mustaqil boʻlimlar toʻplami.
2. Andoza xavfsizlik. 2FA/seanslar/qurilmalarning koʻrinadigan holatlari, harakat qilishning oddiy usullari.
3. Maʼlumotlar shaffofligi. Nima saqlanadi, nima uchun, qanday oʻchirish/yuklash/oʻchirish kerak.
4. Haddan tashqari yuksiz personallashtirish. Faqat tajribaga ta’sir qiladigan haqiqiy sozlamalar.
5. Hech qachon kontekstni yoʻqotmang. Loyihalar, oxirgi boʻlimga qaytish, oldindan aytiladigan URL.

2) Axborot arxitekturasi

• Profil (avatar, ism, aloqalar)
• Xavfsizlik (maxfiy soʻz, 2FA, qurilmalar/seanslar)
• To’lovlar (usullar, avtoulov saqlangan qismlar, tarix)
• Limitlar (mas’uliyatli o’yin)
• KYC (maqomi, hujjatlarni yuklash)
• Afzalliklar (til, valyuta, koeffitsiyentlar formati, tezkor stavkalar, mavzular)
• Xabarnomalar (turlari/kanallari, sukunat/digest)
• Maxfiylik va ma’lumotlar (ko’rinish, DSAR/eksport, akkauntni o’chirish)

Hech qachon toʻliq PAN/CVC koʻrsatmang; faqat UX uchun tokenlar va niqoblar.

3) Profil xederi

Avatar (yuklash/kesish), displey-neym, ID/yuzerneym.
Maqom nishonchalari: KYC: Tekshiruvda/O’tdi, 2FA: Ochiq/Yopiq, Mas’uliyatli o’yin: Faol.
Tezkor havolalar: «Maxfiy soʻzni oʻzgartirish», «Elektron pochta/telefonni tasdiqlash», «Limit belgilash».

html
<header class="profile-head">
<img class="avatar" alt="Аватар пользователя">
<div>
<h1>Имя пользователя</h1>
<div class="badges"><span class="badge">KYC: На проверке</span><span class="badge">2FA: Выкл</span></div>
</div>
<button class="btn btn--primary">Загрузить документы</button>
</header>

4) «Profil» bo’limi

Maydonlar: ismi, tug’ilgan sanasi, mamlakati, interfeys tili.
Aloqa: e-mail (verifikatsiya), telefon (OTP).
Lokal: sana/vaqt/valyuta til va mamlakatga bog’langan.
Tug’ilgan sanasi faqat KYC dan keyin sapport orqali tahrir qilinadi.

UX: formatdagi maslahatlar, yumshoq niqoblar, debauns bilan avtoseyv, muvaffaqiyatni tasdiqlash.

5) Xavfsizlik

Maxfiy soʻz: joriy maxfiy soʻz bilan oʻzgartirish + sifat qoidalari (manometr/maslahatlar), talablarni orqada koʻrsatmaslik.
2FA: TOTP/SMS; oddiy master-oqim: «Yoqish → QR → zaxira kodlar».
Moslamalar va seanslar: Aktiv kirish roʻyxati (moslama/OS/joylashtirish/vaqt), CTA «Hamma narsani oxiriga yetkazish».
So’z-loginlar: tasdiqlash bilan bog’lash/ajratish.

6) To’lovlar

To’lov usullari: kartochkalar (niqob’1234’), A2A/hamyonlar; Andoza holat.
Xulosalar: agar qo’llanilayotgan bo’lsa, mikro-transfer bilan tasdiqlangan saqlangan rekvizitlar (IBAN/hamyon).
Tranzaksiyalar tarixi: turi/sanasi/summasi boʻyicha filtrlar, CSV eksport qilish.
Shaffoflik: komissiya/ETA va «Qayta ishlash/Rad etilgan/Tayyor» holatlari.

7) Limitlar (Mas’uliyatli o’yin)

Turlari: Depozit, Stavka, Vaqtinchalik (time-outs), O’zini istisno qilish.
UX: radio davri (kun/hafta/oy) + summa, aniq matn «orqali kuchga kiradi»....
Zaiflashtirish tomonga o’zgarish - kechikish bilan; qattiqlashtirish - darhol.

8) KYC

Stepper: Shaxsiy maʼlumotlar → Hujjatlar → Joʻnatish → Tekshirish.
Fayllar uchun aniq talablar (turi/oʻlchami/aniqligi) + oldindan koʻrib chiqish.
Maqomi va muddatlari, tayyorligi bo’yicha bildirishnomalar kanali, taqdim etilgan hujjatlarning tarixi.

9) Afzalliklar

Koeffitsiyentlar formati: o’nli/kasrli/amerikalik.
Tezkor stavkalar: svitch + ogohlantirish «tasdiqlanmagan» va agar ruxsat etilsa Undo.
Mavzu: yorqin/qorong’i/tizimli; ko’rish qobiliyati past bo’lganlar uchun kontrast rejim.
Geo va til: yurisdiksiya talablarini saqlab qolish, lekin eslab qolish (kontent/blok varaqlari).

10) Bildirishnomalar

Kanallar: push/e-mail/SMS/ilovada.
Guruhlar: moliyaviy, o’yin, ijtimoiy, marketing (o’rtacha).
«Bezovta qilmang»: vaqt oralig’i va sharoitlar (masalan, kechasi marketingsiz).
Preview: xabarnoma qanday koʻrinadi, qayerda oʻchirish kerak.

11) Maxfiylik va ma’lumotlar

Profil koʻrinishi (agar ijtimoiy funksiyalar boʻlsa): kim nik/avatar/faollikni koʻradi.
Maʼlumotlarni yuklash (DSAR): tayyorlash muddati bilan arxiv soʻrovi; tayyorligi bo’yicha bildirishnoma.
Hisobni olib tashlash: oqibatlarini tushuntirish, grace-period, alternativa sifatida «muzlatish».
Kelishuv jurnali: cookie/marketing/atamalar - sanalar va versiyalar.

12) Harakatlar tarixi

Lenta: kirish/chiqish, parol almashtirish/2FA, to’lov rekvizitlari o’zgarishi, limitlar.
Filtrlar va eksport; geo-IP va qurilmalar bo’yicha tushuntirish.
CTA «Bu siz emasmisiz?» → Parolni tez almashtirish va seanslarni tugatish.

13) A11y va mahalliylashtirish

Yorliqlar va maslahatlar’aria-describedby’orqali bog’langan; xatolar -’role =’alert’.
Ko’rinadigan AA ≥ kontrast’: focus-visible’, Tab tartibi vizual tartibga mos keladi.
’prefers-reduced-motion’ - minimal animatsiya.
Til kengayishi: kengligi bo’yicha zaxirasi 20-30%; - jadval raqamlari (’font-variant-numeric: tabular-nums;’).

14) Mobil patternlar

Profil menyusi drawer sifatida; asosiy maqomlar/STA - yuqorida.
Sticky-CTA pastki qismida uzun shakllar uchun («Oʻzgarishlarni saqlash»).
Maydonlarni, klaviaturalarni (’inputmode’) oʻlchash.
Xabarlar/tarix - cheksiz yuklash va sentry-kuzatuvchiga ega bo’lgan lenta.

15) Bo’sh, xatolar, holatlar

Empty: do’stona maslahat va «keyingi nima» (2FA usulini qo’shing/yoqing).
Error: sabab + qanday tuzatish kerak + Retry; kiritilgan ma’lumotlarni o’chirib tashlamaslik.
Busy: lokal yuklagichlar, butun ekranni bloklamasdan; TTFF ≤ 100 ms.

16) Metrika

Asosiy moslamalar bo’yicha Completion Rate (2FA, KYC, to’lov usullari).
Time-to-Complete bo’limlari (maxfiy so’z/2FA/KYC/limitlar).
Error Rate shakllari + muvaffaqiyatli Retry ulushi.
Afzalliklar adoption (mavzu, tezkor stavkalar, koeffitsiyentlar formati).
Security posture: 2FA bilan foydalanuvchilar ulushi, boshqa odamlarning tugallangan seanslari soni.

17) Anti-patternlar

Chuqurlikda yashirin tanqidiy moslamalar (2FA/limitlar).
Modalkadagi uzun so’rovnomalar; avtoseyvning yo’qligi.
busy/tasdiqlamasdan «tilsiz» joʻnatish.
Maket fokusini va «sakrashni» bekor qilish; CLS rasmlar tufayli.
Kod nusxasini taqiqlash 2FA/OTP.
Andoza marketing va tanqidiy xabarlarni aralashtirish.

18) Dizayn-tizim tokenlari (misol)

json
{
"profile": {
"sectionGap": 20,
"fieldHeight": 44,
"radius": 12
},
"security": {
"badge": { "radius": 8, "px": "4 8" },
"focusRing": { "width": 2, "offset": 2 }
},
"lists": {
"row": { "py": 12, "px": 16 },
"divider": 1
},
"motion": { "hoverMs": 160, "pressMs": 90 },
"a11y": { "contrastAA": true, "reduceMotion": true }
}

19) Snippetlar

Uskunalar/seanslar roʻyxati (HTML)

html
<ul class="sessions" role="list">
<li>
<div>Chrome · Windows · Киев</div>
<small>Последняя активность: 14:32</small>
<button class="btn btn--ghost">Выйти</button>
</li>
<li aria-current="true">
<div>Safari · iOS · Текущая сессия</div>
<small>Последняя активность: сейчас</small>
<button class="btn btn--ghost" disabled>Текущая</button>
</li>
</ul>
<button class="btn btn--secondary">Завершить все сеансы</button>

Koeffitsiyentlar formatini oʻzgartirish (radio)

html
<fieldset>
<legend>Формат коэффициентов</legend>
<label><input type="radio" name="odds" value="decimal" checked> Десятичные</label>
<label><input type="radio" name="odds" value="fractional"> Дробные</label>
<label><input type="radio" name="odds" value="american"> Американские</label>
</fieldset>

To’lov usullari xaritasi (niqoblash)

html
<article class="pay-card">
<h4>Visa •••1234</h4>
<small>По умолчанию</small>
<div class="actions">
<button>Сделать основным</button>
<button class="danger">Удалить</button>
</div>
</article>

20) QA-chek-varaq

Maʼnosi va oqimi

• Bo’limlar mantiqiy; har bir ekranda bitta asosiy CTA mavjud.
• URL/navigatsiya oxirgi boʻlimni tiklaydi.

Shakllar

• Toʻgʻri’type/inputmode/autocomplete’; yumshoq niqoblar, oldindan aytish mumkin.
• Debauns bilan asinxron tekshiruvlar; saqlash maʼlumotlarni yoʻqotmaydi.

Xavfsizlik

• 2FA flou tushunarli; zaxira kodlar yuklab olish uchun mavjud.
• Seanslar/qurilmalar tugaydi, voqealar tuzatiladi.
• Sezgir maydonlar kodlanmaydi/keshlanmaydi.

iGaming-spetsifikasi

• Kechiktirilgan kirish va turli davrlar bilan limitlar.
• KYC maqomlari va hujjatlari aniq; xabarnomalarning muddatlari va kanali ko’rinadi.
• Koeffitsiyentlar formati va tezkor stavkalar aytilganidek ishlaydi.

A11u/Lokalizatsiya

• Kontrast ≥ AA;’: focus-visible’ni ko’ryapmiz; Tab-tartib to’g "ri.
• Matnlar va raqamlar til/valyutaga moslashtiriladi; RTL qoʻllanilgan (agar kerak boʻlsa).

Performance

• TTFF ≤ 100 ms; CLS yoʻq; tasvirlar dangasa yuklanadi.
• Katta roʻyxatlar (tarix) paginlangan/virtuallashtirilgan.

21) Dizayn-tizimdagi hujjatlar

Компоненты: `ProfileHeader`, `ProfileSection`, `SecurityPanel`, `SessionsList`, `PaymentMethodCard`, `LimitsForm`, `KYCStepper`, `PreferencesForm`.
Tokenlar: maydon/radius/fokus/bayroqlar, KTS/limitlar maqomi, muvaffaqiyat/xato/diqqat ranglari.
Patternlar: «Bo’limga bitta CTA», «Undo/Confirm for risk», «Eksport/ma’lumotlarni o’chirish (DSAR)».
Do/Don’t: maxfiy xavfsizlik sozlamalari, ortiqcha yuklangan shakllar, marketing qoʻshimchalarini yashirish.

Qisqacha xulosa

Profil interfeysi ishonch markazidir: u sodda, halol va xavfsiz bo’lishi kerak. Aniq arxitektura, tezkor va oldindan aytib bo’ladigan flou (2FA/KYC/limitlar/to’lovlar), aniq shakllar va ma’lumotlar bilan ishlashning shaffofligi profilni mahsulot tayanchiga aylantiradi va iGaming uchun ayniqsa muhim bo’lgan sapportga yukni kamaytiradi.