Notification Center and Events

1) Purpose

The notification center provides feedback between the system and the user without disrupting the flow of actions. It captures asynchronous events (bets, transactions, bonuses, KYC statuses) and provides a single place to view notifications, filter and manage them.

• Inform without distraction.
• Prioritize, not duplicate.
• Give actions where they are appropriate.

2) Types of notifications and their application

3) Priorities and levels of importance

1. Critical (error, failure, security) - require attention immediately (Modal/Banner).
2. Important (payment, bet, cashout) - Toast + entry in the notification center.
3. Informational (news, bonuses) - Badge and tape.
4. Social (friends, chats, tournaments) - grouped notifications that do not block UI.

UX rule: "No more than one active notification per screen."

If there are more of them, combine: "3 new events."

4) Notification center architecture

4. 1 Event source

Backend → Event Bus → Notification Service → UI.
Events are classified: 'type', 'severity', 'context', 'ttl', 'userId'.
Stored in 'notification _ store' (Redis + DB).

4. 2 Client flow

WebSocket / SSE для real-time.
Local state → lazy loading of 10-20 notifications.
Push API (mobile/browser) - optional, with user consent.

4. 3 Data model (example)

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 components

5. 1 Icon and badge

Shows the number of unread ('≤ 99').
When clicked, opens the panel/notification center.
'aria-label =" There are new notifications"'; at zero -' aria-hidden =" true"'.

5. 2 Notification panel

List of cards: icon → heading → short text → time → CTA.
Status: new, read, delivery error, downloaded from archive.
Group by date: Today, Yesterday, Earlier.

5. 3 Notification card

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) States and actions

New: highlighted with color/background plate.
Read: paler; does not have badge.
Error: icon + Retry.
System: not deleted, only archived.

• Swipe (mobile) → delete/read.
• Buttons: "More," "Repeat," "Hide."
• Mass Actions: Mark All Read, Clear All.

7) Visual principles

Maximum of 3 lines of text in the notification.
The title is bold, up to 50 characters.

• Success - green/' accent-success'
• Error - red/' accent-danger'
• Info - blue/' accent-info'
• Attention - orange/' accent-warning'
• Contrast ≥ AA, shadows are minimal.
• Animations: fade/slide ≤ 160 ms, without constant movements.

8) Timings and display

Toast: 3-5 seconds, with a pause at hover.
Banner: before the action.
Badge: there are unread ones so far.
Inbox: TTL storage (for example, 14-30 days).
Auto-close when the screen focus is lost - carefully (do not lose important statuses).

9) A11y and keyboard

Toast has a'role = "status"' (or 'alert' for errors).
Notification Center - 'role = "region"' with' aria-label =" Notification Center"'.
Support for arrow navigation and Tab/Shift + Tab.
VoiceOver: reading new notifications when added ('aria-live = "polite"').
Focus does not "jump" when it appears - only if the toast is critical.

10) Performance

Lazy loading and pagination (20-30 each).
Data compression ('gzip '/' br'), grouping requests.
WebSocket reconnection + backoff.
Animations only on 'transform/opacity'.

11) iGaming Scenarios

11. 1 Betting and cashout

"Bet accepted," "Coefficient changed," "Cashout completed" - toast + tape recording.
In case of error - toast "Failed to install," banner with Retry.

11. 2 Payments

"Replenishment successful" → toast.
Output in Process → tape entry, ETA, and More button.
PSP error → red toast + CTA Retry.

11. 3 Bonuses and promotions

Banner on the home screen: "New Tournament," "Deposit Bonus."

The notification center stores the history of all promos.
Ability to hide/unsubscribe from marketing types.

11. 4 KYC and safety

Persistent banner until verification is complete.
"KYC confirmed" → green toast + archive in tape.
"Document expired" → notification + CTA update.

12) Metrics

CTR notifications (by type).
Dismiss rate (how much was closed without action).
Unread count avg и time-to-read.
Delivery success rate (для realtime).
Latency between event and show (target ≤ 300 ms).
Error/Retry rate on WebSocket/Push delivery.

13) Anti-patterns

Sounds and pop-ups at each event.
Unpredictable auto-close timers.
Repeat the same notifications.
Screensavers without cause ("confirm," "reboot").
Using notifications as marketing spam.
Center unfiltered/searchable at> 50 events.

14) Design system tokens

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 checklist

Functionality

• Real time delivery ≤ 300 ms.
• Toast is displayed ≤ 100 ms after the event.
• Center is synchronized (read/unread).
• Mass "read everything" works.

UX

• Not more than 1 toast at a time.
• Notification lifetime is optimal (3-5 seconds).
• Important notifications remain pending.
• Text ≤ 3 lines, CTA one.

A11y

• 'role = "status" '/' aria-live' are correct.
• Arrow and Tab navigation works.
• Contrast ≥ AA.

Performance

• Pagination and lazy-load.
• No friezes at> 100 notifications.
• Data compression and delayed rendering.

16) Documentation in the design system

Компоненты: `Toast`, `NotificationItem`, `NotificationCenter`, `BadgeIndicator`.
Guides: notification priorities, TTL, grouping, copywriting.
Patterns: toast for instant events, banner for important, center for history.

Do/Don't gallery: "spam notifications" vs "calm awareness."

Brief Summary

The notification center is not just an inbox of events, but an architecture of trust and transparency. Well-designed notifications create a sense of control: everything important is delivered, nothing is lost, the noise is suppressed. This is critical for iGaming - it is important for the user to see confirmation of bets, payments and statuses without being distracted from the game.