Centro notifiche ed eventi

1) Destinazione

Il centro di notifica fornisce un feedback tra il sistema e l'utente senza interferire con il flusso di lavoro. Registra gli eventi asincrono (scommesse, transazioni, bonus, stati KYC) e fornisce un unico punto di visualizzazione, filtraggio e controllo delle notifiche.

• Informarlo senza distrarlo.
• Priorità, non duplicazione.
• Dare l'azione se necessario.

2) Tipi di notifica e loro applicazione

3) Priorità e livelli di importanza

1. Critical (errore, errore, protezione) - Richiede attenzione immediata (Modal/Banner).
2. Influant (pagamento, puntata, cache) - Toast + scrittura al centro delle notifiche.
3. Informational (notizie, bonus) - Badge e nastro.
4. Social (amici, chat, tornei) - notifiche raggruppate che non bloccano l'UI.

Regola UX: «Non più di una notifica attiva sullo schermo».

Se sono di più, mettetevi insieme, «nuovi eventi».

4) Architettura centro notifiche

4. 1 Origine eventi

Backend → Event Bus → Notification Service → UI.
Gli eventi sono classificati «type», «severity», «text», «ttl», «userId».
Vengono salvati in'notification _ store '(Redis + DB).

4. 2 Flusso client

WebSocket / SSE для real-time.
Locale state lazy- 10-20 notifiche.
L'API Push (mobile/browser) è opzionale, con il consenso dell'utente.

4. 3 Modello di dati (esempio)

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

5. 1 Icona e badge

Indica il numero di persone non lette ('≤ 99').
Il click apre il pannello/centro di notifica.
"aria-label =" Ci sono nuove notifiche "; a zero -' aria-hidden =» true».

5. 2 Barra delle notifiche

L'elenco delle schede è l'icona dell'intestazione, il testo breve, il tempo CTA.
Stato nuovo, letto, errore di consegna, scaricato dall'archivio.
Raggruppamento per data, oggi, ieri, prima.

5. 3 Scheda di notifica

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) Stati e azioni

Nuovo: evidenziato con il colore/piastra di fondo.
Letto: più pallido; non ha badge.
Errore: icona + Retry.
Sistema: non viene eliminato, solo archiviato.

• Swipe (mobile) consente di rimuovere/leggere.
• I pulsanti Aggiungi, Ripeti, Nascondi.
• Azioni di massa: Segna tutto quello che hai letto, Cancella tutto.

7) Principi visivi

Massimo 3 righe di testo nella notifica.
Titolo grasso, fino a 50 caratteri.

• Successo - verde/' accent-success '
• Errore - Rosso/' accent-denger'
• Informazioni - Blu/' accent-info '
• Attenzione - arancione/' accent-warning'
• Contrasto dell'AA, ombre minime.
• Animazioni: fade/slide da 160 ms, senza movimenti costanti.

8) Timing e visualizzazione

Toast: 3-5 secondi, pausa hover.
Banner: prima dell'azione.
Ci sono ancora dei non letti.
Inbox: archiviazione TTL (ad esempio 14-30 giorni).
Auto-close quando si perde lo schermo - Attenzione (non perdere gli stati importanti).

9) A11y e tastiera

Toast ha "role =" status "(o" alert "per gli errori).
Centro notifiche: «rolle =» region «c» aria-label = «Centro notifiche».
Supporto per la navigazione con frecce e Tag/Shift + Tav.
VoiceOver - Lettura delle nuove notifiche quando si aggiunge ('aria-live = "polite" ").
Il trucco non salta quando viene visualizzato - solo se il toast è critico.

10) Prestazioni

Scaricamento e paginazione pigri (20-30).
Compressione dei dati («gzip »/« br»), raggruppamento delle query.
WebSocket reconnection + backoff.
Le animazioni sono solo su 'form/opacity'.

11) Script di iGaming

11. 1 Puntata e cache

Puntata accettata, Fattore cambiato, Cache completata - toast + scrittura nel nastro.
In caso di errore, toast «Impossibile mettere», banner con Retry.

11. 2 Pagamenti

«Rifornimento riuscito».
«Output in elaborazione» → la voce nel nastro, ETA e il pulsante «Maggiori informazioni».
Errore PSP: rosso toast + CTA Retry.

11. 3 Bonus e promozioni

Banner sulla schermata principale: «Nuovo torneo», «Bonus deposito».
Il Centro notifiche memorizza la cronologia di tutti i promo.
Possibilità di nascondere/disconnettere i tipi di marketing.

11. 4 KYC e sicurezza

Persistent banner fino al completamento della verifica.
«KYC confermato».
Il documento è scaduto. Notifica + CTA aggiornata.

12) Metriche

Notifiche CTR (per tipo).
Dismiss rate (numero di chiusure senza effetto).
Unread count avg и time-to-read.
Delivery success rate (для realtime).
Latency tra l'evento e la proiezione (obiettivo 300 ms).
Errore/Retry rate durante la consegna del WebSocket/Push.

13) Anti-pattern

Suoni e popup a ogni evento.
Timer auto-close imprevedibili.
Ripetizione delle stesse notifiche.
Schermate senza motivo (conferma, riavvio).
Utilizzare le notifiche come marketing spam.
Centro senza filtri/ricerca con> 50 eventi.

14) Token di progettazione

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) Lista assegni QA

Funzionalità

• Real Time consegna 300 ms.
• Toast visualizza 100 ms dopo l'evento.
• Centro sincronizzato (read/unread).
• «Leggere tutto» in massa funziona.

UX

• Non più di 1 toast contemporaneamente.
• Il tempo di vita delle notifiche è ottimale (3-5 secondi).
• Le notifiche importanti rimangono prima dell'azione.
• Testo ≤ 3 righe, CTA uno.

A11y

• 'role = «status »/' aria-live' sono corretti.
• Navigazione freccia e Tav funziona.
• Contrasto dell'AA.

Performance

• Paginazione e lazy-load.
• Nessun freezer con> 100 notifiche.
• Compressione dei dati e rendering ritardato.

16) Documentazione in progettazione

Компоненты: `Toast`, `NotificationItem`, `NotificationCenter`, `BadgeIndicator`.
Gide: priorità di notifica, TTL, grouping, copiating.
Pattern: toast per eventi istantanei, banner per importanti, centro per la storia.
Do/Don't-gallery: «notifiche spumeggianti» vs «informazione tranquilla».

Breve riepilogo

Il centro di notifica non è solo un evento inbox, ma un'architettura di affidabilità e trasparenza. Le notifiche ben progettate fanno sentire il controllo, tutto ciò che è importante è stato consegnato, non manca niente, il rumore è soppresso. L'utente deve vedere la conferma di scommesse, pagamenti e stati senza essere distratto dal gioco.