Centro de notificaciones y eventos

1) Asignación

El Centro de notificaciones proporciona retroalimentación entre el sistema y el usuario sin interrumpir el flujo de acción. Captura eventos asíncronos (apuestas, transacciones, bonos, estados KYC) y proporciona un único lugar para ver las notificaciones, filtrarlas y administrarlas.

• Informar sin distracción.
• Priorizar, no duplicar.
• Dar acciones donde sean apropiadas.

2) Tipos de notificaciones y su aplicación

3) Prioridades y niveles de importancia

1. Crítica (error, fallo, seguridad): requiere atención inmediata (Modal/Banner).
2. Important (pago, puja, cacheo) - Toast + escribir en el centro de notificaciones.
3. Información (noticias, bonos) - Badge y cinta.
4. Social (amigos, chats, torneos) son notificaciones agrupadas que no bloquean IU.

Regla UX: «No más de una notificación activa por pantalla».

Si hay más - combinar: «3 nuevos eventos».

4) Arquitectura del centro de notificaciones

4. 1 Origen de eventos

Backend → Event Bus → Notification Service → UI.
Los eventos están clasificados: 'type', 'severity', 'context',' ttl', 'userId'.
Se guardan en 'notification _ store' (Redis + DB).

4. 2 Flujo de cliente

WebSocket / SSE для real-time.
State local → lazy-cargar 10-20 notificaciones.
API de inserción (mobile/navegador) - opcional, con el consentimiento del usuario.

4. 3 Modelo de datos (ejemplo)

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

5. 1 Icono y badge

Muestra el número de no leídos ('≤ 99').
Al hacer clic, abre el panel/centro de notificaciones.
' aria-label =» Hay nuevas notificaciones»'; a cero -' aria-hidden =» true»'.

5. 2 Panel de notificación

Lista de tarjetas: icono → título → texto corto → tiempo de → CTA.
Estados: nuevo, leído, error de envío, cargado del archivo.
Agrupación por fecha: Hoy, Ayer, Antes.

5. 3 Tarjeta de notificación

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) Estados y acciones

Nuevo: resaltado con color/fondo.
Leído: más pálido; no tiene badge.
Error: icono + Retry.
Sistema: no se elimina, sólo se archiva.

• Swipe (mobile) → eliminar/leer.
• Botones: Más información, Repetir, Ocultar.
• Acciones masivas: Marcar todo lo leído, Limpiar todo.

7) Principios visuales

Máximo de 3 líneas de texto en la notificación.
El título está en negrita, hasta 50 caracteres.

• Éxito - verde/' accent-success'
• Error: rojo/' accent-danger '
• Información - azul/' accent-info '
• Atención - naranja/' accent-warning '
• Contraste ≥ AA, sombras mínimas.
• Animaciones: fade/slide ≤ 160 ms, sin movimientos constantes.

8) Tiempos de espera y visualización

Toast: 3-5 segundos, con una pausa con hover.
Banner: antes de la acción.
Badge: mientras que hay sin leer.
Inbox: almacenamiento por TTL (por ejemplo, 14-30 días).
Auto-cerrar cuando se pierde el foco de la pantalla - cuidado (no perder los estados importantes).

9) A11y y teclado

Toast tiene 'role =' status '(o' alert 'para errores).
El centro de notificaciones es 'role =' region '' s 'aria-label =' Centro de notificaciones '.
Compatibilidad con la navegación con flechas y Amb/Shift + Nat.
VoiceOver: lee nuevas notificaciones al agregar ('aria-live =' polite ').
El enfoque no «salta» cuando aparece - sólo si toast es crítico.

10) Rendimiento

Carga perezosa y paginación (20-30 cada uno).
Compresión de datos ('gzip '/' br'), agrupación de consultas.
WebSocket reconnection + backoff.
Las animaciones son sólo en 'transformación/opacity'.

11) Escenarios de iGaming

11. 1 Apuestas y efectivo

«Apuesta aceptada», «Factor cambiado», «Cashout completado» - toast + entrada en cinta.
En caso de error - toast «No se puede apostar», banner con Retry.

11. 2 Pagos

«Recarga con éxito» → toast.
«Salida en trámite» → la grabación en cinta, ETA y el botón «Leer más».
Error PSP → toast + CTA Retry rojo.

11. 3 Bonos y promociones

Banner en la pantalla principal: «Nuevo torneo», «Bono de depósito».
El Centro de notificaciones almacena el historial de todas las promociones.
Posibilidad de ocultar/darse de baja de los tipos de marketing.

11. 4 KYC y seguridad

Banner persistente hasta que se complete la verificación.
«KYC confirmado» → verde toast + archivo en la cinta.
«El documento ha caducado» → notificación + CTA actualizar.

12) Métricas

CTR de notificaciones (por tipo).
Disciss rate (cuántos se cerraron sin acción).
Unread count avg и time-to-read.
Delivery success rate (для realtime).
Latencia entre el evento y la proyección (objetivo ≤ 300 ms).
Error/Retry rate cuando se entrega WebSocket/Push.

13) Anti-patrones

Sonidos y ventanas emergentes en cada evento.
Temporizadores auto-cerrados impredecibles.
Repita las mismas notificaciones.
Captores de pantalla sin motivo («confirmar», «reiniciar»).
Uso de notificaciones como spam de marketing.
Centro sin filtros/búsqueda en> 50 eventos.

14) Tokens del sistema de diseño

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-check-list

Funcionalidad

• Entrega en tiempo real ≤ 300 ms.
• Toast se muestra ≤ 100 ms después del evento.
• El centro está sincronizado (read/unread).
• El «leer todo» masivo funciona.

UX

• No más de 1 toast al mismo tiempo.
• La vida útil de las notificaciones es óptima (3-5 segundos).
• Las notificaciones importantes permanecen hasta la acción.
• Texto ≤ 3 líneas, CTA una.

A11y

• 'role =' status '/' aria-live 'son correctos.
• La navegación con flechas y Amb funciona.
• Contraste ≥ AA.

Performance

• Paginación y lazy-load.
• No hay frisos en> 100 notificaciones.
• Compresión de datos y renderizado diferido.

16) Documentación en el sistema de diseño

Компоненты: `Toast`, `NotificationItem`, `NotificationCenter`, `BadgeIndicator`.
Gaidas: prioridades de notificaciones, TTL, grouping, redacción.
Patrones: toast para eventos instantáneos, banner para importantes, centro para la historia.
Do/Don 't-gallery: «notificaciones de spam» vs «información tranquila».

Resumen breve

El centro de notificaciones no es solo un «inbox» de eventos, sino una arquitectura de confianza y transparencia. Las notificaciones bien diseñadas crean una sensación de control: se entrega todo lo importante, no falta nada, el ruido está deprimido. Para iGaming, esto es crítico: es importante que el usuario vea la confirmación de apuestas, pagos y estados sin distraerse del juego.