Інтерфейс профілю користувача

1) Принципи

1. Одна думка на екран. Профіль = набір коротких самостійних розділів з одним CTA кожен.
2. Безпека за замовчуванням. Видимі статуси 2FA/сеансів/пристроїв, прості шляхи до дії.
3. Прозорість даних. Що зберігається, навіщо, як відключити/завантажити/видалити.
4. Персоналізація без перевантаження. Тільки реальні налаштування, що впливають на досвід.
5. Ніколи не втрачайте контекст. Чернетки, повернення до останнього розділу, передбачуваний URL.

2) Інформаційна архітектура

• Профіль (аватар, ім'я, контакти)
• Безпека (пароль, 2FA, пристрої/сеанси)
• Платежі (методи, автозбережені деталі, історія)
• Ліміти (відповідальна гра)
• KYC (статус, завантаження документів)
• Переваги (мова, валюта, формат коефіцієнтів, швидкі ставки, теми)
• Сповіщення (типи/канали, тиша/дигест)
• Приватність і дані (видимість, DSAR/експорт, видалення облікового запису)

Ніколи не показуйте повні PAN/CVC; токени і маски тільки для UX.

3) Хедер профілю

Аватар (завантаження/обрізка), дисплей-нейм, ID/юзернейм.
Бейджі статусу: KYC: На перевірці/Пройдено, 2FA: Вкл/Викл, Відповідальна гра: Активна.
Швидкі посилання: «Змінити пароль», «Підтвердити e-mail/телефон», «Встановити ліміт».

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) Розділ «Профіль»

Поля: ім'я, дата народження, країна, мова інтерфейсу.
Контакти: e-mail (верифікація), телефон (OTP).
Локаль: дата/час/валюта прив'язані до мови та країни.
Дата народження редагується тільки через саппорт після KYC.

UX: підказки формату, маски м'які, автосейв з дебаунсом, підтвердження успіху.

5) Безпека

Пароль: зміна по поточному паролю + правила якості (манометр/підказки), не показувати вимоги заднім числом.
2FA: TOTP/SMS; Простий майстер-потік: «Включити → QR → резервні коди».
Пристрої та сеанси: список активних входів (пристрій/OS/локація/час), CTA «Завершити все крім поточного».
Соц-логіни: прив'язка/відв'язка з підтвердженням.

6) Платежі

Методи оплати: картки (маска «1234»), А2А/гаманці; статус «Типовий».
Висновки: збережені реквізити (IBAN/гаманець) з верифікацією мікро-трансфером, якщо застосовується.
Історія транзакцій: фільтри за типом/датою/сумою, експорт CSV.
Прозорість: комісії/ЕТА та стану «В обробці/Відхилено/Готово».

7) Ліміти (Відповідальна гра)

Типи: Депозитні, Ставкові, Тимчасові (time-outs), Самовиключення.
UX: радіо період (день/тиждень/місяць) + сума, явний текст «Набере чинності через»....
Зміна в бік ослаблення - із затримкою; посилення - відразу.

8) KYC

Степпер: Особисті дані → Документи → Відправка → На перевірці.
Чіткі вимоги до файлів (тип/розмір/чіткість) + перегляд.
Статус і терміни, канал повідомлень по готовності, історія поданих документів.

9) Переваги

Формат коефіцієнтів: десяткові/дробові/американські.
Швидкі ставки: світч + попередження «без підтвердження» і Undo, якщо допускається.
Тема: світла/темна/системна; контрастний режим для слабозорих.
Гео і мова: зберігати, але пам'ятати вимоги юрисдикцій (контент/блок-листи).

10) Повідомлення

Канали: push/e-mail/SMS/у додатку.
Групи: фінансові, ігрові, соціальні, маркетинг (за замовчуванням помірно).
"Не турбувати": діапазони часу та умови (наприклад, без маркетингу вночі).
Прев'ю: як виглядає повідомлення, де відключити.

11) Приватність і дані

Видимість профілю (якщо соціальні функції): хто бачить нік/аватар/активність.
Завантаження даних (DSAR): запит архіву з терміном підготовки; повідомлення про готовність.
Видалення облікового запису: пояснити наслідки, grace-period, «заморозити» як альтернативу.
Журнал згоди: cookie/маркетинг/терміни - дати і версії.

12) Історія дій

Стрічка: входи/виходи, зміни пароля/2FA, зміни платіжних реквізитів, ліміти.
Фільтри та експорт; пояснення по гео-IP і пристроям.
CTA «Це були не ви?» → швидкий флоу зміни пароля і завершення сеансів.

13) A11y та локалізація

Лейбли і підказки пов'язані через'aria-describedby'; помилки -'role = «alert»'.
Контраст ≥ AA, видимі':focus-visible', порядок Tab відповідає візуальному.
'prefers-reduced-motion'- мінімум анімацій.
Мовна експансія: запас по ширині 20-30%; числа - табличні ('font-variant-numeric: tabular-nums;`).

14) Мобільні патерни

Меню профілю як drawer; ключові статуси/СТА - вгорі.
Sticky-CTA внизу для довгих форм («Зберегти зміни»).
Масштабування полів, клавіатури за типом («inputmode»).
Сповіщення/історія - стрічка з нескінченним підвантаженням і sentry-спостерігачем.

15) Порожні, помилки, стани

Empty: доброзичлива підказка і «що далі» (додати метод/включити 2FA).
Error: причина + як виправити + Retry; не скидати введені дані.
Busy: локальні завантажувачі, без блокування всього екрану; TTFF ≤ 100 мс.

16) Метрики

Completion Rate за ключовими налаштуваннями (2FA, KYC, методи платежів).
Time-to-Complete розділів (пароль/2FA/KYC/ліміти).
Error Rate форм + частка успішних Retry.
Adoption переваг (тема, швидкі ставки, формат коефіцієнтів).
Security posture: частка користувачів з 2FA, число завершених чужих сеансів.

17) Анти-патерни

Заховані критичні налаштування (2FA/ліміти) в глибині.
Довгі анкети в модалці; відсутність автосейву.
«Німа» відправка без busy/підтвердження.
Скидання фокусу і «стрибки» макета; CLS через картинок.
Заборона на копіпаст коду 2FA/OTP.
Змішування маркетингу та критичних повідомлень за замовчуванням.

18) Токени дизайн-системи (приклад)

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) Сніппети

Список пристроїв/сеансів (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>

Перемикач формату коефіцієнтів (радіо)

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>

Карта методів оплати (маскування)

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

20) QA-чек-лист

Сенс і потік

• Розділи логічні; кожен екран має один головний CTA.
• URL/навігація відновлюють останній розділ.

Форми

• Коректні'type/inputmode/autocomplete'; м'які маски, передбачуваний caret.
• Асинхронні перевірки з дебаунсом; збереження не втрачає дані.

Безпека

• 2FA флоу зрозумілий; резервні коди доступні для скачування.
• Сеанси/пристрої завершуються, події логуються.
• Чутливі поля не логуються/не кешуються.

iGaming-специфіка

• Ліміти з відкладеним вступом і різними періодами.
• KYC статуси і документи ясні; терміни і канал повідомлень видимі.
• Формат коефіцієнтів і швидкі ставки працюють як заявлено.

А11у/Локалізація

• Контраст ≥ AA;':focus-visible'бачимо; Tab-порядок коректний.
• Тексти і числа адаптуються до мови/валюти; RTL підтриманий (якщо треба).

Перформанс

• TTFF ≤ 100 мс; немає CLS; зображення ліниво вантажаться.
• Великі списки (історія) пагіновані/віртуалізовані.

21) Документація в дизайн-системі

Компоненти: `ProfileHeader`, `ProfileSection`, `SecurityPanel`, `SessionsList`, `PaymentMethodCard`, `LimitsForm`, `KYCStepper`, `PreferencesForm`.
Токени: поля/радіуси/фокус/бейджі, статуси КУС/лімітів, кольори успіх/помилка/увага.
Патерни: «Один CTA на розділ», «Undo/Confirm для ризику», «Експорт/видалення даних (DSAR)».
Do/Don’t: заховані безпекові налаштування, перевантажені форми, маскуючі маркетингові включення.

Коротке резюме

Інтерфейс профілю - це центр довіри: він повинен бути простим, чесним і безпечним. Ясна архітектура, швидкі і передбачувані флоу (2FA/KYC/ліміти/платежі), акуратні форми і прозорість роботи з даними перетворюють профіль в опору продукту і знижують навантаження на саппорт - особливо критично для iGaming.