Սխալների մշակումը և UX բացատրությունները

1) Ինչո՞ ւ է դա կարևոր

Սխալը «կարմիր տեքստը» չէ, այլ սցենարի շարունակությունը։ Լավ UX սխալներ

բացատրում է, թե ինչ պատահեց և ինչ անել հաջորդը,

պահպանում է ներկայացված տվյալները և կանխում առաջընթացի կորցումը,

տալիս է անվտանգ խոհարար կամ այլընտրանքային ճանապարհ,

մնում է մատչելի (SR/ստեղնաշար) և չի բացահայտում ավելորդ։

2) Սխալների տիոգիա (ինտերֆեյսի համար)

1. Տվյալների վալիդացիան (4xx client) 'դատարկ/սխալ դաշտեր, ձևաչափը, երկարությունը, կանոնների հակամարտությունը։

2. Բիզնես կանոնները 'լիմիտներ, գեո սահմանափակումներ, KYC/KYB, դուբլի, անհասանելի արցունքներ։

3. Իրավունքները/պարկերը 'դերը, ռեսուրսների հասանելիությունը, տարիքային սահմանափակումները։

4. Ցանցը/սերվերը ՝ թայմաութ, օֆլայն, 5xx, ծանրաբեռնվածություն, rate limit։

5. Կոնֆլիկտներ/վիճակ ՝ 407/412 (տվյալները փոխվել են), մրցավազքը, արգելափակումը։

6. Ռեսուրսի բացակայությունը '404/410, հեռացվել/տեղափոխվել է։

7. Հիբրիդային և ռիսկային 'բանկի/PBS շեղումը, հակաֆրոդը, պատասխանատու խաղի սահմանները։

3) Ալիքները և ցուցադրման մակարդակը

Վերցնենք «բարձրաձայն» ենթատեքստում

Ջրանցք	Ե՞ րբ	Օրինակ
International դաշտի	Վալիդացիա/հուշում	«Առնվազն 8 նիշ»
Բլոկի/ձևի տակ	Պատահականության սխալ	"Չհաջողվեց պահպանել։ Փորձեք ևս մեկ անգամ"։
Tost (role = status)	Անխորտակելի իրադարձություններ	«Ֆայլը բեռնված է սխալներով, ներքևի մանրամասները»
Banner էջում	Կարևոր, բայց ոչ թե արգելափակում է միգրացիան	"Offline. Ցույց են տալիս քեշացված տվյալները"
Մոդալկա (role = alertdialog)	Արգելափակող ռիսկային քայլեր	"Նստաշրջանն ավարտվեց։ Նորից կռվեք"
Սխալի էջ	404/5xx, կրիտիկական անկումներ	«Էջը չի հայտնաբերվել »/« Ներեցեք, ձախողեք մեր կողմում»

Կանոն 'մի թաքցրեք քննադատությունը տոստերում/hover-ում։ Այնտեղ, որտեղ օգտագործողը նայում է, այնտեղ հաղորդագրություն կա։

4) Սխալների կոպիրայթինգը

Կառուցվածքը 'պատճառն այն է, որ կատարվում է հետազոտությունը։

Թոն 'ազնիվ, չեզոք, առանց մեղքի։

Նշեք դաշտը/պայմանը, խուսափեք փաթեթներից և ապակիներից։

Կոճակ-գործողություն '«Կրկնել», «Փոխել քարտը», «Խնայիր ֆիլտրերը», «Բացել չատը»։

Զգայուն տվյալները 'չցուցադրել (PAN դիմակ, անձնական ատրիբուտներ)։

Օրինակներ

Լավ. <<Մոսկվան չի անցել, բանկը մերժեց վիրահատությունը։ Փորձեք մեկ այլ միջոց կամ ավելի ուշ"։

Վատ է. <<Սխալ 500։ Ինչ-որ բան սխալ անցավ"։

Լավ, "Օրվա ծախսերի լիմիտը հասնում է։ Ռուսական նոր սահմանը կամ փորձեք վաղը"։

Լավ, "Ֆայլը չափազանց մեծ է (MB 25 MB)։ Այրեք կամ բեռնեք մի քանի ֆայլեր"։

5) Վարքը և ֆոկուսը (A11y)

Սխալն իրականացվում է ֆոկուսային համատեքստում 'մենք տեղափոխում ենք ֆոկուս առաջին սխալ դաշտին։

Կենդանի տարածքներ ՝ "role =" status "" (polite) մրցույթի համար, "role =" alere "(assertive) - քննադատների համար։

Տեսանելի 'focus-visible', AA կոդավորման հակադրություն, գույնի այլընտրանք (iconka/տեքստ)։

Հաղորդագրությունը կապում ենք դաշտին '«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) Retrai, backoff և impotenty

Խոհարարը առաջարկվում է, եթե հաջողության հնարավորություն կա (ցանցային ձախողումներ, 5xx, rate limit)։

Էքսպոնենցիալ backoff 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) Օֆլինը, թայմաուտները և մասնակի բովանդակությունը

Օֆլայն 'ցույց ենք տալիս «Ոչ մի միացում», հասանելիությունը քեշին (read-only), համաժամացման հերթը։

Թայմաուտներ ՝ UI-timaut (3-5 s) ռուսական վիճակը «Սպասում ենք հաստատմանը»... ապահով խոհարար/չեղյալ հայտարարելով։

Մասնակի հաջողությունը 'պահպանել այն, ինչ հաջողվեց։ մարկիրուսը «համաժամեցված չէ»։

8) Հակամարտություններ և մրցակցություն

4.9/412 'տվյալները հնացած են։ Առաջարկել «Նորարարություն» և ցույց տալ (ինչ է փոխվել)։

Արգելափակումներ. Մենք տեղեկացնում ենք, թե ով է պահում բլոկը, և որքա՞ ն ժամանակ, «Խնդրեք հասանելիությունը» կոճակը։

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>

React ErrorBoundary (ID հարաբերակցության հետ)

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 ճնշումները

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-ը, BD-ի ճանապարհները։

Մենք սկսում ենք զգայուն արժեքներ (քարտեր, փաստաթղթեր)։

Հաղորդագրությունները չպետք է առաջարկեն հարձակվողին (օրինակ, որ հաշիվը գոյություն ունի)։

Աջակցության համար ID հարաբերակցությունը մասերի փոխարեն։

Կառուցվածքային լոգ (backend)

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-chek-թերթ

Հասանելիություն

Ֆոկուսը առաջին սխալ դաշտում, «aria-describedby »/« aria-entalid» -ը ցուցադրվում է։
Քննադատական հաղորդագրությունները '"role =" alment "; հակադրություն AA։

Վարք

Այս ձևերը սխալմամբ չեն կորցնում։
Կա հասկանալի «Retry» և ճիշտ backoff.
Offline ռեժիմը/քեշը աշխատում են; դրոշը տեսնում ենք։

Կոպիրայթինգը

Պատճառը հետևյալն է. առանց տեխնիկական ժարգոնի և պարամետրերի։
Տեքստերը տեղայնացվում են և չեն կոտրում ցանցը։

Անվտանգություն

PII/գաղտնիքների արտահոսք չկա։ ցույց ենք տալիս միայն անվտանգ կոդեր/ID։
Idempotenty ներառվում է կրիտիկական վիրահատությունների համար։

14) iGaming հատկությունները

Դրույքաչափը

UI-ն անմիջապես գրում է «buby»; հետաձգման ժամանակ> 3 s - «Սպասում ենք ապացույց»...

Fail: ազնիվ կարգավիճակը («շուկան փակվեց», «գործակիցը փոխվեց») + անվտանգ «Retry»։

Idempotent բանալին վերացնելու համար։

Մոսկվա/եզրակացություն

Մենք տարբերում ենք «բանկի/PBS» vs «սերվերի ձախողումը»։ Առաջինը '«Ընտրեք մեկ այլ միջոց», երկրորդի համար' «Retry»։

KYC/AML թափանցիկ քայլերը; "Ինչո՞ ւ է դա անհրաժեշտ։ ».

Պատասխանատու խաղը և լիմիտները

Թոնը հոգատար է, առանց ճնշման։ «Սահմանափակում ձեռք բերեք, դադար անեք կամ թարմացրեք սահմանը»։

Առանց բռնկումների/ոչ, AAA-ի հակադրություն, SR-ի հասանելիությունը։

Գեո/լիցենզիա

Հստակ բացատրեք սահմանափակումները և առաջարկեք «Ծանոթանալ կանոններին/աջակցություն»։

15) Anti-patterna

«Ինչ-որ բան սխալ էր» առանց գործողությունների և կոնտեքստի։

Սխալից հետո ձևերը կոտրվել են։

Թաքցնել քննադատական թոստը երեք վայրկյանում։

Միայն գույնը առանց տեքստի/իկոնկայի։

Անսահման ռետրեր առանց հնարավորության։

Ցույց տալ ներքին պարամետրերը/stek-treiss։

16) Մոսկվա դիզայնի համակարգում

Компоненты: `FieldError`, `FormError`, `PageBanner`, `AlertDialog`, `ErrorBoundary`.

Tons/հակադրություն/timings, a1y և ARIA օրինակներ։

Տիպային պարամետրերի քարտեզը (վալիդացիա, ցանց, իրավունքներ, վճարումներ) տեքստային օրինաչափություններով։

«Do/Don 't»: իրական էկրանները մինչև/հետո ձախողումների/հաջողությունների մետրերով։

Live ռեզյումե

Սխալներ արեք հասկանալի և կառավարվող, խոսեք մարդկային լեզվով, պահպանեք մուտքագրվող տվյալները, առաջարկեք անվտանգ խոհարար և այլընտրանքներ, հարգեք հասանելիությունն ու մասնավորեցումը։ Այդ դեպքում նույնիսկ անազնիվ իրավիճակները պահպանում են վստահությունը և չեն ընդհատում օգտագործողի ուղին, հատկապես քննադատական սցենարներում։

Սխալների մշակումը և UX բացատրությունները

Օրինակներ

Վարք

Կոպիրայթինգը

Անվտանգություն

Live ռեզյումե

Կապ հաստատեք մեզ հետ

Արագ կապ

Տեսանյութը շուտով կթարմացվի

Այս պահին մենք ծանրաբեռնված ենք նախագծերով