Centro de notificações e eventos

1) Destino

O centro de notificações fornece feedback entre o sistema e o usuário sem perturbar o fluxo de ações. Ele registra eventos assincrônicos (apostas, transações, bônus, estatais KYC) e fornece um único local de visualização, filtragem e gerenciamento de notificações.

• Informar sem distrair.
• Priorizar, não duplicar.
• Agir onde for apropriado.

2) Tipos e aplicações de notificações

3) Prioridades e níveis de importância

1. Critical (erro, falha, segurança) - requer atenção imediata (Modal/Banner).
2. Important (pagamento, taxa, caixa) - Toast + entrada no centro de notificações.
3. Informational (notícias, bónus) - Badge e fita.
4. Social (amigos, bate-papos, torneios) - notificações agrupadas que não bloqueiam UI.

Regra UX: «Não há mais de uma notificação ativa para a tela».

Se tiverem mais, juntem-se «3 novos acontecimentos».

4) Arquitetura de centro de notificações

4. 1 Origem de eventos

Backend → Event Bus → Notification Service → UI.
Os eventos são classificados como "tipo", "severity", "context'," ttl "," userId ".
São salvas em 'notificação _ store' (Redis + DB).

4. 2 Fluxo de clientes

WebSocket / SSE для real-time.
Local state → reposição lazy de 10 a 20 notificações.
O Push API (mobile/navegador) é opcional, se o usuário concordar.

4. 3 Modelo de dados (exemplo)

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 Ícone e badge

Mostra o número de não lidos ('≤ 99').
O clique abre o painel/centro de notificações.
'aria-label =' Há novas notificações '; a zero, 'aria-hidden =' true '.

5. 2 Painel de notificação

Lista de cartões: ícone cabeçalho texto curto tempo CTA.
Estado novo, lido, erro de entrega, carregado do arquivo.
Esta noite, ontem, antes.

5. 3 Cartão de notificação

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 e ações

Novo: Destaque de cor/tinta de fundo.
Lido: mais pálido; não tem badge.
Erro: ícone + Retry.
Sistema: não é removido, apenas arquivado.

• Swipe (mobile) → remover/ler.
• Os botões «Mais», «Repetir», «Ocultar».
• Ações de massa: Comemorar tudo o que você leu, Limpar tudo.

7) Princípios visuais

No máximo, 3 linhas de texto na notificação.
O título é gordo, até 50 caracteres.

• Sucesso - verde/' accent-sucess '
• Erro - vermelho/' accent-danger '
• Informações - azul/' accent-info '
• Atenção - laranja/' accent-warning '
• Contraste AA, sombras mínimas.
• Animações: fade/slide ≤ 160 ms, sem movimentos constantes.

8) Timing e exibição

Toast: 3-5 segundos, com intervalo hover.
Banner: antes da ação.
Badge: até agora não lido.
Inbox: armazenamento por TTL (por exemplo, 14 a 30 dias).
Auto-close quando perde o foco da tela - cuidado (não perder estatais importantes).

9) A11y e teclado

Toast tem 'role =' status '(ou' alert 'para erros).
O centro de notificação é 'role =' region's 'aria-label =' Centro de notificação '.
Suporte de navegação com setas e Tab/Shift + Tab.
VoiceOver: leitura de novas notificações quando adicionada («aria-live =» polite «»).
O foco não salta quando aparece - apenas se o toast for crítico.

10) Desempenho

Carregamento preguiçoso e paginação (20-30).
Compactação de dados ('gzip '/' br'), agrupamento de solicitações.
WebSocket reconnection + backoff.
Apenas animações em 'trans/opacity'.

11) Cenários de iGaming

11. 1 Apostas e cachê

«Taxa aceita», «Coeficiente alterado», «Cachê concluído» - toast + entrada na fita.
Erro: toast «Não foi possível colocar», banner com Retry.

11. 2 Pagamentos

«Reabastecimento com sucesso» → toast.
«Saída em processamento» → entrada em fita, ETA e botão «Mais informações».
Erro PSP → vermelho toast + CTA Retry.

11. 3 Bónus e promoções

Banner na tela principal: «Novo torneio», «Bónus de depósito».
O Centro de Notificações armazena o histórico de todas as promoções.
Possibilidade de ocultar/rejeitar tipos de marketing.

11. 4 KYC e segurança

Persent banner até que a verificação seja concluída.
«KYC confirmado» → toast verde + arquivo na fita.
O documento expirou → notificação + CTA atualizar.

12) Métricas

Notificações CTR (por tipo).
Dismiss rate (quanto encerrado sem efeito).
Unread count avg и time-to-read.
Delivery success rate (для realtime).
Latency entre o evento e a exibição (meta ≤ 300 ms).
Erro/Retry rate na entrega de WebSocket/Push.

13) Anti-pattern

Sons e pop-up a cada evento.
Temporizadores imprevisíveis auto-close.
Repetição das mesmas notificações.
Capturas de tela sem motivo («confirmar», «reiniciar»).
Usar as notificações como marketing spam.
Centro sem filtros/busca com> 50 eventos.

14) Sistema de design de 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-folha de cheque

Funcionalidade

• Real time entrega ≤ 300 ms.
• Toast é exibido ≤ 100 ms após o evento.
• Centro sincronizado (read/unread).
• «Ler tudo» em massa funciona.

UX

• No máximo 1 toast ao mesmo tempo.
• O tempo de vida das notificações é ideal (3 a 5 segundos).
• As notificações importantes permanecem até a validade.
• Texto ≤ 3 linhas, CTA um.

A11y

• 'role =' status '/' aria-live 'são corretos.
• As setas de navegação e o Tab estão funcionando.
• Contraste ≥ AA.

Performance

• Paginação e lazy-load.
• Sem freezers com> 100 notificações.
• Compactação de dados e renderização adiada.

16) Documentação em design

Компоненты: `Toast`, `NotificationItem`, `NotificationCenter`, `BadgeIndicator`.
Guedes: prioridades de notificação, TTL, grouping, copiatagem.
Pattern: toast para eventos instantâneos, banner para importantes, centro de história.
Do/Don 't galeria: «notificações espumantes» vs «informação tranquila».

Resumo curto

O centro de notificação não é apenas um evento «inbox», mas uma arquitetura de confiança e transparência. As notificações bem projetadas dão uma sensação de controle, tudo o que é importante foi entregue, nada faltou, o barulho foi suprimido. Para iGaming, é crucial que o usuário veja a confirmação de apostas, pagamentos e estatais sem se distrair do jogo.