Xabar berish va tadbir markazi

1) Vazifasi

Xabarnomalar markazi harakat oqimini buzmagan holda tizim va foydalanuvchi o’rtasida qayta aloqani ta’minlaydi. U asinxron hodisalarni (stavkalar, tranzaksiyalar, bonuslar, KYC maqomlari) qayd etadi va xabarnomalarni koʻrish, filtrlash va boshqarish uchun yagona joy beradi.

• Chalg’itmasdan xabardor qilish.
• Takrorlash emas, ustuvorlik qilish.
• Kerakli joylarda harakat qilish.

2) Bildirishnomalar turlari va ularni qo’llash

3) Ustuvorliklar va ahamiyat darajalari

1. Critical (xato, nosozlik, xavfsizlik) - darhol e’tiborni talab qiladi (Modal/Banner).
2. Important (to’lov, stavka, keshaut) - Toast + xabarnomalar markaziga yozish.
3. Informational (yangiliklar, bonuslar) - Badge va lenta.
4. Social (do’stlar, chatlar, turnirlar) - UIni to’sib qo’ymaydigan guruhlangan xabarnomalar.

UX qoidasi: «Ekranga bittadan ko’p bo’lmagan faol xabarnoma».

Agar ular koʻp boʻlsa, «3 ta yangi voqea» ni birlashtiring.

4) Bildirishnomalar markazi arxitekturasi

4. 1 Voqealar manbai

Backend → Event Bus → Notification Service → UI.
Hodisalar tasniflanadi:’type’,’severity’,’context’,’ttl’,’userId’.
’notification _ store’ (Redis + DB) da saqlanadi.

4. 2 Mijozlar oqimi

WebSocket / SSE для real-time.
Lokal state → lazy-yuklash 10-20 ta bildirishnoma.
Push API (mobayl/brauzer) - foydalanuvchining roziligi bilan ixtiyoriy.

4. 3 Ma’lumotlar modeli (misol)

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-komponentlar

5. 1 Belgi va badge

Oʻqilmagan sonni koʻrsatadi (’99’≤).
Bosilganda xabarnomalar paneli/markazi ochiladi.
’ aria-label =» Yangi xabarnomalar mavjud»’; nol -’aria-hidden = "true’.

5. 2 Ogohlantirish paneli

Kartochkalar roʻyxati: ikona → sarlavha → qisqa matn → vaqt → CTA.
Holatlar: yangi, oʻqilgan, yetkazib berish xatosi, arxivdan yuklangan.
Sana boʻyicha guruhlash: Bugun, Kecha, Oldin.

5. 3 Bildirishnoma kartochkasi

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) Holatlar va harakatlar

Yangi: rang/fon ploshkasi bilan tanlangan.
Oʻqilgan: och; badge mavjud emas.
Xato: + Retry piktogrammasi.
Tizimli: oʻchirilmaydi, faqat arxivlanadi.

• Swipe (mobil) → oʻchirish/oʻqish.
• Tugmalar: «Batafsil», «Takrorlash», «Yashirish».
• Ommaviy harakatlar: Hammasini oʻqilgan holda belgilash, Hammasini tozalash.

7) Vizual prinsiplar

Xabarnomada ko’pi bilan 3 satr.
Sarlavha qalin, 50 tagacha.

• Muvaffaqiyat - yashil/’ accent-success ’
• Xato - qizil/’ accent-danger ’
• Maʼlumot - koʻk/’ accent-info ’
• Diqqat - toʻq sariq/’ accent-warning ’
• Kontrast ≥ AA, soyalar minimal.
• Animatsiyalar: fade/slide ≤ 160 ms, doimiy harakatsiz.

8) Tayminglar va ko’rsatish

Toast: 3-5 sek.
Banner: amalgacha.
Badge: hali oʻqilmagan.
Inbox: TTL bo’yicha saqlash (masalan, 14-30 kun).
Auto-close ekranning diqqatini yoʻqotganda - ehtiyot boʻling (muhim maqomlarni yoʻqotmang).

9) A11y va klaviatura

Toast’role = «status»’ga ega (yoki xatolar uchun’alert’).
Xabarnomalar markazi -’role = «region»’s’aria-label =» Xabarnomalar markazi»’.
Oʻqlar va Tab/Shift + Tab yordamida navigatsiyani qoʻllab-quvvatlash.
VoiceOver: yangi xabarnomalarni oʻqish (’aria-live = «polite»’).
Fokus paydo boʻlganda «sakramaydi» - faqat toast tanqidiy boʻlsa.

10) Unumdorlik

Dangasa yuklash va paginatsiya (20-30 dan).
Maʼlumotlarni siqish (’gzip ’/’ br’), soʻrovlarni guruhlash.
WebSocket reconnection + backoff.
Faqat’transform/opacity’dagi animatsiyalar.

11) iGaming stsenariylari

11. 1 Stavkalar va keshaut

«Stavka qabul qilindi», «Koeffitsiyent o’zgardi», «Keshaut bajarildi» - toast + lentaga yozuv.
Xato boʻlganda - «Qoʻyib boʻlmadi» toast, Retry bilan banner.

11. 2 To’lovlar

«Toʻldirish muvaffaqiyatli» → toast.
«Ishlov berish» → lentadagi yozuv, ETA va «Tafsilotlar» tugmasi.
PSP xatosi → qizil toast + CTA Retry.

11. 3 Bonuslar va aksiyalar

Banner bosh ekranda: «Yangi turnir», «Depozit uchun bonus».
Xabarnomalar markazi barcha reklama tarixini saqlaydi.
Marketing turlarini yashirish/obunani bekor qilish imkoniyati.

11. 4 KYC va xavfsizlik

Persistent banner tekshirish tugaguniga qadar.
«KYC tasdiqlangan» → yashil toast + lentadagi arxiv.
Hujjatning amal qilish muddati tugadi → xabarnoma + CTA yangilansin.

12) Metrika

xabarnomalar CTR (turlari bo’yicha).
Dismiss rate (qancha ishlamay yopilgan).
Unread count avg и time-to-read.
Delivery success rate (для realtime).
Tadbir va namoyish orasidagi latency (maqsad ≤ 300 ms).
WebSocket/Push yetkazib berishda Error/Retry rate.

13) Anti-patternlar

Har bir hodisada tovushlar va ochiladigan oynalar.
Oldindan aytib bo’lmaydigan auto-close taymerlar.
Bir xil xabarlarni takrorlash.
Hech qanday sababsiz skrinblokerlar («tasdiqlang», «qayta yuklang»).
Xabarnomalardan marketing spam sifatida foydalanish.
Filtersiz/Qidirilmagan markaz> 50 hodisada.

14) Dizayn-tizim tokenlari

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-chek-varag’i

Funksionalligi

• Real-taym yetkazib berish ≤ 300 ms.
• Toast voqeadan keyin 100 ms ≤ koʻrsatiladi.
• Markaz sinxronlashtirilgan (read/unread).
• Ommaviy «hamma narsani o’qish» ishlaydi.

UX

• Bir vaqtning oʻzida kamida 1 toast.
• Xabarnomalarning umr ko’rish vaqti optimal (3-5 sek).
• Muhim xabarnomalar amal qilgunga qadar qoladi.
• Matn ≤ 3 satr, CTA bir.

A11y

• ’role = «status» ’/’ aria-live’toʻgʻri.
• O’q va Tab navigatsiyasi ishlaydi.
• Kontrast ≥ AA.

Spektakl

• Paginatsiya va lazy-load.
• > 100 xabarnomada friz yoʻq.
• Siqish va kechiktirilgan rendering.

16) Dizayn-tizimdagi hujjatlar

Компоненты: `Toast`, `NotificationItem`, `NotificationCenter`, `BadgeIndicator`.
Gaydlar: xabarnoma ustuvorliklari, TTL, grouping, nusxa ko’chirish.
Patternlar: tezkor voqealar uchun toast, muhim voqealar uchun banner, tarix uchun markaz.
Do/Don’t-galereyasi: «ogohlantiruvchi xabarnomalar» vs «xotirjam xabardorlik».

Qisqacha xulosa

Xabarnomalar markazi - bu shunchaki voqealar «inbox» emas, balki ishonch va shaffoflik arxitekturasi. Yaxshi ishlab chiqilgan bildirishnomalar nazorat qilish hissi tug’diradi: barcha muhim narsalar yetkazib berildi, hech narsa yo’qolmadi, shovqin bostirildi. iGaming uchun bu juda muhim - foydalanuvchi o’yindan chalg’itmasdan stavkalar, to’lovlar va maqomlarni tasdiqlashni ko’rishi muhim.