Идоракунии хатогӣ ва шарҳҳои UX

1) Чаро ин муҳим аст

• мефаҳмонад, ки чӣ ҳодиса рӯй дод ва чӣ бояд кард,
• маълумоти воридшударо захира мекунад ва аз даст додани пешрафт пешгирӣ мекунад,
• такрори бехатар ё роҳи алтернативиро медиҳад,
• дастрас боқӣ мемонад (SR/клавиатура) ва аз ҳад зиёд ошкор намешавад.

2) Типологияи хато (барои интерфейс)

1. Тасдиқи маълумот (4xx муштарӣ): майдонҳои холӣ/беэътибор, формат, дарозӣ, ихтилофи қоидаҳо.
2. Қоидаҳои тиҷорат: маҳдудиятҳо, маҳдудиятҳои гео, KYC/KYB, нусхабардорӣ, ҷойҳои дастнорас.
3. Ҳуқуқҳо/иҷозатномаҳо: нақш, дастрасӣ ба манбаъ, маҳдудиятҳои синну сол.
4. Шабака/сервер: вақт, офлайн, 5xx, изофабор, меъёри маҳдудият.
5. Низоъҳо/ҳолат: 409/412 (маълумот тағир ёфт), нажодҳо, қуфлҳо.
6. Захира нест: 404/410, нест карда/интиқол дода шудааст.
7. Пардохт ва хавф: рад кардани бонк/PSP, зидди қаллобӣ, маҳдудиятҳои бозии масъул.

3) Каналҳо ва сатҳи намоиш

Қоида: Дар тост/hover муҳим пинҳон накунед. Дар он ҷое ки корбар тамошо мекунад, паёме ҳаст.

4) Хатогиҳои копирайтинг

Сохтор: сабаб → эффект → амал.
Оҳанг: ростқавл, бетараф, бегуноҳ.
Хусусиятҳо: майдон/ҳолатро муайян кунед, рамзҳо ва стекҳоро пешгирӣ кунед.
Тугма-амал: "Такрор", "Корти тағирёбанда", "Филтрҳои дубора", "Чати кушод".
Маълумоти ҳассос: нишон надиҳед (ниқоби PAN, хусусиятҳои шахсӣ).

Намунаҳо

Хуб: "Пардохт ноком шуд: бонк муомиларо рад кард. Усули дигарро санҷед ё баъдтар дубора санҷед.

Бад: "Хатогии 500. Чизе хато рафт"

Хуб: "Ҳадди хароҷоти ҳаррӯза расид. Лимити нав таъин кунед ё пагоҳ кӯшиш кунед"

Хуб: "Файл хеле калон аст (макс. 25 МБ). Лутфан, баъзе файлҳоро фишурда ё зеркашӣ кунед.

5) Рафтор ва фокус (A11y)

Хатогӣ дар заминаи фокус нишон дода мешавад: мо фокусро ба майдони хатогии аввал интиқол медиҳем.
Минтақаҳои зинда: 'нақш = "мақом" (хушмуомила) барои маълумот,' нақш = "ҳушдор" (тасдиқкунанда) барои интиқодӣ.
'Намоён': фокус намоён ', контраст ≥ АА, алтернативаҳо ба ранг (нишона/матн).
Мо паёмро ба майдон тавассути 'aria-descriptby' пайваст мекунем.

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) Retrai, backoff ва idempotency

Такрор пешниҳод карда мешавад, агар имкони муваффақият вуҷуд дошта бошад (нокомии шабака, 5xx, меъёри нарх).
Бозгашти экспоненсиалӣ 1-2-4-8 s, маҳдудияти кӯшишҳо, тугмаи фаҳмо "Такрор".
Амалиётҳои интиқодӣ (нархҳо/пардохтҳо): 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) Офлайн, танаффус ва мундариҷаи қисман

Офлайн: мо парчами "Пайвастшавӣ" -ро нишон медиҳем, дастрасӣ ба кэш (танҳо хондан), навбати синхронизатсия.
Вақтсанҷҳо: Танаффуси UI (3-5 сония) → ҳолати "Интизории тасдиқ"... бо такрори бехатар/бекоркунӣ.
Муваффақияти қисман: мо он чизеро, ки идора мекунем, нигоҳ медорем; аломати "ҳамоҳанг карда нашудааст".

8) Низоъҳо ва рақобатпазирӣ

409/412: маълумот кӯҳна. "Навсозӣ" -ро пешниҳод кунед ва 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) Амният ва махфият

Мо нишонаҳои анбора, шиносаҳои дохилӣ, роҳҳои асоси маълумотро намоиш намедиҳем.
Мо арзишҳои ҳассосро (харитаҳо, ҳуҷҷатҳо) ниқоб мекунем.
Паёмҳо набояд ба ҳамлагар муроҷиат кунанд (масалан, ҳисоб вуҷуд дорад).
Барои дастгирӣ - 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 ва ҳиссаи Вазифаҳои дароз дар вақти хатогӣ (хато набояд UI-ро "овезон" кунад).
Такрори сатҳи муваффақият, хатогиҳо ба 1000 амал, вақти барқароршавӣ.
CTR дар "Кӯмак/Чат", фоизи шаклҳо коҳиш ёфт.
Харитаҳои гармӣ: дар он ҷо хатогиҳои саҳроӣ зуд-зуд рух медиҳанд.

13) Рӯйхати назоратии QA

Мавҷудият

• Тамаркуз ба майдони аввалини беэътибор; маҷмӯи 'aria-describedby '/' aria-беэътибор'.
• Паёмҳои интиқодӣ - 'нақш = "ҳушдор"'; муқобил ≥ А.А.

Рафтор

• Маълумоти форма дар хатогӣ гум нашудааст.
• 'Retry' ва бозгашти дуруст мавҷуд аст.
• Ҳолати офлайнӣ/кэш; баннер бинед.

Нусхабардорӣ

• Сабаб → Амал; бе jargon техникӣ ва айбдоркуниҳо.
• Матнҳо локализатсия шудаанд ва шабакаро вайрон намекунанд.

Амният

• Ҳеҷ гуна ихроҷ/сирри PII; танҳо рамзҳои бехатар/ID-ро нишон диҳед.
• Идемпотенсия барои амалиёти муҳим фаъол аст.

14) Хусусиятҳои IGaming

• UI фавран "банд" -ро сабт мекунад; дар таъхир> 3 с - "Интизории тасдиқ"....
• Дар нокомӣ: вазъи софдилона ("бозор пӯшида", "коэффисиент тағир ёфтааст") + бехатар 'Retry'.
• Калиди Idempotent барои аз байн бурдани дархости дугона.

• Мо байни "нокомии бонк/PSP" vs "нокомии сервер фарқ мекунем. "Барои якум - "Усули дигарро интихоб кунед", барои дуюм - 'Retry '.
• Қадамҳои шаффофи KYC/AML; пайвандҳо "Чаро лозим аст? ».

• Оҳанг ғамхорӣ мекунад, фишор надорад. "Маҳдудият расид - таваққуф кунед ё маҳдудиятро нав кунед".
• Не авҷ/неон; Контрасти AAA, дастрасӣ дар SR.

• Маҳдудиятҳоро ба таври возеҳ шарҳ диҳед ва пешниҳод кунед, ки "Қоидаҳо/дастгирӣ хонед".

15) Анти-намунаҳо

"Чизе хато кард" бидуни амал ва контекст.
Пас аз хатогӣ шаклро барқарор мекунад.
Дар тост 3 сонияро пинҳон кунед.
Танҳо ранг бе матн/нишона.
Рафъи беохир бидуни имконияти бекоркунӣ.
Нишон додани рамзҳои дохилӣ/пайраҳаҳои анбора.

16) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ

Компоненты: 'Хатогии саҳроӣ', 'Формаи хато', 'Banner', 'Alert' Dialog ',' Хатогӣ '.
Аломатҳои оҳанг/контраст/вақт, намунаҳои a11y ва ARIA.
Харитаи сенарияҳои маъмулӣ (тасдиқкунӣ, шабака, ҳуқуқҳо, пардохтҳо) бо қолабҳои матнӣ.
"Иҷро кунед/накунед": экранҳои воқеӣ пеш/пас аз экран бо нишондиҳандаҳои нокомӣ/муваффақият.

Хулосаи мухтасар

Хатогиҳоро фаҳмо ва идорашаванда кунед: бо забони инсонӣ гап занед, маълумоти воридшударо сарфа кунед, такрори бехатар ва алтернативаҳоро пешниҳод кунед, дастрасӣ ва махфиятро эҳтиром кунед. Он гоҳ ҳатто ҳолатҳои фавқулодда эътимодро нигоҳ медоранд ва роҳи корбарро халалдор намекунанд - алахусус дар сенарияҳои муҳими гарав ва пардохт.