Центр повідомлень та події

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 це критично - користувачеві важливо бачити підтвердження ставок, платежів і статусів, не відволікаючись від гри.