Хабарландыру және оқиға орталығы

1) Мақсаты

Хабарламалар орталығы әрекет ағынын бұзбай жүйе мен пайдаланушы арасындағы кері байланысты қамтамасыз етеді. Ол асинхронды оқиғаларды (мөлшерлемелерді, транзакцияларды, бонустарды, KYC мәртебелерін) тіркейді және хабарламаларды қарау, оларды сүзу және басқару бірыңғай орнын ұсынады.

• Алаңдатпай хабарлау.
• Қайталау емес, басымдық беру.
• Тиісті жерде әрекет ету.

2) Хабарламалардың түрлері және оларды қолдану

3) Басымдықтар және маңыздылық деңгейлері

1. Critical (қате, жаңылыс, қауіпсіздік) - бірден назар аударуды талап етеді (Modal/Banner).
2. Important (төлем, мөлшерлеме, кэшаут) - Toast + хабарламалар орталығына жазылу.
3. Informational (жаңалықтар, бонустар) - Badge және лента.
4. Social (достар, чаттар, турнирлер) - UI-ге бөгет жасамайтын топтастырылған хабарламалар.

UX ережесі: «Экранға бір белсенді хабарламадан артық емес».

Егер олар көп болса, «3 жаңа оқиғаны» біріктіріңіз.

4) Хабарлама орталығының сәулеті

4. 1 Оқиға көзі

Backend → Event Bus → Notification Service → UI.
Оқиғалар жіктеледі: 'type', 'severity', 'context', 'ttl', 'userId'.
'notification _ store' (Redis + DB) ішінде сақталады.

4. 2 Клиенттік ағын

WebSocket / SSE для real-time.
Жергілікті state → lazy-жүктеу 10-20 хабарламалар.
Push API (мобайл/браузер) - пайдаланушының келісімі бойынша опциондық.

4. 3 Деректер моделі (мысал)

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-компоненттері

5. 1 Белгішесі және badge

Оқылмаған ('≤ 99') санын көрсетеді.
Басқан кезде хабарландыру тақтасы/орталығы ашылады.
' aria-label =» Жаңа хабарландырулар бар»'; нөлде -' aria-hidden =» true»'.

5. 2 Хабарландыру тақтасы

Карточкалар тізімі: иконка → тақырып → қысқа мәтін → уақыт → CTA.
Күйі: жаңа, оқылған, жеткізу қатесі, архивтен қотарылған.
Күні бойынша топтау: Бүгін, Кеше, Бұрын.

5. 3 Хабарлама карточкасы

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) Жай-күйлер мен әрекеттер

Жаңа: өң/түс белгісімен таңдалған.
Оқылған: бозғылт; badge жоқ.
Қате: + Retry белгішесі.
Жүйелік: жойылмайды, тек мұрағатталады.

• Swipe (мобайл) → өшіру/оқу.
• «Толығырақ», «Қайталау», «Жасыру» түймешіктері.
• Жаппай әрекеттер: Барлығын оқылған деп белгілеу, Барлығын тазалау.

7) Көрнекі қағидаттар

Хабарламадағы мәтіннің ең көп дегенде 3 жолы.
Тақырыбы қалың, 50 символға дейін.

• Табысқа жету - жасыл/' accent-success '
• Қате - қызыл/' accent-danger '
• Ақпарат - көк/' accent-info '
• Назар аударыңыз - қызғылт/' accent-warning '
• Контраст ≥ AA, көлеңкелер аз.
• Анимациялар: fade/slide ≤ 160 мс, тұрақты қозғалыссыз.

8) Таймингтер және көрсету

Toast: 3-5 сек, hover кезінде үзіліспен.
Баннер: әрекетіне дейін.
Белгі: әлі оқылмаған.
Inbox: TTL бойынша сақтау (мысалы, 14-30 күн).
Экран фокусын жоғалтқан кезде Auto-close - абайлаңыз (маңызды мәртебелерді жоғалтпаңыз).

9) A11y және пернетақта

Toast 'role = «status»' (немесе қателер үшін 'alert') бар.
Хабарламалар орталығы - 'role = «region»' c' aria-label =» Хабарламалар орталығы»'.
Сілтемелер мен Tab/Shift + Tab навигациясын қолдау.
VoiceOver: қосу кезінде жаңа ескертулерді оқу ('aria-live = «polite»').
Фокус пайда болғанда «секірмейді» - тек toast сыни болғанда ғана.

10) Өнімділік

Жалқау тиеу және пагинация (20-30).
Деректерді қысу ('gzip '/' br'), сұраулар топтамасы.
WebSocket reconnection + backoff.
Тек 'transform/opacity' бағдарламасындағы анимациялар.

11) iGaming сценарийлері

11. 1 Ставкалар мен кэшаут

«Мөлшерлеме қабылданды», «Коэффициент өзгерді», «Кэшаут орындалды» - toast + таспаға жазба.
Қате кезінде - «Орнату мүмкін болмады» toast, Retry баннері.

11. 2 Төлемдер

«Сәтті толықтыру» → toast.
«Өңдеуде шығару» → таспаға жазу, ETA және «Толығырақ» түймешігі.
PSP қатесі → қызыл toast + CTA Retry.

11. 3 Бонустар мен акциялар

Баннер басты экранда: «Жаңа турнир», «Депозит үшін бонус».
Хабарландыру орталығы барлық промо тарихты сақтайды.
Маркетингтік типтерден жасыру/жазылудан бас тарту мүмкіндігі.

11. 4 KYC және қауіпсіздік

Тексеру аяқталғанға дейін Persistent banner.
«KYC расталды» → жасыл toast + таспадағы мұрағат.
«Құжаттың мерзімі аяқталды» → хабарлама + CTA жаңартылсын.

12) Метрика

CTR хабарламалар (түрлері бойынша).
Dismiss rate (қаншасы әрекетсіз жабылды).
Unread count avg и time-to-read.
Delivery success rate (для realtime).
Оқиға мен көрсету арасындағы Latency (мақсаты ≤ 300 мс).
WebSocket/Push.

13) Қарсы үлгілер

Әрбір оқиға кезіндегі дыбыстар мен қалқымалы терезелер.
Күтпеген auto-close таймерлері.
Бір хабарландыруды қайталау.
Себепсіз скринблокерлер («растаңыз», «қайта жүктеңіз»).
Хабарламаларды маркетинг-спам ретінде пайдалану.

14) Дизайн-жүйе токендері

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-чек парағы

Функционалдық

• Real-time жеткізу ≤ 300 мс.
• Toast оқиғадан кейін 100 мс ≤ көрсетіледі.
• Орталық үндестірілген (read/unread).
• Жаппай «бәрін оқу» жұмыс істейді.

UX

• Бір уақытта 1 toast артық емес.
• Хабарламалардың өмір сүру уақыты оңтайлы (3-5 сек).
• Маңызды хабарламалар әрекетке дейін қалады.
• Мәтін ≤ 3 жол, CTA бір.

A11y

• 'role = «status» '/' aria-live' дұрыс.
• Бағыттамалар мен Tab навигациясы жұмыс істейді.
• Контраст ≥ AA.

Көрініс

• Пагинация және lazy-load.
• > 100 хабарландыруларда фриздер жоқ.
• Деректерді қысу және кейінге қалдырылған рендеринг.

16) Дизайн-жүйедегі құжаттама

Компоненты: `Toast`, `NotificationItem`, `NotificationCenter`, `BadgeIndicator`.
Гайды: хабарламалардың басымдықтары, TTL, grouping, копирайтинг.
Үлгілер: жедел оқиғалар үшін toast, маңызды оқиғалар үшін баннер, тарих орталығы.
Do/Don 't-галереясы: «ескерту хабарламалары» vs «тыныш хабардар болу».

Қысқаша түйіндеме

Хабарландыру орталығы - бұл жай ғана оқиғалардың «инбоксы» емес, сенімділік пен ашықтық архитектурасы. Жақсы жобаланған хабарламалар бақылау сезімін тудырады: барлық маңызды нәрсе жеткізілді, ештеңе жоғалған жоқ, шу басылды. iGaming үшін бұл өте маңызды - пайдаланушы үшін ойыннан алшақтамай, мөлшерлемелерді, төлемдерді және мәртебелерді растауды көру маңызды.