Интерфейс профиля пользователя

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`), A2A/кошельки; статус «По умолчанию».
Выводы: сохраненные реквизиты (IBAN/кошелек) с верификацией микро-трансфером, если применяется.
История транзакций: фильтры по типу/дате/сумме, экспорт CSV.
Прозрачность: комиссии/ETA и состояния «В обработке/Отклонено/Готово».

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; ключевые статусы/CTA — вверху.
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 статусы и документы ясны; сроки и канал уведомлений видимы.
• Формат коэффициентов и быстрые ставки работают как заявлено.

A11y/Локализация

• Контраст ≥ AA; `:focus-visible` видим; Tab-порядок корректный.
• Тексты и числа адаптируются к языку/валюте; RTL поддержан (если надо).

Перформанс

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

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

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

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

Интерфейс профиля — это центр доверия: он должен быть простым, честным и безопасным. Ясная архитектура, быстрые и предсказуемые флоу (2FA/KYC/лимиты/платежи), аккуратные формы и прозрачность работы с данными превращают профиль в опору продукта и снижают нагрузку на саппорт — особенно критично для iGaming.