Benachrichtigungs-Center und Ereignisse

1) Ernennung

Das Benachrichtigungscenter bietet Feedback zwischen System und Benutzer, ohne den Aktionsfluss zu stören. Es erfasst asynchrone Ereignisse (Wetten, Transaktionen, Boni, KYC-Status) und bietet einen einzigen Ort, um Benachrichtigungen anzuzeigen, zu filtern und zu verwalten.

• Informieren, ohne abzulenken.
• Priorisieren statt duplizieren.
• Handeln, wo es angebracht ist.

2) Arten von Benachrichtigungen und deren Anwendung

3) Prioritäten und Bedeutungsebenen

1. Kritisch (Fehler, Absturz, Sicherheit) - erfordern sofort Aufmerksamkeit (Modal/Banner).
2. Wichtig (Zahlung, Wette, Cashout) - Toast + Eintrag im Benachrichtigungscenter.
3. Informativ (Nachrichten, Boni) - Badge und Feed.
4. Social (Freunde, Chats, Turniere) - gruppierte Benachrichtigungen, die die Benutzeroberfläche nicht blockieren.

UX-Regel: „Nicht mehr als eine aktive Benachrichtigung pro Bildschirm“.

Wenn es mehr gibt - kombinieren Sie: „3 neue Ereignisse“.

4) Benachrichtigungszentrumsarchitektur

4. 1 Quelle der Ereignisse

Backend → Event Bus → Notification Service → UI.
Die Ereignisse werden klassifiziert: 'type', 'severity', 'context', 'ttl', 'userId'.
Werden im 'notification _ store' (Redis + DB) gespeichert.

4. 2 Kundenfluss

WebSocket / SSE для real-time.
Lokaler Zustand → lazy-loading 10-20 Benachrichtigungen.
Push API (Mobile/Browser) - optional, mit Zustimmung des Nutzers.

4. 3 Datenmodell (Beispiel)

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-Komponenten

5. 1 Icon und Badge

Zeigt die Anzahl der ungelesenen ('≤ 99').
Mit einem Klick öffnet sich das Benachrichtigungsfeld/Center.
„aria-label =“ Es gibt neue Meldungen „“; bei null - „aria-hidden =“ true „“.

5. 2 Benachrichtigungspanel

Liste der Karten: Symbol → Titel → kurzer Text → CTA- →.
Zustände: neu, gelesen, Lieferfehler, aus Archiv geladen.
Gruppierung nach Datum: Heute, Gestern, Früher.

5. 3 Benachrichtigungskarte

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) Zustände und Handlungen

Neu: mit Farbe/Hintergrundstempel hervorgehoben.
Gelesen: blasser; hat kein Badge.
Fehler: Symbol + Retry.
System: nicht gelöscht, nur archiviert.

• Swipe (Mobile) → löschen/lesen.
• Schaltflächen: „Weitere Informationen“, „Wiederholen“, „Ausblenden“.
• Massenaktionen: Alles mit Lesen markieren, Alles löschen.

7) Visuelle Prinzipien

Maximal 3 Textzeilen in der Benachrichtigung.
Der Titel ist fett, bis zu 50 Zeichen.

• Erfolg - grün/' accent-success'
• Fehler - rot/' accent-danger '
• Info - blau/„ accent-info “
• Achtung - orange/' accent-warning '
• Der Kontrast ≥ AA, die Schatten sind minimal.
• Animationen: Fade/Slide ≤ 160 ms, ohne ständige Bewegungen.

8) Timings und Anzeige

Toast: 3-5 Sek., mit Pause beim Hover.
Banner: vor der Aktion.
Badge: solange es ungelesene gibt.
Inbox: Lagerung nach TTL (z.B. 14-30 Tage).
Auto-close bei Verlust des Bildschirmfokus - Vorsicht (wichtige Status nicht verlieren).

9) A11y und Tastatur

Toast hat 'role =' status'(oder 'alert' für Fehler).
Das Benachrichtigungszentrum ist 'role =' region''mit' aria-label = 'Benachrichtigungszentrum''.
Unterstützt die Navigation mit Pfeilen und Tab/Shift + Tab.
VoiceOver: Lesen neuer Benachrichtigungen beim Hinzufügen ('aria-live =' polite').
Der Fokus „springt“ nicht, wenn er erscheint - nur wenn der Toast kritisch ist.

10) Produktivität

Faule Beladung und Pagination (je 20-30).
Datenkomprimierung ('gzip '/' br'), Gruppierung von Abfragen.
WebSocket reconnection + backoff.
Animationen nur auf 'transform/opacity'.

11) iGaming-Szenarien

11. 1 Wetten und Cashout

„Wette akzeptiert“, „Koeffizient geändert“, „Cashout abgeschlossen“ - toast + Feed-Eintrag.
Bei einem Fehler - toast „Konnte nicht liefern“, Banner mit Retry.

11. 2 Zahlungen

„Nachschub erfolgreich“ → toast.
„Ausgabe in Bearbeitung“ → Bandeintrag, ETA und Schaltfläche „Weitere Informationen“.
PSP-Fehler → rot toast + CTA Retry.

11. 3 Boni und Aktionen

Banner auf dem Hauptbildschirm: „Neues Turnier“, „Einzahlungsbonus“.
Das Benachrichtigungscenter speichert den Verlauf aller Promo-Aktionen.
Möglichkeit zum Ausblenden/Abmelden von Marketing-Typen.

11. 4 KYC und Sicherheit

Persistent Banner, bis die Verifizierung abgeschlossen ist.
„KYC bestätigt“ → grüne toast + Archiv im Feed.
„Das Dokument ist abgelaufen“ → Benachrichtigung + CTA aktualisieren.

12) Metriken

CTR der Benachrichtigungen (nach Typ).
Dismiss Rate (wie viele ohne Aktion geschlossen wurden).
Unread count avg и time-to-read.
Delivery success rate (для realtime).

Latenz zwischen Ereignis und Show (Ziel ≤ 300 ms)

Fehler/Retry Rate bei WebSocket/Push Lieferung.

13) Anti-Muster

Sounds und Pop-ups bei jedem Event.
Unvorhersehbare Auto-Close-Timer.
Wiederholt dieselben Benachrichtigungen.
Screenblocker ohne Grund („bestätigen“, „neu laden“).
Verwendung von Benachrichtigungen als Marketing-Spam.
Zentrum ohne Filter/Suche bei> 50 Veranstaltungen.

14) Design-System-Token

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) QS-Checkliste

Funktionalität

• Real-Time-Lieferung ≤ 300 ms.
• Toast wird ≤ 100ms nach dem Ereignis angezeigt.
• Das Zentrum ist synchronisiert (read/unread).
• Die Masse „alles lesen“ funktioniert.

UX

• Nicht mehr als 1 Toast gleichzeitig.
• Die Lebensdauer der Benachrichtigungen ist optimal (3-5 Sek.).
• Wichtige Hinweise bleiben bis zur Aktion.
• Text ≤ 3 Zeilen, CTA eins.

A11y

• 'role =' status' '/' aria-live' sind korrekt.
• Navigation mit Pfeilen und Tab funktioniert.
• Kontrast ≥ AA.

Leistung

• Pagination und lazy-load.
• Keine Friese bei> 100 Meldungen.
• Datenkomprimierung und verzögertes Rendering.

16) Dokumentation im Konstruktionssystem

Компоненты: `Toast`, `NotificationItem`, `NotificationCenter`, `BadgeIndicator`.
Hydes: Benachrichtigungsprioritäten, TTL, Grouping, Copywriting.
Muster: Toast für sofortige Ereignisse, Banner für wichtige, Zentrum für Geschichte.
Do/Don 't-gallery: „Spam-Benachrichtigungen“ gegen „ruhiges Bewusstsein“.

Kurze Zusammenfassung

Das Benachrichtigungszentrum ist nicht nur eine „Inbox“ von Ereignissen, sondern eine Architektur des Vertrauens und der Transparenz. Gut gestaltete Benachrichtigungen erzeugen ein Gefühl der Kontrolle: Alles Wichtige wird geliefert, nichts fehlt, der Lärm wird unterdrückt. Für iGaming ist dies kritisch - es ist wichtig für den Benutzer, die Bestätigung von Wetten, Zahlungen und Status zu sehen, ohne vom Spiel abgelenkt zu werden.