प्रगति और स्थिति संकेतक

1) सिद्धांत

1. त्वरित प्रतिक्रिया (≤ 100 एमएस)। किसी भी कार्रवाई की तुरंत नेत्रहीन पुष्टि की जाती है: 'व्यस्त '/कंकाल/सूक्ष्मजीवों को दबाना।

2. ईमानदारी और पूर्वानुमान। प्रतिशत वास्तविक प्रगति को दर्शाते हैं, न कि "शाश्वत 99%।" यदि मूल्यांकन संभव नहीं है, तो एक अनिश्चित संस्करण और स्पष्टीकरण का उपयोग करें।

3. गतिविधि के बगल में संदर्भ। सूचक वह जगह है जहां उपयोगकर्ता देख रहा है/अभिनय (बटन, कार्ड, ब्लॉक), दूर के कोने में नहीं।

4. सफलता के बाद चोरी। सफलता एक छोटी जाँच/फीका है और यह बात है। त्रुटि - समझने योग्य स्पष्टीकरण और सुरक्षित पुनरावृत्ति।

5. डिफ़ॉल्ट उपलब्धता। 'role = "progressbar",' aria-valuenow ', लाइव क्षेत्र, इसके विपरीत ≥ AA।

2) संकेतकों के प्रकार और उनका उपयोग कब करें

रैखिक प्रगति (निर्धारित/अनिश्चित)। लोड/आयात/निर्यात, स्पष्ट स्कोप के साथ कदम।

परिपत्र प्रगति (आमतौर पर अनिश्चित)। कॉम्पैक्ट स्थानों में लघु स्थानीय संचालन।

स्टेपर (चरण-दर-चरण)। अनुक्रमिक चरण ("चरण 2 का 4"), केवाईसी, मास्टर प्रक्रियाएं।

कंकाल (कंकाल प्लग)। स्पिनरों के बजाय सामग्री संरचना को स्थानापन्न करना; 'पसंद-कम-गति' वाले उपयोगकर्ताओं के लिए "झिलमिलाहट" से बचें।

स्थिति बैज (सफलता/चेतावनी/खतरा/जानकारी)। वस्तु की स्थिति (प्रक्रिया में, अस्वीकृत, तैयार)।

बैनर/स्थिति टोस्ट। वैश्विक घटनाएँ: ऑफ़ लाइन, सर्वर विफलता, कतार तुल्यकालन।

इनलाइन लोडर (बटन/लाइन)। स्थानीय ऑपरेशन: "सेव...", "भेजें...।"

3) निश्चित बनाम अनिश्चित प्रगति

निर्धारित करें: काम की मात्रा ज्ञात है - हम %/चरण दिखाते हैं।

अनिश्चित: अज्ञात मात्रा → "प्रगति में प्रसंस्करण"... + संदर्भ ("आमतौर पर 1-2 मिनट तक")।

राज्य संक्रमण - आप अनिश्चित से शुरू कर सकते हैं - मूल्यांकन प्रकट होने पर निर्धारित करने के लिए जाएं।

ईटीए सावधानीपूर्वक: सीमा ("~ 30-60 सेकंड") दिखाएं और "वादों" से बचें।

4) प्लेसमेंट और पैटर्न

स्थानीय रूप से कार्रवाई के लिए: 'आरिया-व्यस्त' बटन, तालिका पंक्ति में स्पिनर, कार्ड प्रगति।

ब्लॉक/सूची के ऊपर: बैच संचालन के दौरान अनुभाग हेडर के नीचे रैखिक पट्टी।

वैश्विक: शीर्ष सूक्ष्म प्रगति (मार्ग-परिवर्तन), सिस्टम बै

स्टिकी पैनल (मोबाइल): निचले डॉक में सीटीए पर पुष्टि/प्रगति।

5) उपलब्धता (A11y)

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

अनिश्चित: 'आरिया-वैल्यूएनो' के बिना 'रोल = "प्रोग्रेसबार' सेट करें, 'रोल =" स्थिति "में व्याख्यात्मक पाठ जोड़ें।

लाइव क्षेत्र: नियमित अपडेट के लिए 'आरिया-लाइव = "विनम्र", केवल महत्वपूर्ण लोगों के लिए' मुखर '।

एक कंटेनर पर 'एरिया-व्यस्त = "सही"' जो अस्थायी रूप से कार्यों द्वारा अवरुद्ध है।

फोकस "कूद" नहीं करता है: मंच बदलते समय, स्टेपर स्टेप हेडर पर ध्यान केंद्रित करें।

6) नकल लेखन और दृश्य शब्दार्थ

संक्षेप में और मामले में: "प्रगति में लोडिंग"..., "प्रसंस्करण भुगतान"...।

जोड़ें "आगे क्या है": "किया। चलो पृष्ठ को स्वचालित रूप से ताज़ा करें।

रंग: हरा - सफलता, नारंगी - चेतावनी/ध्यान, लाल - त्रुटि। रंग - अर्थ का एकमात्र माध्यम: एक प्रतीक/पाठ दें।

7) अपबीट अपडेट और पुलबैक

आशावादी: हम यूआई को तुरंत बदलते हैं (उदाहरण के लिए, "फेवरेट" मार्क) और चुपचाप सर्वर के साथ इसकी पुष्टि करते हैं।

त्रुटि के मामले में - सॉफ्ट रोलबैक + स्पष्टीकरण और 'रेट्री'।

महत्वपूर्ण संचालन (दर/भुगतान): वैकल्पिक रूप से "नरम आशावादी" (फिक्स "पुष्टि के लिए प्रेषित"...), लेकिन पुष्टि से पहले मौद्रिक स्थिति को बदले बिना।

8) कतारें और पृष्ठभूमि कार्य

कतार दिखाएँ: 'n' कार्य प्रसंस्करण में, प्रगति के साथ अलग-अलग कार्ड।

यदि संभव हो तो लंबे ऑपरेशन के लिए ठहराव/रद्द करें।

पृष्ठभूमि प्रसंस्करण: "पृष्ठभूमि में" बैज, पूरा होने पर टोस्ट, "टास्क इतिहास" अनुभाग।

9) प्रदर्शन और समय

पहली प्रतिक्रिया ≤ 100 मीटर: शून्य के बजाय कंकाल/इनलाइन-व्यस्त का उपयोग करें।

एनिमेशन: 120-180 एमएस (इन), 80-140 एमएस (आउट), केवल 'ट्रांसफॉर्म/अपारदर्शिता'।

लंबी प्रक्रियाएं: प्रगति को 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>

रैखिक निर्धारित करें

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 एमएस, कंकाल उचित है; कम देरी के साथ, "माइक्रो-फीका" पर्याप्त है।

12) स्थिति बैज (वस्तु राज्य)

उदाहरण ड्राफ्ट हैं, प्रक्रिया में, लंबित पुष्टि, तैयार, अस्वीकृत।

लघु पाठ, स्थिर प्रतीक/पृष्ठभूमि रंग, विपरीत ≥ AA।

आइकन' aria-hidden =" true" + text लेबल (SR के लिए).

क्लिक करें - विवरण प्रकट करें या "इतिहास" खोलें।

13) iGaming की बारीकियाँ

• CTA → "प्रेषित..." दबाना,> 3 सेकंड की देरी के साथ - "पुष्टि के लिए प्रतीक्षा"... (अनिश्चित)।
• सफलता - "बेट स्वीकार" + जाँच; त्रुटि - ईमानदार स्पष्टीकरण ("बाजार अवधि बंद/अनुपात परिवर्तित") और सुरक्षित पुनरावृत्ति।

• चरणों द्वारा निर्धारित करें: "विधि की जाँच करें → → पुष्टि करें पीएसपी।"
• आउटपुट के लिए - प्रक्रिया बैज में, प्रोफाइल में स्थिति स्क्रीन, ईटीए रेंज; पूरा होने पर धक्का।

• पंजीकरण स्टेपर (चरण), पुरस्कार के लिए प्रगति (एन/अंक), "भाग लेना" स्थिति बिल्ला।
• रियल-टाइम अपडेट - साफ-सुथरा, कोई पलक नहीं, 'आरिया-लाइव = "विनम्र" के साथ।

• स्टेपर + बैज "अंडर रिव्यू। "दिखाओ कि क्या पहले से स्वीकार किया गया है (टिक) और क्या बचा है।

14) रंग, विपरीत और पाठ

सफलता/जानकारी/चेतावनी/खतरा - डिजाइन प्रणाली में चार स्थिर स्वर।

बैज पृष्ठभूमि ≥ AA के लिए पाठ विपरीत।

"प्रक्रिया में" और "चेतावनी" के लिए एक ही रंग का उपयोग न करें।

15) मेट्रिक्स

टाइम-टू-फर्स्ट-फीडबैक (TTFF): पहले दृश्य प्रतिक्रिया के लिए क्लिक करें।

लंबे कार्यों के लिए परिचालन और ड्रॉप/गर्भपात दर पर पूरा होने का समय।

प्रगति संचालन के लिए सफलता दर को फिर से आजमाएं।

आशावादियों का% जिन्होंने सफलतापूर्वक पूरा किया (और रोलबैक का हिस्सा)।

दृश्यमान समय कंकाल/स्पिनर (लक्ष्य: जितना संभव हो उतना कम)।

16) एंटी-पैटर्न

साइलेंट बटन (कोई व्यस्त/स्पिनर नहीं)> 100 एमएस।

स्पष्टीकरण या विकल्प के बिना अनंत स्पिनर।

गलत प्रतिशत/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) क्यूए चेकलिस्ट

प्रतिक्रिया और ईमानदारी

• TTFF ≤ 100 ms; एक स्थानीय व्यस्त/कंकाल है।
• निर्धारित करें - वास्तविक%; अनिश्चित - एक स्पष्टीकरण के साथ।

उपलब्धता

• 'रोल = "प्रोग्रेसबार" '/' आरिया-वैल्यूएनो' सही; अद्यतन पर लाइव क्षेत्र।
• बैज/टेक्स्ट ≥ एए का कंट्रास्ट; रंग अर्थ का एकमात्र वाहक नहीं है।

व्यवहार

• सही रोलबैक और स्पष्टीकरण के साथ आशावादी।
• कतारें प्रदर्शित की जाती हैं; एक रद्दीकरण/ठहराव है (यदि लागू हो)।
• दृश्य के पास प्रगति सीटीए को ओवरलैप नहीं करती है।

निष्पादन

• 10-15 बार/सेकंड से अधिक अपडेट नहीं करता है; 'ट्रांसफॉर्म/अपारदर्शिता' एनिमेशन।
• कंकाल 'रेड-मोशन' के साथ झिलमिलाता नहीं है।

पाठ

• छोटा, तकनीकी शब्दजाल के बिना; "आगे क्या" पूरा होने के बाद।
• जब तक गारंटी नहीं दी जाती तब तक सटीक समय का कोई "वादा" नहीं।

19) डिजाइन प्रणाली में प्रलेखन

: ' Bar', ' सर्कल', 'स्टेपर', ' Badge', 'InlineLoader', 'कंकाल'।

स्थिति के लिए प्रकार, नक़ल लेखन और रंग चुनने के लिए नियम।

पैटर्न: आशावादी, कतारें, पृष्ठभूमि प्रसंस्करण, ऑफ़ लाइन तुल्यकालन।

डू/डॉन गैलरी: "स्थायी स्पिनर", झूठे प्रतिशत, "म्यूट" सीटीए बनाम अच्छा टीटीएफएफ।

संक्षिप्त सारांश

प्रगति और स्थिति के संकेतकों को समय पर, ईमानदार और सुलभ प्रतिक्रिया प्रदान करनी चाहिए। उन्हें कार्रवाई के साथ रखें, निश्चित और अनिश्चित प्रगति के बीच अंतर करें, a11y का सम्मान करें और एनिमेशन का दुरुपयोग न करें। आईगेमिंग में, यह सट्टेबाजी, भुगतान, टूर्नामेंट और केवाईसी के लिए विशेष रूप से महत्वपूर्ण है - शांत, अनुमानित प्रगति सीधे विश्वास और रूपांतरण को बढ़ाती है।