İstifadəçi profili interfeysi

1) Prinsiplər

1. Ekranda bir fikir. Profil = hər biri bir CTA ilə qısa müstəqil bölmələr dəsti.
2. Təhlükəsizlik default. 2FA/seansların/cihazların görünən statusları, sadə hərəkət yolları.
3. Məlumatların şəffaflığı. Nə saxlanılır, niyə, necə söndürmək/download/silmək.
4. Həddindən artıq yüklənmədən personallaşdırma. Yalnız təcrübəyə təsir edən real parametrlər.
5. Konteksti heç vaxt itirməyin. Layihələr, son bölməyə qayıdış, proqnozlaşdırıla bilən URL.

2) İnformasiya arxitekturası

• Profil (avatar, ad, əlaqə)
• Təhlükəsizlik (parol, 2FA, qurğular/seanslar)
• Ödənişlər (metodlar, avtomatik saxlanılan hissələr, tarix)
• Limitlər (məsuliyyətli oyun)
• KYC (status, sənədlərin yüklənməsi)
• Üstünlüklər (dil, valyuta, əmsalların formatı, sürətli dərəcələr, mövzular)
• Bildirişlər (tipləri/kanalları, sükut/digest)
• Gizlilik və məlumatlar (görünürlük, DSAR/ixrac, hesabın silinməsi)

Heç vaxt tam PAN/CVC göstərməyin; tokenlər və maskalar yalnız UX üçün.

3) Heder profil

Avatar (download/budama), ekran-neym, ID/istifadə.
Status nişanları: KYC: Yoxlama/Keçdi, 2FA: Açıq/Qapalı, Məsuliyyətli oyun: Aktiv.
Sürətli link: «Şifrəni dəyişdirin», «E-mail/telefon təsdiqləyin», «Limiti təyin edin».

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» bölməsi

Sahələr: ad, doğum tarixi, ölkə, interfeys dili.
Əlaqə: e-mail (yoxlama), telefon (OTP).
Lokal: tarix/vaxt/valyuta dil və ölkəyə bağlıdır.
Doğum tarixi KYC-dən sonra yalnız sapport vasitəsilə redaktə olunur.

UX: formatlı ipuçları, yumşaq maskalar, debauns ilə avtoseyv, uğurun təsdiqi.

5) Təhlükəsizlik

Parol: cari parol dəyişikliyi + keyfiyyət qaydaları (manometr/ipucu), tələbləri geri göstərməyin.
2FA: TOTP/SMS; sadə master axını: «daxil → QR → ehtiyat kodları».
Qurğular və seanslar: aktiv girişlərin siyahısı (cihaz/OS/məkan/vaxt), CTA «Cari istisna olmaqla, hər şeyi tamamla».
Sosial giriş: təsdiq ilə bağlama/bağlama.

6) Ödənişlər

Ödəniş metodları: kartlar (maska '1234'), A2A/pul kisələri; status «Default».
Nəticələr: Tətbiq olunarsa, mikro-transfer yoxlaması ilə qorunan rekvizitlər (IBAN/cüzdan).
Əməliyyatların tarixi: növü/tarixi/məbləğinə görə filtrlər, CSV ixracı.
Şəffaflıq: komissiyalar/ETA və hallar «emal/rədd/bitti».

7) Limitlər (Məsuliyyətli oyun)

Növləri: Depozit, Depozit, Müvəqqəti (time-outs), Özünü istisna.
UX: radio dövrü (gün/həftə/ay) + məbləğ, aydın mətn «vasitəsilə qüvvəyə minəcək»....
Zəifləməyə doğru dəyişiklik - gecikmə ilə; sərtləşdirilməsi - dərhal.

8) KYC

Stepper: Şəxsi məlumatlar → Sənədlər → Göndərmə → Yoxlanılır.
Dəqiq fayl tələbləri (növü/ölçüsü/dəqiqliyi) + preview.
Status və vaxt, hazır olma bildirişləri kanalı, təqdim edilmiş sənədlərin tarixi.

9) Üstünlüklər

Əmsalların formatı: onluq/kəsr/Amerika.
Sürətli dərəcələr: switch + «təsdiq olmadan» xəbərdarlıq və icazə verildikdə Undo.
Mövzu: yüngül/qaranlıq/sistemli; görmə qabiliyyəti zəif olanlar üçün kontrast rejimi.
Geo və dil: saxlamaq, lakin yurisdiksiya tələblərini xatırlamaq (məzmun/blok vərəqləri).

10) Bildirişlər

Kanallar: push/e-mail/SMS/app.
Qruplar: maliyyə, oyun, sosial, marketinq (default orta).
«Narahat etməyin»: vaxt və şərtlər (məsələn, gecə marketinq olmadan).
Preview: harada söndürmək üçün bildiriş necə görünür.

11) Məxfilik və məlumatlar

Profil görünürlüyü (əgər sosial funksiyalar): kim nik/avatar/fəaliyyət görür.
Verilənlərin yüklənməsi (DSAR): hazırlıq müddəti ilə arxiv sorğusu; hazır bildiriş.
Hesabın silinməsi: nəticələrini izah etmək, grace-period, alternativ olaraq «dondur».
Razılıq jurnalı: cookie/marketinq/terminlər - tarixlər və versiyalar.

12) Fəaliyyət tarixi

Lent: giriş/çıxış, şifrə dəyişikliyi/2FA, ödəniş rekvizitlərində dəyişikliklər, limitlər.
Filtrlər və ixrac; geo-IP və qurğular haqqında izahat.
CTA «Bu siz deyildiniz?» → Sürətli şifrə dəyişikliyi və seansların tamamlanması.

13) A11y və lokalizasiya

Etiketlər və ipuçları 'aria-describedby' vasitəsilə bağlıdır; səhvlər - 'role =' alert '.
Kontrast ≥ AA, görünür ': focus-visible', Tab sırası vizual uyğun gəlir.
'prefers-reduced-motion' - minimum animasiya.
Dil genişlənməsi: 20-30% enində ehtiyat; - cədvəllər ('font-variant-numeric: tabular-nums;').

14) Mobil nümunələr

drawer kimi profil menyusu; əsas statuslar/STA - yuxarıda.
Sticky-CTA uzun formalar üçün aşağıda («Dəyişikliklər saxla»).
Sahələri, klaviaturaları ('inputmode') növünə görə ölçmək.
Bildirişlər/tarix - sonsuz yükləmə və sentry-müşahidəçi ilə lent.

15) Boş, səhvlər, hallar

Empty: dost ipucu və «sonrakı nə» (metod əlavə/2FA daxil).
Error: səbəb + necə düzəldilir + Retry; daxil edilmiş məlumatları sıfırlamayın.
Busy: lokal downloaders, bütün ekran kilidi olmadan; TTFF ≤ 100 ms.

16) Metrika

Əsas parametrlər üzrə Completion Rate (2FA, KYC, ödəniş metodları).
Time-to-Complete bölmələri (parol/2FA/KYC/limitləri).
Error Rate formaları + uğurlu Retry payı.
Üstünlük Adoption (mövzu, sürətli dərəcələr, əmsalların formatı).
Security posture: 2FA ilə istifadəçilərin payı, bitmiş başqalarının seanslarının sayı.

17) Anti-nümunələr

Gizli kritik parametrlər (2FA/limitlər) dərinlikdə.
Modalkada uzun anketlər; avtomobil seyvinin olmaması.
busy/təsdiq olmadan «dilsiz» göndərmə.
Fokus və «atlama» maket sıfırlama; CLS şəkillərə görə.
Kodun kopipastına qadağa 2FA/OTP.
Marketinq və kritik default bildirişləri qarışdırın.

18) Dizayn sistemi tokenləri (nümunə)

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) Snippetlər

Cihazların/sessiyaların siyahısı (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>

Koeffisiyent formatı açarı (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>

Ödəniş metodları kartı (maskalanma)

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

20) QA-çek siyahısı

Məna və axın

• Bölmələr məntiqlidir; hər ekran bir əsas CTA var.
• URL/naviqasiya son bölməni bərpa edir.

Formalar

• Doğru 'type/inputmode/autocomplete'; yumşaq maskalar, proqnozlaşdırıla bilən caret.
• Debauns ilə asinxron yoxlamalar; saxlama məlumatları itirmir.

Təhlükəsizlik

• 2FA flow aydın; ehtiyat kodları download üçün mövcuddur.
• Seanslar/qurğular başa çatır, hadisələr reallıq edir.
• Həssas sahələr giriş/cache deyil.

iGaming spesifikasiyası

• Gecikmiş giriş və müxtəlif dövrlər ilə limitlər.
• KYC statusu və sənədləri aydın; vaxt və bildiriş kanalı görünür.
• Əmsalların formatı və sürətli bahislər elan edildiyi kimi işləyir.

A11u/Lokalizasiya

• Kontrast ≥ AA; ': focus-visible' görürük; Tab qaydası düzgündür.
• Mətnlər və rəqəmlər dil/valyutaya uyğunlaşdırılır; RTL dəstəklənir (lazım gələrsə).

Performans

• TTFF ≤ 100 ms; CLS yoxdur; görüntülər tənbəl yüklənir.
• Böyük siyahılar (tarix) pozulmuş/virtuallaşdırılmışdır.

21) Dizayn sistemində sənədləşmə

Компоненты: `ProfileHeader`, `ProfileSection`, `SecurityPanel`, `SessionsList`, `PaymentMethodCard`, `LimitsForm`, `KYCStepper`, `PreferencesForm`.
Tokenlər: sahələr/radiuslar/fokus/nişanlar, CUS/limitlər statusları, uğur/səhv/diqqət rəngləri.
Patternlər: «Bölməyə bir CTA», «Risk üçün Undo/Confirm», «İxrac/məlumatların silinməsi (DSAR)».
Do/Don 't: gizli təhlükəsizlik parametrləri, həddindən artıq formalar, marketinq daxil maskalama.

Qısa xülasə

Profil interfeysi etimad mərkəzidir: sadə, dürüst və təhlükəsiz olmalıdır. Aydın memarlıq, sürətli və proqnozlaşdırıla bilən flow (2FA/KYC/limitlər/ödənişlər), səliqəli formalar və məlumatların şəffaflığı profili məhsulun dayağına çevirir və iGaming üçün xüsusilə kritik yükü azaldır.