שגיאה בטיפול והסברים של UX

1) מדוע זה משנה

שגיאה אינה ”טקסט אדום”, אלא המשך של התסריט. שגיאות UX טובות:

מסביר מה קרה ומה לעשות הלאה,
חוסך את הנתונים שנכנסו ומונע אובדן התקדמות,
נותן דרך בטוחה או חלופית,
נשאר זמין (SR/Clyboard) ולא חושף יותר מדי.

2) שגיאת טיפולוגיה (עבור ממשק)

1. אימות נתונים (לקוח 4xx): שדות ריקים/לא תקפים, פורמט, אורך, סתירה שלטונית.
2. חוקים עסקיים: גבולות, אילוצים גיאו, KYC/KYB, שכפולים, חריצים לא זמינים.
3. זכויות/הרשאות: תפקיד, גישה למשאב, הגבלות גיל.
4. רשת/שרת: פסק זמן, לא מקוון, 5xx, עומס יתר, מגבלת קצב.
5. קונפליקטים/סטטוס: 409/412 (נתונים השתנו), גזעים, מנעולים.
6. אין משאב: 404/410, נמחק/הועבר.
7. תשלום וסיכון: דחייה על ידי הבנק/PSP, אנטי הונאה, גבולות של משחק אחראי.

3) ערוצים ורמת תצוגה

אנו בוחרים את ”הנפח” עבור ההקשר:

ערוץ	Quando	דוגמה
קו פנימי בשדה	אימות/רמז	”מינימום 8 תווים”
תחת בלוק/צורה	שגיאת שלב	"לא הצליח להציל. נסה שוב"
טוסט (תפקיד = מעמד)	אירועים ללא חסימה	”קובץ עמוס בשגיאות, פרטים להלן”
כרזה בעמוד	חשוב אך לא חוסם ניווט	"לא מקוון. מציג נתונים מטמונים"
מודלקה (תפקיד = alertdialog)	חסימת צעדים מסוכנים	"הפגישה פגה. תחתום שוב"
שגיאה בעמוד	טיפות קריטיות 404/5xx	”עמוד לא נמצא ”/” מצטער, הכישלון הוא בצד שלנו ”

חוק: אל תסתיר קריטי בטוסט/ריחוף. היכן שהמשתמש צופה, יש הודעה.

4) שגיאות קופירייטינג

מבנה: cause effect # action.
טון: ישר, ניטרלי, ללא אשמה.
פרטים: ציין שדה/תנאי, הימנע מקודים וערימות.
פעולת כפתור: ”חוזר”, ”כרטיס שינוי”, ”מסנני איפוס”, ”שיחה פתוחה”.
נתונים רגישים: אל תציג (מיסוך 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) רטריי, לסגת ואידמפוטנטיות

החזרה מוצעת אם קיים סיכוי להצלחה (כשלים ברשת, 5xx, rate limit).
גיבוי מעריכי 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 timeout (3-5 שניות) = ”מחכה לאישור”...
הצלחה חלקית: אנחנו שומרים את מה שהצלחנו; מסמן ”לא מסונכרן”.

8) קונפליקטים ותחרותיות

409/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>

הגבה גבול (עם זיהוי מתאם):

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) ביטחון ופרטיות

אנחנו לא מציגים עקבות ערימות, תעודות זהות פנימיות, מסדי נתונים.
אנו מסווים ערכים רגישים (מפות, מסמכים).
ההודעות אינן צריכות להניע תוקף (לדוגמה, קיים חשבון).
לתמיכה - זיהוי מתאם במקום חלקים.

רישום מובנה (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 והחלק של משימות ארוכות בעת השגיאה (הטעות לא צריכה ”לתלות” את ה-UI).
תגובת שיעור הצלחה, טעויות לכל פעולות 1000, זמן לשחזר.
CTR ב ”עזרה/צ 'אט”, אחוז הטפסים ירד.
מפות חום: היכן ששגיאות שדה מתרחשות לרוב.

13) רשימת QA

זמינות

[ ] התמקד בשדה הנכה הראשון; 'Aria-תאור על ידי '/' אריה-לא תקף להגדיר.

[ ] הודעות קריטיות - ”תפקיד =” התראה ””; בניגוד לאלכוהוליסטים אנונימיים.

התנהגות

[ נתוני טופס ] אינם אבודים מטעויות.

[ ] יש 'Retry ברור' ו גיבוי נכון.

[ ] Offline מצב/מטמון עובד; באנר לראות.

קופירייטינג

[ ] Reason # Action; בלי ז 'רגון טכני והאשמות.

[ טקסטים ] הם מקומיים ולא לשבור את הרשת.

אבטחה

[ ] אין דליפת פיל/סודות; הצג רק קודים מאובטחים/תעודת זהות.

[ ] אידמפוטנטיות מתאפשרת לפעולות קריטיות.

14) הפרטים של iGaming

קצב:

UI מיד מקליט 'עסוק'; בעיכוב> 3 s - ”מחכה לאישור...”
כשל: מצב ישר (”שוק סגור”, ”מקדם השתנה”) + בטוח ”Retry”.
מפתח אידמפוטנטי כדי לחסל הצעה כפולה.

תשלום/משיכה:

אנו מבחינים בין כשל בנק/PSP נגד כשל שרת. ”לראשון -” בחר שיטה אחרת, לשני - 'Retry'.
צעדים שקופים של KYC/AML; קישורים "למה זה הכרחי? ».

משחק אחראי ומגביל:

הטון הוא אכפתיות, אין לחץ. ”הגבלה הגיעה - הפסקה או עדכון המגבלה”.
אין התפרצויות/ניאון; ניגוד AAA, זמינות ב SR.

גיאו/רישיון:

הסבר ברור את ההגבלות ומציע ”קרא את הכללים/התמיכה”.

15) אנטי דפוסים

”משהו השתבש” ללא פעולה והקשר.
איפוס הטופס לאחר שגיאה.
הסתר קריטי טוסט במשך 3 שניות.
רק צבע ללא טקסט/סמל.
נסיגות אינסופיות ללא אפשרות של ביטול.
הצג קודים פנימיים/שבילי ערמה.

16) תיעוד במערכת התכנון

CountRution: ”Vieverior”, ”FormError”, ”PageBanner”, ”Victure Dialog”, ”LaungBordary”.
צליל/ניגודיות/עיתוי אסימונים, A11y presents, ודוגמאות ARIA.
מפה של תרחישים טיפוסיים (אימות, רשת, זכויות, תשלומים) עם תבניות טקסט.
”Do/Don 't”: אמיתי לפני/אחרי מסכים עם מדדי כישלון/הצלחה.

תקציר

עשה טעויות מובנות וניתנות לניהול: דבר בשפה אנושית, שמור נתונים מוזנים, תציע חזרה בטוחה וחלופות, תכבד נגישות ופרטיות. אז אפילו מצבי חירום שומרים על ביטחון עצמי ולא קוטעים את דרכו של המשתמש - במיוחד בתרחישים קריטיים של הימורים ותשלומים.

שגיאה בטיפול והסברים של UX

דוגמאות

התנהגות

קופירייטינג

אבטחה

תקציר

צרו קשר

חיבור מהיר

הווידאו יעודכן בקרוב

אנחנו עמוסים מאוד בפרויקטים כרגע