Каталарды дарылоо жана UX-түшүндүрмөлөр

1) Эмне үчүн маанилүү

• эмне болгонун жана андан ары эмне кылуу керектигин түшүндүрөт,
• маалыматтарды сактайт жана прогресстин жоголушуна жол бербейт,
• коопсуз кайталоо же альтернативалуу жол берет,
• жеткиликтүү бойдон калууда (SR/клавиатура) жана ашыкча ачып бербейт.

2) Ката типологиясы (интерфейс үчүн)

1. Маалыматтардын валидациясы (4xx client): бош/туура эмес талаалар, формат, узундугу, эрежелердин карама-каршылыгы.
2. Бизнес эрежелери: лимиттер, гео-чектөөлөр, KYC/KYB, эки, жеткиликтүү эмес Slots.
3. Укуктар/пермиссиялар: роль, ресурска жетүү, курактык чектөөлөр.
4. Тармак/сервер: таймаут, оффлайн, 5xx, ашыкча жүктөө, rate limit.
5. Чыр-чатактар/абалы: 409/412 (маалыматтар өзгөргөн), жарыш, бөгөт коюу.
6. Ресурстун жоктугу: 404/410, өчүрүлгөн/которулган.
7. Төлөм жана тобокелдик: банк/PSP тарабынан четтөө, антифрод, жоопкерчиликтүү оюндун лимиттери.

3) каналдар жана көрсөтүү деңгээл

Эреже: тостторго/hover сындуу жашырбаңыз. Колдонуучу көргөн жерде билдирүү бар.

4) Copyright каталар

түзүлүшү: себеби → натыйжасы → иш-аракет.
Тон: чынчыл, бейтарап, күнөөсү жок.
Конкреттүүлүк: талааны/шартты көрсөтүңүз, коддордон жана агымдардан качыңыз.
Аракет баскычы: "Кайталоо", "Картаны өзгөртүү", "Чыпкаларды ачуу", "Чатты ачуу".
Сезимтал маалыматтар: көрсөтпөө (PAN жашыруу, жеке атрибуттар).

Мисалдар

Жакшы: "Төлөм өткөн жок: банк операцияны четке какты. Башка ыкманы көрүңүз же кийинчерээк кайталаңыз".
Жаман: "Ката 500. Бир нерсе туура эмес болуп кетти".
Жакшы: "Күндөлүк чыгашалардын чеги жетти. Жаңы лимитти белгилеңиз же эртең аракет кылыңыз".
Жакшы: "Файл өтө чоң (макс. 25 MB). Бир нече файлдарды кысып же жүктөп алыңыз".

5) Жүрүм-турум жана фокус (A11y)

Ката фокустук контекстке чыгарылат: фокусту биринчи ката талаасына которобуз.
Тирүү аймактар: 'role = "status"' (polite) маалымат үчүн, 'role = "alert"' (assertive) - критикалык аймактар үчүн.
Көрүнгөн ': focus-visible', контраст ≥ AA, түстүү альтернатива (сөлөкөт/текст).
Билдирүү аркылуу талаага байлап 'aria-describedby'.

html
<label for = "pwd "> Password </label>
<input id="pwd" name="password" aria-describedby="pwd-err" aria-invalid="true">
<p id = "pwd-err" role = "alert"> Minimum 8 characters </p>

6) Retrais, backoff жана идемпотенттүүлүк

Эгерде ийгиликке мүмкүнчүлүк болсо, кайталоо сунушталат (тармактык каталар, 5xx, rate limit).
экспоненциалдуу backoff 1-2-4-8 с, аракет чеги, түшүнүктүү баскычы "кайталап".
Критикалык операциялар (коюмдар/төлөмдөр): милдеттүү Idempotency-Key → эки эсе.
Оптимисттик жаңыртуулардын артка кайтарылышы - так визуалдык кайтарым + түшүндүрмө.

js async function retry(fn, attempts=3){
let wait=1000; for(let i=0; i<attempts; i++){
try{ return await fn(); }catch(e){ if(i===attempts-1) throw e; await new Promise(r=>setTimeout(r,wait)); wait=2; }
}
}

7) Offline, убакыт жана жарым-жартылай мазмун

Оффлайн: "Байланыш жок" баннерин, кэшке кирүү мүмкүнчүлүгүн (read-only), синхрондоштуруу кезегин көрсөтөбүз.
Таймауттар: UI-таймаут (3-5 с) → "Тастыктоону күтөбүз" абалы... коопсуз кайталоо/жокко чыгаруу менен.
Жарым-жартылай ийгилик: колубуздан келгенди сактап калуу; "синхрондуу эмес" деп белгилейбиз.

8) Чыр-чатактар жана атаандаштык

409/412: маалыматтар эскирген. Сунуш "Update" жана diff көрсөтүү (эмне өзгөрдү).
Блоктор: блокту ким кармап турганын жана канча убакытка чейин "Кирүү суроо" баскычын билдиребиз.

9) UI үлгүлөрү

html
<div class="banner banner--error" role="alert">
<strong> Connection failed. </strong> Shows cached data.
<button class =" btn btn--ghost" id = "retry "> Retry </button>
</div>

html
<div role="alertdialog" aria-labelledby="err-title" aria-describedby="err-desc">
<h2 id = "err-title "> Session expired </h2>
<p id = "err-desc "> Sign in again to continue. </p>
<button class = "btn "> Sign in </button>
<button class =" btn btn--ghost"> Home </button>
</div>

tsx function Fallback({ id, onRetry }: { id: string; onRetry: ()=>void }) {
return (
<div role="alert" className="banner banner--error">
<strong> We couldn't load the page. </strong>
<div> Try again. Код: <code>{id}</code> <button onClick={()=>navigator. clipboard. writeText (id)}> Copy </button> </div>
<button onClick = {onRetry}> Retry </button>
</div>
);
}

10) Ката белгилер (дизайн системасы)

json
{
"error": {
"tones": { "danger": "#", "warning": "#", "info": "#" },
"aria": { "polite": true, "assertive": true },
"timing": { "toastMs": 3500, "retryBackoffMs": [1000,2000,4000] },
"layout": { "fieldGap": 8, "bannerIcon": 20 }
}
}

css
.banner--error { background: var(--bg-danger); color: var(--on-danger); padding: 12px 16px; border-radius: 12px; }
.field-error { color: var(--role-danger); margin-top: 6px; font-size:.875rem; }

11) Коопсуздук жана купуялык

Биз Stack Trades, ички ID, DD жолдорун алып келбейт.
Биз сезгич маанилерди (карталарды, документтерди) жашырабыз.
Билдирүүлөр чабуулчуга билдирбеши керек (мисалы, эсеп бар).
Колдоо үчүн - деталдардын ордуна ID корреляция.

json
{"level":"error","event":"payment_fail","correlation_id":"c-8f1...","user_id":"u-","route":"/pay","psp_code":"DO_NOT_EXPOSE_TO_USER"}

12) Метрика жана контролдоо

INP жана ката учурда Long Tasks үлүшү (ката "илип" UI болбошу керек).
Retry success rate, 1000 иш-аракеттер боюнча каталар, калыбына келтирүү үчүн убакыт.
CTR боюнча "Жардам/Чат", ыргытылган формалардын пайызы.
Жылуулук карталары: field-errors көп пайда болгон жерде.

13) QA-чек тизмеси

Жеткиликтүүлүк

• Биринчи ката талаасына басым; 'aria-describedby '/' aria-invalid' коюлган.
• Сын билдирүүлөр - 'role =' alert ''; контраст ≥ AA.

Жүрүм-туруму

• Бул формалар ката кетирилгенде жоголбойт.
• түшүнүктүү 'Retry' жана туура backoff бар.
• Offline/кэш иштеп жатат; көрөбүз.

Copyright

• Себеби → иш-аракет; эч кандай техникалык жаргон жана айыпсыз.
• Тексттер локализацияланат жана торду бузбайт.

Коопсуздук

• эч кандай PII/сырлар агып; Биз коопсуз коддорду/ID гана көрсөтөбүз.
• Idempotentity маанилүү иш үчүн киргизилген.

14) iGaming өзгөчөлүктөрү

• UI дароо 'busy' белгилейт; кечигүү менен> 3 с - "Биз ырастоо күтүп жатабыз"....
• Учурда: чынчыл статусу ("базар жабылды", "катышы өзгөрдү") + коопсуз 'Retry'.
• Кош коюмду жокко чыгаруу үчүн Idempotent ачкычы.

• "Банктын/PSP мүчүлүштүктөрүн" vs "сервердин иштебей калышын" айырмалайбыз. Биринчиси үчүн - "Башка жолду тандаңыз", экинчиси үчүн - 'Retry'.
• KYC/AML ачык кадамдар; шилтемелер "Эмне үчүн керек? ».

• Тон камкор, эч кандай басым. "Лимитке жетишилди - тыныгуу же лимитти жаңыртуу".
• Эч кандай жаркыраган/неон; AAA контраст, SR жеткиликтүүлүгү.

• Чектөөлөрдү так түшүндүрүп, "Эрежелер/колдоо менен таанышууну" сунуштаңыз.

15) Анти-үлгүлөрү

"Бир нерсе туура эмес" иш-аракеттер жана контексттин жок.
Катадан кийин форманы калыбына келтирүү.
Маанилүү тостту 3 секундага жашырыңыз.
Текст/сөлөкөтсүз гана түс.
жокко чыгаруу мүмкүнчүлүгү жок чексиз Retra.
Ички коддорду/стек-соодаларды көрсөтүү.

16) Дизайн системасында документтер

Компоненты: `FieldError`, `FormError`, `PageBanner`, `AlertDialog`, `ErrorBoundary`.
Тондун/контрасттын/таймингдин токендери, a11y прецеденттери жана ARIA мисалдары.
Текст үлгүлөрү менен типтүү сценарийлердин (валидация, тармак, укуктар, төлөмдөр) картасы.
"Do/Don 't": аткарбагандыгы/ийгилик көрсөткүчтөрү менен чейин/кийин реалдуу экрандар.

Кыскача резюме

Каталарды түшүнүктүү жана башкарылуучу кылыңыз: адам тилинде сүйлөңүз, киргизилген маалыматтарды сактаңыз, коопсуз кайталоону жана альтернативаларды сунуштаңыз, жеткиликтүүлүктү жана купуялуулукту сыйлаңыз. Анда өзгөчө жагдайлар да ишенимди сактап, колдонуучунун жолун үзгүлтүккө учуратпайт - өзгөчө коюмдардын жана төлөмдөрдүн критикалык сценарийлеринде.