इंटरफ़ेस में वास्तविक प्रतिक्रिया

1) "वास्तविक प्रतिक्रिया" क्या है

वास्तविक प्रतिक्रिया समय पर, ठोस और कार्रवाई से संबंधित प्रतिक्रिया है जो उपयोगकर्ता को यह समझने में मदद करती है कि क्या हुआ, अब क्या हो रहा है और आगे क्या होगा। यह संज्ञानात्मक भार को कम करता है, त्रुटियों को कम करता है और नियंत्रण की भावना को बढ़ाता है।

• अनिश्चितता और अपेक्षा को कम क
• त्रुटियों को रोकें और उन्हें जल्दी से ठीक करें।
• सफलता की पुष्टि करें और अगला कदम दिखाएं।

2) प्रतिक्रिया के प्रकार

तत्काल (≤100 -200 ms): होवर/फोकस/प्रेस्ड-स्टेट, सक्रिय तत्वों को उजागर करना।

लघु (≤1 s): स्पिनर/कंकाल, सूक्ष्म-पुष्टि, "सेव्ड"।

प्रगति (सेकंड-मिनट): निर्धारित/अनिश्चित-संकेतक, ईटीए/चरण।

पुष्टि: स्पष्ट "तैयार" + परिणाम संदर्भ/पूर्ववत।

चेतावनी: धीरे से नुकसान को रोकें (भेजने से पहले)।

गलतियाँ: समझाएं कि "क्या गलत हुआ" और "इसे कैसे ठीक किया जाए।"

तंत्र स्थिति: ऑनलाइन/ऑफ़लाइन, तुल्यकालन, विरोध।

सामग्री प्रतिक्रिया: परिवर्तनों को उजागर करना, संस्करणों की तुलना करना, नया बैज।

3) उच्च गुणवत्ता वाली प्रतिक्रिया के सिद्धांत

1. समयबद्धता:

माइक्रोसिग्नल तुरंत; दीर्घकालिक संचालन - प्रगति के साथ।

2. संदर्भ के लिए बाइंडिंग:

गतिविधि/क्षेत्र के बगल में एक सामान्य बैनर में छिपा नहीं है।

3. विशिष्टता और कार्रवाई:

"पासवर्ड बहुत छोटा है (न्यूनतम 8)। इसे ठीक करें?" "त्रुटि 400" के बजाय।

4. प्रतिवर्तनीयता:

परिवर्तन नोटिस पर पूर्ववत/रिडो।

5. पूर्वानुमान:

पूरे उत्पाद में सफलता/त्रुटि के लिए समान पैटर्न

6. उपलब्धता:

इसके विपरीत, सिर्फ रंग नहीं, ARIA लाइव, फोकस नियंत्रण।

7. ध्यान बचाना:

न्यूनतम पर्याप्त संकेत; अनावश्यक मॉडल और "चिल्लाना" के बिना।

4) "लाइव" प्रतिक्रिया के पैटर्न

4. तत्वों की 1 दृश्य अवस्था

हॉवर/फोकस/दबाया/अक्षम - दृश्यमान पदानुक्रम।

क्लिक किए जाने पर बटन - "लोडिंग" (फिर से क्लिक करने योग्य नहीं)।

4. 2 इनलाइन सत्यापन (क्षेत्रों में सही)

जब फ़ोकस खो जाता है या इनपुट ठहराव होता है तो सिंटैक्स की जाँच की जाती है (300-500 ms की डिब्यूस करें)।

क्षेत्र, स्थिति आइकन, उदाहरण/मुखौटा ("+ 38 (0XX) XXX-XX-XX") के तहत संदेश।

आदेश: पहले रोकें, फिर सही करें।

4. 3 कंकाल и खाली राज्य

"जंपिंग" सामग्री के बजाय कंकाल।

अनुदेश/डेमो डेटा और सीटीए के साथ रिक्त स्थिति।

4. 4 आशावादी यूआई (रोलबैक के साथ)

हम तुरंत परिणाम परिवर्तित दिखाते हैं, इसे समानांतर में सर्वर को भेजते हैं।

विफलता के मामले में - नरम रोलबैक + स्पष्ट कारण + "दोहराएं।"

रोलबैक लॉग और मैट्रिक्स की आवश्यकता होती है।

4. 5 ऑटोसेव और संकेतक

"सेव 18: 42 "/" सिंक्रोनाइज़ेशन... "/" ऑफ़ लाइन: स्थानीय प्रति "।

विरोधाभास: diff दिखाएँ और चुनें संस्करण/merge परिवर्तन.

4. 6 सूचनाएं और इनबॉक्स

एक्शन बटन के साथ 3-5 सेकंड के लिए महत्वपूर्ण घटनाएं एक विनम्र टोस्ट हैं।

पृष्ठभूमि कार्यों के लिए - सूचना केंद्र/इतिहास।

5) त्रुटियां: वर्गीकरण और उत्तर

सत्यापन (उपयोगकर्ता): क्षेत्र के बगल में; कैसे ठीक करें; उदाहरण।

व्यावसायिक नियम: नियम/सीमा की व्याख्या करें; एक विकल्प का सुझाव दें।

तकनीकी: नेटवर्क/सर्वर - "संचार समस्या। दोहराओ?" + ऑफ़ लाइन मोड।

महत्वपूर्ण: मोडल - सेव संदर्भ के साथ सब कुछ न तोड़ें, वसूली का रास्ता दें।

Microcopyright त्रुटियां: संक्षेप में, बोलचाल की भाषा में, कोड और उपयोगकर्ता अपराध के बिना।

6) लंबे संचालन और कतारें

प्रगति निर्धारित करें: ज्ञात वॉल्यूम - शो प्रतिशत/

अनिश्चित: अज्ञात - लहर + रेटिंग "आमतौर पर 5-10 एस"।

पृष्ठभूमि कार्य: कार्य सूची में स्थिति + पुश/टोस्ट तैयार।

रद्दीकरण/ठहराव: जहां उपयुक्त - अनिवार्य हो।

प्रगति की संरचना: कई कदम - मिनी-स्टेप्स ("चरण 2/4: सत्यापन"...)।

7) ऑफ़ लाइन, अंतराल और संघर्ष

सूचना: बैज "ऑफ़लाइन", "कनेक्ट"...।

स्थानीय कैशिंग: एक नेटवर्क के बिना काम करना; कतार भेजें।

संस्करण संघर्ष: अंतर पूर्वावलोकन, चयन या विलय रणनीति।

टाइमआउट: "30 सेकंड में विफल - क्या हम फिर से कोशिश करेंगे?" + "बाद में रिपोर्ट करें"।

8) पहुँच और समावेश

ARIA लाइव क्षेत्र: टोस्ट/गलतियों के लिए 'आरिया-लाइव = "विनम्र/मुखर"।

फोकस प्रबंधन: गलती से - क्षेत्र पर ध्यान केंद्रित करना सफलता से - परिणाम के लिए।

सिर्फ रंग नहीं: प्रतीक/पाठ/पैटर्न।

आंदोलन वरीयताएँ: 'पसंद-कम-गति' का सम्मान करें।

ध्वनि/रणनीति (मोबाइल): नरम हैप्टिक्स, अक्षम विकल्प।

9) प्रतिक्रिया गुणवत्ता मैट्रिक्स

TTF (टाइम-टू-फीडबैक) - कार्रवाई के बाद पहले सिग्नल से पहले का समय।

त्रुटि दर/सुधार दर - त्रुटियों का प्रतिशत जो ≤N सेकंड में सफलतापूर्वक सुधारा गया है।

रोष-क्लिक/डेड-एंड्स: निष्क्रिय क्षेत्रों पर कई क्लिक।

रोलबैक दर (आशावादी): रोलबैक का प्रतिशत और उनके कारण।

सफलता स्वीकार की: स्पष्ट "तैयार" पुष्टि का प्रतिशत।

समर्थन संकेत: असंगत त्रुटियों/गुम स्थिति के बारे में शिकायतें।

कार्य पूर्णता/TTFV: कार्य पूरा होने और पहले मूल्य पर प्रतिक्रिया प्रभाव।

10) इंस्ट्रूमेंटेशन और इवेंट्स

ui_action {type, target_id, context}
ui_feedback_shown {type: success    warning    error    progress, target_id, latency_ms}
ui_error {category: validation    business    network    system, field, code, retriable}
sync_state {online    offline    syncing, queued_ops, conflicts}
optimistic_tx {entity, op, committed    rolled_back, reason}

विशेषता: खंड, उपकरण, चैनल, अनुप्रयोग/बिल्ड संस्करण।

11) चेकलिस्ट

11. 1 डिजाइन

• प्रत्येक क्रिया में त्वरित दृश्य प्रतिक्रिया होती है
• त्रुटियाँ - समस्या के पास, एक फिक्स के एक उदाहरण के साथ।
• सफलता - स्पष्ट पुष्टि + अगला चरण/लिंक।
• लंबे संचालन - प्रगति/ईटीए/रद्द करना।
• ऑफ़ लाइन राज्यों और तुल्यकालन का वर्णन किया गया है।
• सुरक्षित रोलबैक और लॉग के साथ आशावादी यूआई।
• उपलब्धता: इसके विपरीत, ARIA, फोकस, कोई "रंग केवल" नहीं।

11. 2 सामग्री/माइक्रोकॉपी

• संक्षेप में, मामले पर, तकनीकी शब्दजाल के बिना।
• उपयोगकर्ता को दोष न दें; एक उपचारात्मक पथ का सुझाव दें।
• सुसंगत पैटर्न (सहेजा, असफल - पुनरावृत्ति)।

11. 3 तकनीक

• CTA पर Idempotency/Click deduplication।
• रद्द करें/बैकऑफ के साथ भेजें, समय समाप्त करें, और रिट्रे करें।
• टीटीएफ लॉग, त्रुटियां, रोलबैक और ऑफ़ लाइन कतार।
• खराब नेटवर्क/लंबी प्रतिक्रिया/संघर्ष के साथ परीक्षण।

12) सूक्ष्म-कॉपीराइट के उदाहरण

• "शाम 7:05 बचाया। क्या आप कार्ड खोलना चाहते हैं →

• "पासवर्ड बहुत छोटा है - कम से कम 8 वर्ण।"

• "संचार खो गया। आपके परिवर्तन स्थानीय रूप से सहेजे गए हैं। क्या आप फिर से जाना चाहते हैं?"

• "प्रोसेसिंग फ़ाइल (चरण 2/3)... आमतौर पर 30 सेकंड तक लगते हैं। रद्द करें"

• "इस दस्तावेज़ का एक नया संस्करण है। परिवर्तनों की तुलना करें और चुनें"

• "परिवर्तन लागू करने में विफल। पूर्व वापस आ गया। दोहराओ?"

13) मामलों से पहले/बाद में

फॉर्म inline मान्यता के बिना संकेत देता है

इससे पहले: भेजने के बाद ही त्रुटियां; उच्च विफलता।

के बाद: जैसे ही आप टाइप करते हैं, प्रारूप उदाहरण, फ़ील्ड हाइलाइटिंग - पूर्णता दर में वृद्धि और त्रुटि दर घट जाती है।

लंबे समय तक लोडिंग → कंकाल + प्रगति

इससे पहले: स्पिनर के साथ खाली स्क्रीन; रोष क्लिक।

के बाद: कंकाल, नियतात्मक प्रगति, वापसी - रोष-क्लिक्स में गिरावट।

"शांत" रहना - स्पष्ट सफलता + अगला कदम

इससे पहले: उपयोगकर्ता निश्चित नहीं है, फिर से क्लिक करें।

के बाद: सेव + ओपन लिंक - कम डुप्लिकेट और त्रुटियाँ।

नेटवर्क अस्थिर → ऑफ़ लाइन कतार

इससे पहले: डेटा हानि।

के बाद: स्थानीय बैकअप, दोहराना, स्थिति बैज - विश्वास में वृद्धि।

14) कार्यान्वयन प्रक्रिया

1. चरण और त्रुटि मानचित्र: जहां प्रतिक्रिया की आवश्यकता है और किस प्रका

2. फ़ीडबैक टेम्पलेट: सफलता/त्रुटि/प्रगति/ऑफ़लाइन - एक एकल सेट।

3. प्रोटोटाइप और परीक्षण: कृत्रिम रूप से देरी; उपलब्धता की जांच।

4. इंस्ट्रूमेंटेशन: इवेंट्स, टीटीएफ, रोलबैक, क्रोध क्लिक।

5. प्रयोग: योगों और पैटर्न पर ए/बी (इनलाइन बनाम पोस्ट-सबमिट)।

6. फ्लैग रोलआउट और घटना पूर्वव्यापी।

15) सारांश

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