מדדי התקדמות וסטטוס

1) עקרונות

1. תגובה מיידית (100 ms). כל פעולה מאומתת באופן ויזואלי: לחיצה על ”עסוק ”/שלד/מיקרו-אנימציה.
2. כנות ויכולת חיזוי. האחוזים משקפים התקדמות אמיתית, לא ”99% נצחיים”. אם הערכה אינה אפשרית, השתמש בווריאציה והסבר בלתי מוגדרים.
3. הקשר ליד הפעילות. המחוון הוא היכן המשתמש מחפש/משחק (כפתור, כרטיס, בלוק), לא בפינה הרחוקה.
4. התגנבות לאחר ההצלחה. הצלחה היא צ 'ק/דעיכה קצרה וזהו. הסבר מובן לשגיאה וחזרה בטוחה.
5. זמינות ברירת מחדל. רול = ”progresbar” ”, אריה-valuenow”, אזורים חיים, ניגוד בין איי-איי.

2) סוגים של אינדיקטורים ומתי להשתמש בהם

התקדמות ליניארית (לקבוע/לא לקבוע). טעינה/ייבוא/ייצוא, צעדים עם היקף ברור.
התקדמות מעגלית (בדרך כלל לא מוגדרת). מבצעים מקומיים קצרים במקומות קומפקטיים.
סטפר (צעד אחר צעד). צעדים רציפים (”צעד 2 מתוך 4”), KYC, תהליכי מאסטר.
שלד (אטמי שלד). כדי להחליף את מבנה התוכן במקום ספינרים; הימנע מ ”נצנוץ” למשתמשים עם ”מעדיף-תנועה מופחתת”.
תגי מצב (הצלחה/אזהרה/סכנה/מידע). מצב האובייקט (בתהליך, נדחה, Ready).
באנר/סטטוס טוסט. אירועים גלובליים: לא מקוונים, כשל בשרת, סינכרון תורים.
מטען פנים (כפתור/קו). מבצעים מקומיים: ”שמור...”, ”שלח”...

3) התקדמות מובהקת נגד לא ברורה

קבע: כמות העבודה ידועה * אנו מציגים %/שלבים.
לא מוגדר: כרך לא ידוע = ”עיבוד בתהליך... + הקשר” (”בדרך כלל עד 1-2 דקות”).
שינוי מצב - אתה יכול להתחיל עם לא מוגדר = ללכת לקבוע מתי ההערכה מופיעה.
זמן הגעה משוער: הצג את הטווח (30-60 שניות) והימנע מהבטחות.

4) מיקום ותבניות

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

5) זמינות (A11y)

html
<div role = "progressbar" aria-valuemin =" 0" aria-valuemax =" 100" aria-valuenow =" 42" aria-label = "Load Report "> </div>

לא מוגדר: קבע "תפקיד" = "progresbar" "ללא" aria-valuenow ", הוסף טקסט הסבר ל" תפקיד = "status" ".
אזורים חיים: 'אריה-לחיות = ”מנומס” לעדכונים קבועים, ”אסרטיביים” עבור אלה קריטיים בלבד.
”Aria-עסוק =” נכון ”” על מיכל שנחסם זמנית על ידי פעולות.
הפוקוס אינו ”קופץ”: כאשר משנים את הבמה, מזיזים את הפוקוס לכותרת המדרגה.

6) קופירייטינג וסמנטיקה חזותית

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

7) עדכונים מקדימים ומריבות

אופטימי: אנו משנים את UI באופן מיידי (לדוגמה, סימן ”הפייבוריטים”) ומאשרים אותו בשקט עם השרת.
במקרה של שגיאה - rollback רך + הסבר ו ”Retry”.
פעולות קריטיות (קצב/תשלום): ”אופטימיות רכה” מבחינה אופטית (תיקון ”Sended pough Waiting for Immination...”), אך ללא שינוי במצב הכספי לפני האישור.

8) תורים ומשימות רקע

הצג את התור: 'n' משימות בעיבוד, כרטיסים בודדים עם התקדמות.
עצור/בטל לפעולות ארוכות במידת האפשר.
עיבוד רקע: ”ברקע” תג, טוסט עם סיום, ”Task history” סעיף.

9) ביצועים ותזמונים

תגובה ראשונה ב-100 מ "מ: השתמש בשלד/תפוס במקום בריק.
אנימציות: 120-180 ms (in), 80-140 ms (out), רק ”transformation/opicity”.
תהליכים ארוכים: עדכון התקדמות לא יותר מ-10-15 פעמים/שניות; שינויים קבוצתיים.

10) קטעים

התקדמות מקומית על הכפתור

html
<button id="export" class="btn" aria-busy="false">Экспорт CSV</button>
<script>
const btn = document. getElementById('export');
btn. addEventListener('click', async () => {
btn. setAttribute('aria-busy','true'); btn. disabled = true;
try {
const r = await fetch('/api/export', { method:'POST' });
if(!r.ok) throw new Error();
//show toast "Export has begun. We will notify upon readiness"
} catch {
//toast with cause and Retry
} finally {
btn. disabled = false; btn. setAttribute('aria-busy','false');
}
});
</script>

Linear לקבוע

html
<div class="progress">
<div class="bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
</div>
<style>
.progress{height:4px; background:var(--bg-muted); border-radius:999px; overflow:hidden}
.progress. bar{height:100%;width:0%;background:var(--accent); transition:width. 16s}
</style>
<script>
const bar = document. querySelector('.progress. bar');
let n=0; const t=setInterval(()=>{ n=Math. min(100, n+5); bar. style. width=n+'%'; bar. setAttribute('aria-valuenow',n); if(n===100) clearInterval(t); },160);
</script>

סטפר

html
<nav aria-label = "Progress">
<ol class="steps">
<li class = "done "> <span> 1 </span> Data </li>
<li class = "current" aria-current = "step "> <span> 2 </span> Documents </li>
<li> <span> 3 </span> Confirmation </li>
</ol>
</nav>

11) שלד נכון

השתמש בצורה של תוכן עתידי (קלפים/קווים), ללא נצנוץ אינסופי (או נטרל עם ”מעדיף-מופחת-תנועה”).
מגבלת זמן: אם טעינה> 300-500 ms, שלד מוצדק; עם עיכובים נמוכים יותר, ”דעיכה קטנה” זה מספיק.

12) תגי מצב (מצב אובייקט)

דוגמאות הן טיוטה, בתהליך, עד לאישור, מוכן, נדחה.

טקסט קצר, צבעי סמל/רקע יציבים, ניגוד בין איי איי.
Icon' aria-hide =” true” + text label (עבור SR).
לחץ - לחשוף פרטים או לפתוח את ”היסטוריה”.

13) הפרטים של iGaming

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

• קבעו לפי שלבים: ”בדוק את השיטה * Send # לאשר PSP”.
• עבור פלט - בתג תהליך, מסך מצב בפרופיל, טווח ETA; לדחוף על השלמה.

• סטפר רישום (צעדים), התקדמות לפרס (N/points), תג מצב השתתפות.
• עדכון בזמן אמת - מסודר, בלי מצמוצים, עם 'אריה-לחיות = ”מנומס”.

• סטפר + תג "תחת ביקורת. "תראה מה כבר מקובל ומה נשאר.

14) צבעים, ניגודיות וטקסט

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

15) מדדים

Time-to-First-Feedback (TTFF): לחץ לתגובה ויזואלית ראשונה.
זמן השלמה על פעולות וקצב הטלה/ביטול עבור משימות ארוכות.
נסה מחדש את אחוזי ההצלחה לפעולות ההתקדמות.
% מהאופטימיסטים שהשלימו בהצלחה (והחלק של רולבקס).
שלד זמן גלוי/ספינר (מטרה: מעט ככל האפשר).

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

כפתור שקט (לא עסוק/ספינר)> 100 ms.
אינסוף ספינים ללא הסבר או לחלופין.
אחוז כוזב/99% מחוון תלוי.
מאתחל תוכן על כישלון ולא יכול להיות מחדש.
רק צבע ללא טקסט/סמלים עבור סטטוס.
ההתקדמות רחוקה מהפעולה (המשתמש אינו רואה).

17) מערכת עיצוב אסימונים (דוגמה)

json
{
"progress": {
"barHeight": 4,
"radius": 999,
"inMs": 160,
"outMs": 120,
"pollHz": 10
},
"status": {
"tones": { "success": "#", "info": "#", "warning": "#", "danger": "#" },
"badge": { "radius": 8, "px": "6 10", "icon": 14 }
},
"skeleton": {
"rowHeight": 16,
"gap": 8,
"reduceMotion": true
},
"a11y": {
"useAriaBusy": true,
"live": "polite",
"contrastAA": true
}
}

css
.badge{display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border-radius:8px; font-size:.875rem}
.badge--success{background:var(--bg-success); color:var(--on-success)}
.skeleton{background:linear-gradient(90deg, var(--sk1), var(--sk2), var(--sk1)); border-radius:8px}
@media (prefers-reduced-motion: reduce){.skeleton{background:var(--sk1)} }

18) רשימת QA

תגובה ויושר

[ ] TTFF 100 ms; יש מקומי עסוק/שלד.

[ ] לקבוע -% אמיתי; לא מוגדר - עם הסבר.

זמינות

[ ] 'תפקיד = ”progresbar” '/' aria-valuenow' נכון; אזורים חיים על עדכונים.

[ ] ניגוד של תגים/טקסט AA; הצבע אינו נושא המשמעות היחיד.

התנהגות

[ ] אופטימי עם גלגול נכון והסבר.

[ תורים ] מוצגים; יש ביטול/הפסקה (אם זה אפשרי).

[ ] התקדמות ליד הזירה אינה חופפת CTA.

ביצועים

[ ] עדכונים לא יותר מ-10-15 פעמים/שניות; אנימציות ”טרנספורמציה/אפיון”.

[ שלד ] אינו מקניט נצנצים עם 'תנועה-תנועתית'.

טקסטים

[ ] שורט, ללא ז 'רגון טכני; ”מה הלאה” אחרי סיום.

[ ] אין ”הבטחות” של זמן מדויק אלא אם כן מובטח.

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

”BAR”, ”About Circle”, ”Stepper”, ”Datge”, ”InfrichLoader”, ”Skeleton”.
כללים לבחירת סוג, קופירייטינג וצבעים לסטטוסים.
דפוסים: אופטימיות, תורים, עיבוד רקע, סינכרון לא מקוון.
גלריה Do/Don 't: ”ספינר תמידי”, ”אחוזים כוזבים”, ”אילם” CTA נגד טי-טי-אף טוב.

תקציר

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