Bildirim Merkezi ve Etkinlikler

1) Amaç

Bildirim merkezi, işlemlerin akışını bozmadan sistem ve kullanıcı arasında geri bildirim sağlar. Eşzamansız olayları (bahisler, işlemler, bonuslar, KYC durumları) yakalar ve bildirimleri görüntülemek, filtrelemek ve yönetmek için tek bir yer sağlar.

• Dikkat dağıtmadan bilgi verin.
• Öncelik, kopya değil.
• Uygun olan yerlerde eylemler yapın.

2) Bildirim türleri ve uygulamaları

3) Öncelikler ve önem düzeyleri

1. Kritik (hata, arıza, güvenlik) - hemen dikkat gerektirir (Modal/Banner).
2. Önemli (ödeme, bahis, nakit) - Bildirim merkezinde tost + giriş.
3. Bilgilendirme (haberler, bonuslar) - Rozet ve bant.
4. Sosyal (arkadaşlar, sohbetler, turnuvalar) - UI'yi engellemeyen gruplandırılmış bildirimler.

UX kuralı: "Ekran başına birden fazla aktif bildirim yok".

Daha fazlası varsa, birleştirin: "3 yeni etkinlik".

4) Bildirim merkezi mimarisi

4. 1 Olay kaynağı

Arka uç: Olay Veriyolu, Bildirim Servisi, UI.
Olaylar 'type', 'violence', 'context','tl ',' userId'şeklinde sınıflandırılır.
'Notification _ store'da saklanır (Redis + DB).

4. 2 İstemci akışı

WebSocket/SSE для gerçek zamanlı.
Yerel durum - 10-20 bildirimin tembel yüklenmesi.
Push API (mobil/tarayıcı) - isteğe bağlı, kullanıcı onayı ile.

4. 3 Veri modeli (örnek)

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 bileşenleri

5. 1 Simge ve rozet

Okunmamış ('≤ 99') sayısını gösterir.
Tıklandığında paneli/bildirim merkezini açar.
' aria-label =" Yeni bildirimler var"'; Sıfırda - 'aria-hidden =' true ''.

5. 2 Bildirim paneli

Kartların listesi: ikon - başlık - kısa metin - zaman - CTA.
Durum: yeni, okuma, teslim hatası, arşivden indirildi.
Tarihe göre grup: Bugün, Dün, Daha Önce.

5. 3 Bildirim kartı

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) Devletler ve eylemler

Yeni: renk/arka plan plakası ile vurgulanır.
Okunuşu: soluk; rozeti yok.
Hata: simge + Yeniden dene.
Sistem: silinmedi, sadece arşivlendi.

• Hızlıca kaydır (mobil) - sil/oku.
• Düğmeler: "Daha fazla", "Tekrar et", "Gizle".
• Kitlesel eylemler: Hepsini işaretle, hepsini temizle.

7) Görsel ilkeler

Bildirimde en fazla 3 satır metin.
Başlık kalın, 50 karaktere kadar.

• Başarı - yeşil/' accent-succcession '
• Hata - kırmızı/' accent-danger '
• Bilgi - mavi/' accent-info '
• Dikkat - turuncu/' aksan uyaran '
• AA ≥ kontrast, gölgeler minimumdur.
• Animasyonlar: Solma/slayt ≤ 160 ms, sürekli hareketler olmadan.

8) Zamanlamalar ve ekran

Tost: 3-5 saniye, havada bir duraklama ile.
Banner: Eylemden önce.
Rozet: Şimdiye kadar okunmamış olanlar var.
Gelen kutusu: TTL depolama (örneğin, 14-30 gün).
Ekran odağı kaybolduğunda otomatik olarak kapatın - dikkatlice (önemli durumları kaybetmeyin).

9) A11y ve klavye

Tost, 'role =' status '(veya hatalar için' alert ') değerine sahiptir.
Bildirim Merkezi - 'rol =' bölge ',' aria-label = 'Bildirim Merkezi'ile.
Ok gezinme ve Tab/Shift + Tab desteği.
VoiceOver: eklendiğinde yeni bildirimleri okuma ('aria-live =' kibar ').
Odak, göründüğünde "atlamaz" - sadece tost kritikse.

10) Performans

Tembel yükleme ve sayfalama (her biri 20-30).
Veri sıkıştırma ('gzip'/' br'), gruplama istekleri.
WebSocket yeniden bağlanma + geri kapanma.
Animasyonlar sadece 'transform/opacity' üzerinde.

11) iGaming Senaryoları

11. 1 Bahis ve cashout

"Bahis kabul edildi", "Katsayı değişti", "Cashout tamamlandı" - tost + bant kaydı.
Hata durumunda - tost "Yükleme başarısız oldu", Retry ile banner.

11. 2 Ödemeler

"Yenileme başarılı" - tost.
Proseste Çıktı - bant girişi, ETA ve Daha Fazla düğmesi.
PSP hatası - kırmızı tost + CTA Yeniden Deneme.

11. 3 Bonuslar ve promosyonlar

Ana ekranda banner: "Yeni Turnuva", "Para Yatırma Bonusu".
Bildirim merkezi tüm tanıtımların geçmişini saklar.
Pazarlama türlerinden gizleme/abonelikten çıkma yeteneği.

11. 4 KYC ve güvenlik

Doğrulama tamamlanana kadar kalıcı banner.
"KYC onaylandı" - yeşil tost + teyp arşivi.
"Belge süresi doldu" - bildirim + CTA güncellemesi.

12) Metrikler

TO bildirimleri (türüne göre).
İşten çıkarma oranı (işlem yapılmadan ne kadar kapatıldı).
Okunmamış sayım avg и okunma süresi.
Teslimat başarı oranı (gerçek zamanlı для).
Olay ve gösteri arasındaki gecikme (hedef ≤ 300 ms).
WebSocket/Push teslimatında hata/Yeniden deneme oranı.

13) Anti-desenler

Her etkinlikte sesler ve pop-up'lar.
Öngörülemeyen otomatik kapanma zamanlayıcıları.
Aynı bildirimleri tekrarlayın.
Sebepsiz ekran koruyucular ("confirm", "reboot").
Bildirimleri pazarlama spam'i olarak kullanmak.

14) Tasarım sistemi belirteçleri

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) KG kontrol listesi

İşlevsellik

• Gerçek zamanlı teslimat ≤ 300 ms.
• Tost olaydan sonra 100 ms ≤ görüntülenir.
• Merkez senkronize edilir (okunur/okunmaz).
• Kitle'her şeyi oku "çalışır.

UX

• Bir seferde en fazla 1 tost.
• Bildirim ömrü optimaldir (3-5 saniye).
• Önemli bildirimler beklemede.
• Metin ≤ 3 satır, CTA bir.

A11y

• 'role = "status"'/' aria-live' doğrudur.
• Ok ve Sekme navigasyon çalışır.
• AA ≥ kontrast.

Performans

• Pagination ve tembel-yük.
• > 100 bildirimde friz yok.
• Veri sıkıştırma ve gecikmeli oluşturma.

16) Tasarım sistemindeki belgeler

Компоненты: 'Tost', 'NotificationItem', 'NotificationCenter', 'BadgeIndicator'.
Kılavuzlar: bildirim öncelikleri, TTL, gruplama, metin yazarlığı.
Desenler: anlık olaylar için tost, önemli afiş, tarih merkezi.
Do/Don't gallery: "Spam bildirimleri" vs "sakin farkındalık".

Kısa Özet

Bildirim merkezi sadece bir etkinlik kutusu değil, bir güven ve şeffaflık mimarisidir. İyi tasarlanmış bildirimler bir kontrol hissi yaratır: önemli olan her şey teslim edilir, hiçbir şey kaybolmaz, gürültü bastırılır. Bu, iGaming için çok önemlidir - kullanıcının oyundan rahatsız edilmeden bahislerin, ödemelerin ve durumların onaylandığını görmesi önemlidir.