Центр уведомлений и события

1) Назначение

Центр уведомлений обеспечивает обратную связь между системой и пользователем, не нарушая поток действий. Он фиксирует асинхронные события (ставки, транзакции, бонусы, статусы KYC) и предоставляет единое место просмотра уведомлений, их фильтрацию и управление.

• Информировать, не отвлекая.
• Приоритизировать, а не дублировать.
• Давать действия там, где они уместны.

2) Типы уведомлений и их применение

3) Приоритеты и уровни важности

1. Critical (ошибка, сбой, безопасность) — требуют внимания сразу (Modal/Banner).
2. Important (платеж, ставка, кэшаут) — Toast + запись в центр уведомлений.
3. Informational (новости, бонусы) — Badge и лента.
4. Social (друзья, чаты, турниры) — сгруппированные уведомления, не блокирующие UI.

UX-правило: «Не более одного активного уведомления на экран».

Если их больше — объединяйте: «3 новых события».

4) Архитектура центра уведомлений

4.1 Источник событий

Backend → Event Bus → Notification Service → UI.
События классифицируются: `type`, `severity`, `context`, `ttl`, `userId`.
Сохраняются в `notification_store` (Redis + DB).

4.2 Клиентский поток

WebSocket / SSE для real-time.
Локальный state → lazy-подгрузка 10–20 уведомлений.
Push API (мобайл/браузер) — опционально, при согласии пользователя.

4.3 Модель данных (пример)

json
{
"id": "n12345",
"type": "deposit_success",
"severity": "info",
"title": "Replenishment successful,"
"message": "You made 500 ₴ through Papara,"
"timestamp": "2025-11-03T19:20:00Z",
"context": { "transactionId": "tx123" },
"read": false,
"action": {"label": "View," "url": "/wallet/history "}
}

5) UI-компоненты

5.1 Иконка и badge

Показывает количество непрочитанных (`≤ 99`).
При клике открывает панель/центр уведомлений.
`aria-label="Есть новые уведомления"`; при нуле — `aria-hidden="true"`.

5.2 Панель уведомлений

Список карточек: иконка → заголовок → короткий текст → время → CTA.
Состояния: новое, прочитано, ошибка доставки, загружено из архива.
Группировка по дате: Сегодня, Вчера, Ранее.

5.3 Карточка уведомления

html
<article class="notif new" role="article">
<div class="icon success"></div>
<div class="content">
<h4> Replenishment successful </h4>
<p> 500 ₴ via Papara </p>
<time datetime =" 2025-11-03T19: 20"> 5 min ago </time>
</div>
<button class =" icon" aria-label = "Delete"> </button>
</article>

6) Состояния и действия

Новое: выделено цветом/фоновой плашкой.
Прочитано: бледнее; не имеет badge.
Ошибка: иконка+ Retry.
Системное: не удаляется, только архивируется.

• Swipe (мобайл) → удалить/прочитать.
• Кнопки: «Подробнее», «Повторить», «Скрыть».
• Массовые действия: Отметить все прочитанным, Очистить все.

7) Визуальные принципы

Максимум 3 строки текста в уведомлении.
Заголовок жирный, до 50 символов.

• Успех — зеленый / `accent-success`
• Ошибка — красный / `accent-danger`
• Информация — синий / `accent-info`
• Внимание — оранжевый / `accent-warning`
• Контраст ≥ AA, тени минимальные.
• Анимации: fade/slide ≤ 160 мс, без постоянных движений.

8) Тайминги и отображение

Toast: 3–5 сек, с паузой при hover.
Banner: до действия.
Badge: пока есть непрочитанные.
Inbox: хранение по TTL (например, 14–30 дней).
Auto-close при потере фокуса экрана — осторожно (не терять важные статусы).

9) A11y и клавиатура

Toast имеет `role="status"` (или `alert` для ошибок).
Центр уведомлений — `role="region"` с `aria-label="Центр уведомлений"`.
Поддержка навигации стрелками и Tab/Shift+Tab.
VoiceOver: прочтение новых уведомлений при добавлении (`aria-live="polite"`).
Фокус не «прыгает» при появлении — только если toast критичный.

10) Производительность

Ленивая загрузка и пагинация (по 20–30).
Сжатие данных (`gzip`/`br`), группировка запросов.
WebSocket reconnection + backoff.
Анимации только на `transform/opacity`.

11) Сценарии iGaming

11.1 Ставки и кэшаут

«Ставка принята», «Коэффициент изменился», «Кэшаут выполнен» — toast + запись в ленту.
При ошибке — toast «Не удалось поставить», banner с Retry.

11.2 Платежи

«Пополнение успешно» → toast.
«Вывод в обработке» → запись в ленте, ETA и кнопка «Подробнее».
Ошибка PSP → красный toast + CTA Retry.

11.3 Бонусы и акции

Banner на главном экране: «Новый турнир», «Бонус за депозит».
Центр уведомлений хранит историю всех промо.
Возможность скрыть/отписаться от маркетинговых типов.

11.4 KYC и безопасность

Persistent banner до завершения верификации.
«KYC подтвержден» → зеленый toast + архив в ленте.
«Срок действия документа истек» → уведомление + CTA обновить.

12) Метрики

CTR уведомлений (по типам).
Dismiss rate (сколько закрыли без действия).
Unread count avg и time-to-read.
Delivery success rate (для realtime).
Latency между событием и показом (цель ≤ 300 мс).
Error/Retry rate при доставке WebSocket/Push.

13) Анти-паттерны

Звуки и всплывающие окна при каждом событии.
Непредсказуемые auto-close таймеры.
Повтор одних и тех же уведомлений.
Скринблокеры без причины («подтвердите», «перезагрузите»).
Использование уведомлений как маркетинг-спам.
Центр без фильтров/поиска при >50 событиях.

14) Токены дизайн-системы

json
{
"toast": {
"durationMs": 4000,
"maxWidth": 400,
"gap": 12,
"radius": 10,
"shadow": "var(--elev-3)"
},
"badge": {
"size": 18,
"color": "var(--accent-info)"
},
"panel": {
"width": 380,
"radius": 12,
"gap": 8,
"padding": "12 16"
},
"a11y": {
"ariaLive": "polite",
"contrastAA": true
}
}

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

Функциональность

• Реал-тайм доставка ≤ 300 мс.
• Toast отображается ≤ 100 мс после события.
• Центр синхронизирован (read/unread).
• Массовое «прочитать все» работает.

UX

• Не более 1 toast одновременно.
• Время жизни уведомлений оптимально (3–5 сек).
• Важные уведомления остаются до действия.
• Текст ≤ 3 строки, CTA один.

A11y

• `role="status"`/`aria-live` корректны.
• Навигация стрелками и Tab работает.
• Контраст ≥ AA.

Перформанс

• Пагинация и lazy-load.
• Нет фризов при >100 уведомлениях.
• Сжатие данных и отложенный рендеринг.

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

Компоненты: `Toast`, `NotificationItem`, `NotificationCenter`, `BadgeIndicator`.
Гайды: приоритеты уведомлений, TTL, grouping, копирайтинг.
Паттерны: toast для мгновенных событий, banner для важных, центр для истории.
Do/Don’t-галерея: «спамящие уведомления» vs «спокойная информированность».

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

Центр уведомлений — это не просто «инбокс» событий, а архитектура доверия и прозрачности. Хорошо спроектированные уведомления создают ощущение контроля: все важное доставлено, ничего не пропало, шум подавлен. Для iGaming это критично — пользователю важно видеть подтверждение ставок, платежей и статусов, не отвлекаясь от игры.