مدیریت خطا و توضیحات UX

1) چرا اهمیت دارد

یک خطا یک «متن قرمز» نیست، بلکه ادامه اسکریپت است. خطاهای خوب UX:

توضیح دهید که چه اتفاقی افتاده و چه کاری باید انجام شود،
موجب صرفه جویی در داده های وارد شده و جلوگیری از از دست دادن پیشرفت،
یک مسیر تکرار یا جایگزین امن را فراهم می کند،
در دسترس باقی می ماند (SR/صفحه کلید) و بیش از حد نشان نمی دهد.

2) نوع شناسی خطا (برای رابط)

1. اعتبار سنجی داده ها (مشتری 4xx): فیلدهای خالی/نامعتبر، فرمت، طول، تعارض قانون.
2. قوانین کسب و کار: محدودیت ها، محدودیت های جغرافیایی، KYC/KYB، تکراری، اسلات های غیر قابل دسترس.
3. حقوق/مجوزها: نقش، دسترسی به منابع، محدودیت سنی.
4. شبکه/سرور: اتمام وقت، آفلاین، 5xx، اضافه بار، محدودیت نرخ.
5. درگیری/وضعیت: 409/412 (تغییر داده ها)، نژادها، قفل ها.
6. بدون منبع: 404/410، حذف شده/منتقل شده است.
7. پرداخت و خطر: رد توسط بانک/PSP، ضد تقلب، محدودیت های بازی مسئول.

3) کانال ها و سطح صفحه نمایش

ما «حجم» را برای متن انتخاب می کنیم:

کانال های ارتباطی	کوآندو	به عنوان مثال
درون خطی در میدان	اعتبار سنجی/اشاره	«حداقل 8 کاراکتر»
تحت بلوک/فرم	خطای گام	"نجات ندادن. دوباره سعی کنید"
نان تست (نقش = وضعیت)	رویدادهای غیر مسدود کننده	«فایل پر از خطا، جزئیات زیر»
بنر در صفحه	مهم اما مسدود کردن ناوبری نیست	"خارج از شبکه. نمایش داده های ذخیره شده"
Modalka (نقش = alertdialog)	مسدود کردن مراحل خطرناک	"جلسه تمام شده است. دوباره ثبت نام کنید"
صفحه خطا	404/5xx قطره بحرانی	«صفحه یافت نشد «/» با عرض پوزش، شکست در کنار ما است »

قانون: هنوز بحرانی در نان تست/شناور پنهان نیست. جایی که کاربر تماشا می کند، یک پیام وجود دارد.

4) خطاهای کپی رایت

ساختار: علت → اثر → عمل.
تن: صادقانه، بی طرف، بدون گناه.
مشخصات: یک زمینه/شرایط را مشخص کنید، از کدها و پشته ها اجتناب کنید.
دکمه عمل: «تکرار»، «تغییر کارت»، «تنظیم مجدد فیلترها»، «چت باز».
داده های حساس: نشان نمی دهد (PAN پوشش، ویژگی های شخصی).

مثال ها

خوب: "پرداخت شکست خورد: بانک معامله را کاهش داد. روش دیگری را امتحان کنید یا بعدا دوباره امتحان کنید.

بد: "خطای 500. چیزی اشتباه پیش رفت"

وی افزود: "بودجه روزانه تامین شده است. یک محدودیت جدید تعیین کنید یا فردا امتحان کنید

خوب: "فایل خیلی بزرگ است (حداکثر 25 مگابایت). لطفا برخی از فایل ها را فشرده یا دانلود کنید.

5) رفتار و تمرکز (A11y)

خطا در زمینه تمرکز نمایش داده می شود: تمرکز را به اولین فیلد اشتباه منتقل می کنیم.
مناطق زندگی: «نقش =» وضعیت «(مودبانه) برای اطلاعات،» نقش = «هشدار» (قاطعانه) برای بحرانی.
قابل مشاهده «: تمرکز قابل مشاهده»، کنتراست ≥ AA، جایگزین رنگ (آیکون/متن).
ما پیام را از طریق «aria-descripedby» به فیلد متصل می کنیم.

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، عقب نشینی و idempotency

تکرار ارائه شده است اگر احتمال موفقیت وجود دارد (شکست شبکه, 5xx, حد نرخ).
عقب نشینی نمایشی 1-2-4-8 s، محدودیت تلاش، دکمه قابل فهم «تکرار».
معاملات بحرانی (نرخ/پرداخت): اجباری Idempotency-کلید → حذف تکراری.
به روز رسانی های خوش بینانه - بازگشت روشن بصری + روشن شدن.

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) آفلاین، زمان بندی و محتوای جزئی

آفلاین: ما بنر «بدون اتصال»، دسترسی به حافظه پنهان (فقط خواندنی)، صف هماهنگ سازی را نشان می دهیم.
Timeouts: اتمام وقت UI (3-5 ثانیه) → وضعیت «در انتظار تأیید»... با ایمن redo/undo.
موفقیت جزئی: ما آنچه را که مدیریت می کنیم حفظ می کنیم ؛ علامت گذاری «هماهنگ نیست».

8) تعارض و رقابت

۴۰۹/۴۱۲: دادههای تاریخ گذشته. پیشنهاد «به روز رسانی» و نشان دادن تفاوت (که تغییر کرده است).
قفل ها: ما اطلاع می دهیم که چه کسی بلوک را نگه می دارد، و چه مدت، دکمه «درخواست دسترسی».

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:

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) امنیت و حریم خصوصی

ما آثار پشته، شناسه های داخلی، مسیرهای پایگاه داده را نمایش نمی دهیم.
ما مقادیر حساس (نقشه ها، اسناد) را ماسک می کنیم.
پیام ها نباید مهاجم را تحریک کنند (به عنوان مثال، یک حساب کاربری وجود دارد).
برای پشتیبانی - شناسه همبستگی به جای قطعات.

ورود به سیستم ساختار یافته (باطن):

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-invalid' مجموعه.
پیام های انتقادی - "نقش =" هشدار "؛ تفاوت ≥ AA

رفتار

اطلاعات فرم در خطا از دست نمی رود.
یک «بازگشت» روشن و یک عقب نشینی صحیح وجود دارد.
حالت آفلاین/کار کش ؛ بنر را ببینید

کپی رایت

دلیل → عمل ؛ بدون اصطلاحات فنی و اتهامات.
متون محلی هستند و شبکه را شکستن نیست.

امنیت

بدون نشت PII/اسرار ؛ فقط کدهای امن/شناسه را نشان می دهد.
Idempotency برای عملیات بحرانی فعال است.

14) ویژگی های iGaming

نرخ گذاری:

UI بلافاصله «مشغول» را ضبط می کند ؛ at delay> 3 s - «در انتظار تأیید»....
در صورت شکست: وضعیت صادقانه («بسته شدن بازار»، «ضریب تغییر کرده است») + امن «سعی مجدد».
کلید Idempotent برای از بین بردن پیشنهاد دوگانه.

پرداخت/برداشت:

ما بین «شکست بانکی/PSP» در مقابل «شکست سرور» تمایز قائل می شویم. "برای اولین بار -" روش دیگری را انتخاب کنید "، برای دوم -" سعی ".
مراحل KYC/AML شفاف ؛ پیوندها "چرا لازم است ؟ ».

بازی مسئولانه و محدودیت ها:

تن صدا مراقب است، بدون فشار. «محدودیت رسید - مکث یا به روز رسانی محدودیت».
بدون شیوع/نئون ؛ کنتراست AAA، در دسترس بودن در SR.

زمین/مجوز:

محدودیت ها را به وضوح توضیح دهید و پیشنهاد دهید «قوانین/پشتیبانی را بخوانید».

15) ضد الگوهای

«چیزی اشتباه رفت» بدون عمل و زمینه.

ارسال مجدد فرم پس از یک خطا

مخفی کردن بحرانی در نان تست برای 3 ثانیه.
فقط رنگ بدون متن/آیکون.
عقب نشینی بی پایان بدون امکان لغو.
نمایش کدهای داخلی/مسیرهای پشته.

16) مستندات در سیستم طراحی

Компоненты: 'FieldError', 'FormError', 'PageBanner', 'AlertDialog', 'ErrorBoundary'.
نشانه تن/کنتراست/زمان بندی، ایستگاه از پیش تنظیم a11y، و ARIA نمونه.
نقشه سناریوهای معمولی (اعتبار سنجی، شبکه، حقوق، پرداخت) با قالب متن.
«انجام/انجام»: واقعی قبل/بعد از صفحه نمایش با معیارهای شکست/موفقیت.

خلاصه ای کوتاه

اشتباهات را قابل فهم و قابل کنترل کنید: به زبان انسانی صحبت کنید، داده های وارد شده را ذخیره کنید، تکرار ایمن و جایگزین ها را ارائه دهید، به دسترسی و حریم خصوصی احترام بگذارید. سپس حتی شرایط اضطراری حفظ اعتماد به نفس و مسیر کاربر را قطع نمی کند - به خصوص در حالات بحرانی از شرط و پرداخت.

مدیریت خطا و توضیحات UX

مثال ها

رفتار

کپی رایت

امنیت

خلاصه ای کوتاه

با ما در تماس باشید

ارتباط سریع

ویدئو به‌زودی به‌روزرسانی می‌شود

ما در حال حاضر بسیار درگیر پروژه‌ها هستیم