Centre de notification et événements

1) Destination

Le centre de notification fournit une rétroaction entre le système et l'utilisateur sans perturber le flux d'activité. Il enregistre les événements asynchrones (paris, transactions, bonus, statuts KYC) et fournit un seul endroit pour consulter les notifications, les filtrer et les gérer.

• Informer sans distraire.
• Hiérarchiser plutôt que dupliquer.
• Donner des actions là où elles sont appropriées.

2) Types de notifications et leur application

3) Priorités et niveaux d'importance

1. Critical (erreur, panne, sécurité) - nécessitent une attention immédiate (Modal/Banner).
2. Importateur (paiement, mise, cache) - Toast + entrée au centre de notification.
3. Informational (nouvelles, bonus) - Badge et bande.
4. Social (amis, chats, tournois) - notifications groupées qui ne bloquent pas l'IU.

Règle UX : « Pas plus d'une notification active par écran ».

S'il y en a plus, combinez : « 3 nouveaux événements ».

4) Architecture du centre de notification

4. 1 Source des événements

Backend → Event Bus → Notification Service → UI.
Les événements sont classés : 'type', 'severity', 'context', 'ttl', 'userId'.
Sont enregistrés dans 'notification _ store' (Redis + DB).

4. 2 Flux client

WebSocket / SSE для real-time.
État local → lazy-chargement 10-20 notifications.
API Push (mobile/navigateur) - en option, avec le consentement de l'utilisateur.

4. 3 Modèle de données (exemple)

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) Composants UI

5. 1 Icône et badge

Affiche le nombre de non lus ('≤ 99').
Un clic ouvre le panneau/centre de notification.
'Aria-label = 'Il y a de nouvelles notifications' ; à zéro, "aria-hidden =" vrai ".

5. 2 Panneau de notification

Liste des cartes : icône → titre → texte court → temps → CTA.
États : Nouveau, lu, erreur de livraison, téléchargé à partir de l'archive.
Groupement par date : Aujourd'hui, hier, plus tôt.

5. 3 Carte de notification

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) États et actions

Nouveau : mis en surbrillance par la couleur/l'arrière-plan.
Lu : plus pâle ; n'a pas de badge.
Erreur : icône + Retry.
Système : n'est pas supprimé, seulement archivé.

• Swipe (mobile) → supprimer/lire.
• Boutons : Plus, Répéter, Masquer.
• Actions de masse : Marquer tout ce que vous avez lu, Effacer tout.

7) Principes visuels

Maximum de 3 lignes de texte dans la notification.
Le titre est gras, jusqu'à 50 caractères.

• Succès - vert/' accent-success '
• Erreur - rouge/' accent-danger '
• Informations - bleu/' accent-info '
• Attention - orange/' accent-warning '
• Le contraste est ≥ AA, les ombres sont minimes.
• Animations : fade/slide ≤ 160 ms, pas de mouvements constants.

8) Timings et affichage

Toast : 3-5 secondes, avec une pause à hover.
Banner : avant l'action.
Badge : tant qu'il y en a qui ne sont pas lus.
Inbox : stockage par TTL (par exemple, 14-30 jours).
Auto-close lorsque vous perdez la mise au point de l'écran - attention (ne pas perdre les statuts importants).

9) A11y et clavier

Toast a 'role = « status » (ou' alert 'pour les erreurs).
Le centre de notification est 'role =' region 'avec' aria-label = 'Centre de notification'.
Prise en charge de la navigation par les flèches et Tabulation/Shift + Tabulation.
VoiceOver : lecture de nouvelles notifications lors de l'ajout ('aria-live =' polite ').
Le focus ne « saute » pas à l'arrivée - seulement si toast est critique.

10) Performance

Chargement paresseux et pagination (20-30).
Compression de données ('gzip '/' br'), regroupement de requêtes.
WebSocket reconnection + backoff.
Les animations sont uniquement sur « bou/opacity ».

11) Scripts iGaming

11. 1 Paris et cache

« Taux accepté », « Coefficient changé », « Cache effectué » - toast + enregistrement dans la bande.
En cas d'erreur - toast « Impossible de mettre », banner avec Retry.

11. 2 Paiements

« Reconstitution réussie » → toast.
La sortie dans le traitement → l'enregistrement dans la bande, ETA et le bouton Plus.
Erreur PSP → red toast + CTA Retry.

11. 3 Bonus et promotions

Banner sur l'écran d'accueil : « Nouveau tournoi », « Bonus de dépôt ».
Le Centre de notification conserve l'historique de toutes les promotions.
Possibilité de cacher/se désabonner des types de marketing.

11. 4 KYC et la sécurité

Banner persistant jusqu'à la fin de la vérification.
« KYC confirmé » → green toast + archive dans le ruban.
Le document a expiré → la notification + CTA a été mise à jour.

12) Métriques

CTR des notifications (par type).
Taux de dismiss (combien fermé sans action).
Unread count avg и time-to-read.
Delivery success rate (для realtime).
Latitude entre l'événement et le spectacle (objectif de ≤ 300 ms).
Taux d'erreur/Retry lors de la livraison WebSocket/Push.

13) Anti-modèles

Sons et pop-ups à chaque événement.
Minuteurs auto-close imprévisibles.
Répétez les mêmes notifications.
Screenblockers sans raison (« confirmer », « redémarrer »).
Utilisation des notifications comme marketing-spam.
Centre sans filtres/recherche à> 50 événements.

14) Tokens de système de conception

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) Liste de vérification QA

Fonctionnalité

• Livraison en temps réel ≤ 300 ms.
• Toast s'affiche ≤ 100 ms après l'événement.
• Centre synchronisé (read/unread).
• La masse « lire tout » fonctionne.

UX

• Pas plus de 1 toast en même temps.
• La durée de vie des notifications est optimale (3-5 secondes).
• Des avis importants restent en suspens.
• Texte ≤ 3 lignes, CTA une.

A11y

• 'role = « status » '/' aria-live' sont corrects.
• La navigation par les flèches et l'onglet fonctionne.
• Contraste ≥ AA.

Performance

• Pagination et lazy-load.
• Pas de frisottis à> 100 notifications.
• Compression des données et rendu différé.

16) Documentation dans le système de conception

Компоненты: `Toast`, `NotificationItem`, `NotificationCenter`, `BadgeIndicator`.
Hydes : priorités de notification, TTL, groupement, copywriting.
Patterns : toast pour les événements instantanés, banner pour les événements importants, centre pour l'histoire.
Do/Don't-gallery : « spamming notifications » vs « tranquillité d'esprit ».

Résumé succinct

Le centre de notification n'est pas seulement un « inbox » d'événements, mais une architecture de confiance et de transparence. Les notifications bien conçues créent un sentiment de contrôle : tout ce qui est important est livré, rien ne manque, le bruit est supprimé. Pour iGaming, c'est critique - il est important pour l'utilisateur de voir la confirmation des paris, des paiements et des statuts sans se distraire du jeu.