Centrul de notificare și evenimente

1) Scop

Centrul de notificare oferă feedback între sistem și utilizator, fără a perturba fluxul de acțiuni. Acesta surprinde evenimente asincrone (pariuri, tranzacții, bonusuri, statusuri KYC) și oferă un singur loc pentru a vizualiza notificări, filtra și de a le gestiona.

• Informaţi-vă fără să distrageţi atenţia.
• Prioritizaţi, nu duplicaţi.
• Da acțiuni în cazul în care acestea sunt adecvate.

2) Tipuri de notificări și aplicarea lor

3) Priorități și niveluri de importanță

1. Critic (eroare, eșec, securitate) - necesită atenție imediat (Modal/Banner).
2. Important (plată, pariu, cashout) - Toast + intrare în centrul de notificare.
3. Informațional (știri, bonusuri) - Insignă și bandă.
4. Social (prieteni, chat-uri, turnee) - notificări grupate care nu blochează UI.

Regula UX: „Nu mai mult de o notificare activă pe ecran”.

Dacă există mai multe dintre ele, combinați: „3 evenimente noi”.

4) Arhitectura centrului de notificare

4. 1 Sursa evenimentului

Backend → Event Bus → Serviciul de notificare → UI.
Evenimentele sunt clasificate: „tip”, „severitate”, „context”, „ttl',” userId'.
Stocat în 'notification _ store' (Redis + DB).

4. 2 Fluxul clientului

WebSocket/SSE для în timp real.
Statul local → încărcare leneș de notificări 10-20.
Apăsați API (mobil/browser) - opțional, cu consimțământul utilizatorului.

4. 3 Modelul de date (exemplu)

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 componente

5. 1 Icoană și insignă

Arată numărul de necitite („≤ 99”).
Când faceţi clic, se deschide panoul/centrul de notificare.
„eticheta de” aria „=” Există noi notificări „”; la zero -' aria-ascuns =” adevărat”'.

5. 2 Panoul de notificare

Lista de carduri: pictograma rubrica scurt text timp CTA.
Stare: nou, citit, eroare de livrare, descărcat din arhivă.
Grup după dată: Astăzi, Ieri, Mai devreme.

5. 3 Card de notificare

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) Statele și acțiunile

Nou: evidențiat cu placă de culoare/fundal.
Citește: paler; nu are insignă.
Eroare: pictogramă + Retry.
Sistem: nu este șters, numai arhivat.

• Glisați (mobil) → ștergeți/citiți.
• Butoane: „Mai mult”, „Repetă”, „Ascunde”.
• Acțiuni în masă: Mark All Read, Clear All.

7) Principii vizuale

Maxim 3 linii de text în notificare.
Titlul este îndrăzneț, până la 50 de caractere.

• Succes - verde/' accent-succession '
• Eroare - roșu/„ accent-pericol ”
• Info - albastru/' accent-info '
• Atenție - portocaliu/' accent-warning '
• Contrast ≥ AA, umbrele sunt minime.
• Animatii: decolorare/alunecare ≤ 160 ms, fara miscari constante.

8) Temporizări și afișare

Pâine prăjită: 3-5 secunde, cu o pauză la hover.
Banner: înainte de acţiune.
Insigna: există cele necitite până acum.
Inbox: stocare TTL (de exemplu, 14-30 zile).
Închideți automat atunci când focalizarea ecranului este pierdută - cu atenție (nu pierdeți stări importante).

9) A11y și tastatură

Toast has a 'role = „status” (sau „alert” pentru erori).
Notification Center - 'rol =' regiune 'cu' aria-label = 'Notification Center' '.
Suport pentru navigarea săgeată și Tab/Shift + Tab.
VoiceOver: citirea notificărilor noi atunci când sunt adăugate ('aria-live =' politicos '').
Focus nu „sari” atunci când apare - numai în cazul în care pâinea prăjită este critică.

10) Performanță

Încărcare și paginare leneș (20-30 fiecare).
Compresia datelor („gzip ”/„ br”), cereri de grupare.
WebSocket reconectare + backoff.
Animaţii numai pe 'transformare/opacitate'.

11) Scenarii iGaming

11. 1 Pariuri și încasări

„Bet acceptate”, „Coeficient schimbat”, „Cashout completat” - toast + înregistrare bandă.
În caz de eroare - toast „Nu a reușit să instaleze”, banner cu Retry.

11. 2 Plăți

„Reaprovizionarea de succes” → pâine prăjită.
Ieșire în Procesul → intrare bandă, ETA, și mai mult buton.
Eroare PSP → pâine prăjită roșie + CTA Retry.

11. 3 Bonusuri și promoții

Banner pe ecranul de start: „Turneu nou”, „Bonus de depozit”.
Centrul de notificare stochează istoria tuturor promo-urilor.
Abilitatea de a ascunde/dezabona de la tipurile de marketing.

11. 4 KYC și siguranță

Banner persistent până când verificarea este completă.
„KYC confirmat” → verde pâine prăjită + arhivă în bandă.
„Document expirat” → notificare + actualizare CTA.

12) Măsurători

Notificări CTR (după tip).
Rata de concediere (cât de mult a fost închis fără acțiune).
Număr necitit medie и timp de citit.
Rata de succes de livrare (для în timp real).
Latență între eveniment și spectacol (țintă ≤ 300 ms).
Eroare/Retry rata de livrare WebSocket/Push.

13) Anti-modele

Sunete și pop-up-uri la fiecare eveniment.
Cronometre imprevizibile.
Repetați aceleași notificări.
Screensavere fără cauză („confirma”, „reporni”).
Utilizarea notificărilor ca spam de marketing.
Centru nefiltrat/căutat la> 50 evenimente.

14) Jetoane pentru sistem de proiectare

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 de verificare QA

Funcționalitate

• Livrare în timp real ≤ 300 ms.
• Pâinea prăjită este afișată ≤ 100 ms după eveniment.
• Centrul este sincronizat (citit/necitit).
• Masa „citi totul” funcționează.

UX

• Nu mai mult de 1 pâine prăjită la un moment dat.
• Durata de viață a notificării este optimă (3-5 secunde).
• Notificările importante rămân în așteptare.
• Text ≤ 3 linii, CTA unu.

A11y

• 'rol =' status ''/' aria-live' sunt corecte.
• Arrow și Tab de navigare funcționează.
• Contrast ≥ AA.

Performanță

• Pagination și leneș-sarcină.
• Nu frize la> 100 notificări.
• Comprimarea datelor și redarea întârziată.

16) Documentația în sistemul de proiectare

Компоненты: 'Toast', 'NotificationItem', 'NotificationCenter', 'BadgeIndicator'.
Ghiduri: priorități de notificare, TTL, grupare, copywriting.
Modele: toast pentru evenimente instant, banner pentru important, centru pentru istorie.
Do/Don' t gallery: „spam notifications” vs „calm awareness”.

Scurt rezumat

Centrul de notificare nu este doar un inbox de evenimente, ci o arhitectură de încredere și transparență. Notificările bine concepute creează un sentiment de control: tot ce este important este livrat, nimic nu este pierdut, zgomotul este suprimat. Acest lucru este esențial pentru iGaming - este important ca utilizatorul să vadă confirmarea pariurilor, plăților și statusurilor fără a fi distras de la joc.