معالجة الأخطاء وتفسيرات UX

1) لماذا يهم

• يشرح ما حدث وما يجب فعله بعد ذلك،
• يحفظ البيانات المدخلة ويمنع فقدان التقدم،
• يعطي تكرارًا آمنًا أو مسارًا بديلاً،
• لا تزال متاحة (SR/keyboard) ولا تكشف الكثير.

2) تصنيف الخطأ (للواجهة)

1. التحقق من صحة البيانات (عميل 4xx): الحقول الفارغة/غير الصالحة، التنسيق، الطول، تنازع القواعد.
2. قواعد الأعمال: حدود، قيود جغرافية، KYC/KYB، نسخ مكررة، فتحات غير متوفرة.
3. الحقوق/الأذون: الدور، والوصول إلى المورد، والقيود العمرية.
4. الشبكة/الخادم: المهلة، غير متصل بالإنترنت، 5xx، الحمل الزائد، حد السعر.
5. النزاعات/الحالة: 409/412 (تغيرت البيانات)، الأعراق، الأقفال.
6. لا يوجد مورد: 404/410، محذوف/منقول.
7. الدفع والمخاطر: رفض البنك/PSP، مكافحة الاحتيال، حدود اللعب المسؤول.

3) القنوات ومستوى العرض

القاعدة: لا تخفي النقد في الخبز المحمص/التحليق. حيث يشاهد المستخدم، هناك رسالة.

4) أخطاء في كتابة الإعلانات

الهيكل: السبب → التأثير → العمل.
النغمة: صادقة، محايدة، خالية من الذنب.
التفاصيل: حدد المجال/الحالة، وتجنب الرموز والأكوام.
حركة الزر: «كرر»، «بطاقة التغيير»، «مرشحات إعادة الضبط»، «دردشة مفتوحة».
البيانات الحساسة: لا تظهر (إخفاء PAN، السمات الشخصية).

أمثلة

جيد: "فشل الدفع: رفض البنك الصفقة. جرب طريقة أخرى أو حاول مرة أخرى لاحقًا.

سيء: "خطأ 500. حدث خطأ ما

جيد: "تم الوصول إلى حد الإنفاق اليومي. ضع حدًا جديدًا أو حاول غدًا"

جيد: "الملف كبير جدًا (بحد أقصى 25 ميجابايت). يرجى ضغط أو تنزيل بعض الملفات.

5) السلوك والتركيز (A11y)

يتم عرض الخطأ في سياق التركيز: ننقل التركيز إلى المجال الخاطئ الأول.
المناطق الحية: «الدور =» الوضع «(مهذب) للمعلومات،» الدور = «التنبيه» (حازم) للنقد.
مرئي ': التركيز المرئي'، التباين ≥ AA، بدائل اللون (أيقونة/نص).
نربط الرسالة بالمجال عبر «وصف أغنية».

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، التراجع والغباء

يتم تقديم التكرار إذا كانت هناك فرصة للنجاح (فشل الشبكة، 5xx، حد السعر).
تراجع أسي 1-2-4-8 ثانية، حد المحاولات، زر مفهوم «كرر».
المعاملات الحرجة (المعدلات/المدفوعات): تستبعد → الإلزامية للمفتاح الخصوصية التكرارية.
التراجع عن التحديثات المتفائلة - عائد مرئي واضح + توضيح.

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) خارج الإنترنت، المهلات والمحتوى الجزئي

غير متصل بالإنترنت: نعرض لافتة «لا اتصال»، والوصول إلى ذاكرة التخزين المؤقت (للقراءة فقط)، وطابور التزامن.
المهلة: مهلة واجهة المستخدم (3-5 ثوانٍ) → حالة «انتظار التأكيد»... مع إعادة/التراجع الآمن.
النجاح الجزئي: نحافظ على ما نديره ؛ وضع علامات «غير متزامنة».

8) النزاعات والقدرة التنافسية

409/412: بيانات قديمة. اقترح «تحديث» وأظهر diff (الذي تغير).
الأقفال: نبلغ من يحمل الكتلة، وإلى متى، زر «طلب الوصول».

9) عينة من نماذج واجهة المستخدم

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) الأمن والخصوصية

نحن لا نعرض آثار المكدسات، المعرفات الداخلية، مسارات قواعد البيانات.
نحن نخفي القيم الحساسة (الخرائط والوثائق).
لا ينبغي أن تدفع الرسائل المهاجم (على سبيل المثال، وجود حساب).
للدعم - معرف الارتباط بدلاً من الأجزاء.

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

12) المقاييس والتحكم

INP وحصة المهام الطويلة في وقت الخطأ (يجب ألا «يعلق» الخطأ واجهة المستخدم).
أعد تجربة معدل النجاح، والأخطاء لكل 1000 إجراء، ووقت الاستعادة.
CTR على "Help/Chat'، انخفضت النسبة المئوية للنماذج.
خرائط الحرارة: حيث تحدث أخطاء المجال في أغلب الأحيان.

13) قائمة QA المرجعية

توافر

• التركيز على المجال الأول غير الصحيح ؛ مجموعة "aria-descripby "/" aria-invalid'.
• الرسائل النقدية - "الدور =" التنبيه "؛ ≥ AA.

السلوك

• بيانات النموذج لا تضيع بسبب الخطأ.
• هناك «Retry» واضح وتراجع صحيح.
• وضع العمل/ذاكرة التخزين المؤقت غير متصل بالإنترنت ؛ انظر اللافتة.

كتابة الإعلانات

• السبب → العمل ؛ بدون مصطلحات فنية واتهامات.
• النصوص موضعية ولا تكسر الشبكة.

الأمن

• لا يوجد تسرب/أسرار لمؤشر الاستثمار الدولي ؛ تظهر فقط الرموز الآمنة/الهوية.
• تم تمكين الفراغ للعمليات الحيوية.

14) تفاصيل iGaming

• تسجل واجهة المستخدم على الفور «مشغولة» ؛ في التأخير> 3 s - «في انتظار التأكيد»....
• عند الفشل: الحالة الصادقة («إغلاق السوق»، «تغير المعامل») + «إعادة التجربة» الآمنة.
• المفتاح الفطري للقضاء على العطاء المزدوج.

• نميز بين فشل "البنك/PSP" مقابل "فشل الخادم. "للأول -" اختر طريقة أخرى "للثانية -" Retry ".
• اتخاذ خطوات شفافة في مجال مكافحة غسل الأموال ؛ روابط "لماذا هو ضروري ؟ ».

• النغمة تهتم، لا ضغط. «الحد الذي تم الوصول إليه - توقف مؤقتًا أو قم بتحديث الحد».
• عدم تفشي المرض/النيون ؛ تباين AAA، التوافر في SR.

• شرح القيود بوضوح واقترح «اقرأ القواعد/الدعم».

15) الأنماط المضادة

«حدث خطأ ما» بدون عمل وسياق.
يعيد ضبط النموذج بعد خطأ.
اختبئ في الخبز المحمص لمدة 3 ثوانٍ.
اللون فقط بدون نص/أيقونة.
تراجعات لا نهاية لها دون إمكانية الإلغاء.
أظهر الرموز الداخلية/مسارات المكدس.

16) التوثيق في نظام التصميم

Компоненты: 'FieldError', 'FormError', 'PageBanner', 'AlertDialog', 'ErrorBoundary'.
رموز النغمة/التباين/التوقيت، a11y المسبقة، وأمثلة ARIA.
خريطة السيناريوهات النموذجية (المصادقة، الشبكة، الحقوق، المدفوعات) مع نماذج نصية.
«افعل/لا تفعل»: حقيقي قبل/بعد الشاشات مع مقاييس الفشل/النجاح.

موجز موجز

اجعل الأخطاء مفهومة ويمكن التحكم فيها: التحدث باللغة البشرية، وحفظ البيانات المدخلة، وتقديم التكرار الآمن والبدائل، واحترام إمكانية الوصول والخصوصية. ثم حتى حالات الطوارئ تحتفظ بالثقة ولا تقطع مسار المستخدم - خاصة في السيناريوهات الحرجة للرهانات والمدفوعات.