Microinteractions और प्रतिक्रिया

1) माइक्रो-इंटरैक्शन क्या है

Microinteractions छोटे संकेत हैं - प्रतिक्रिया चक्र जो पुष्टि करते हैं कि सिस्टम ने उपयोगकर्ता को सुना है और परिणाम की ओर बढ़ रहा है।

क्लासिक चार:

1. ट्रिगर (क्लिक करें, स्वाइप करें, फोकस करें, सिस्टम इवेंट करें)

2. नियम (क्या बदलता है और कैसे)।

3. फिडबेक (दृश्य/ध्वनि/स्पर्श/पाठ)।

4. लूप/मेटा-नियम (दोहराएं, समाप्ति, पूर्ववत/फिर से)।

लक्ष्य: कार्य से विचलित किए बिना अनिश्चितता और संज्ञानात्मक भार को कम करना।

2) डिजाइन सिद्धांत

अर्थ> प्रभाव। प्रभाव बताता है "क्या हुआ" और "आगे क्या है।"

तात्कालिकता। पहली प्रतिक्रिया ≤ 100 एमएस (बटन/स्विच)।

अस्पष्टता। विशिष्ट स्थिति: होवर/फोकस/दबाया/अक्षम/लोडिंग।

बचत। न्यूनतम गुण, छोटी अवधि, कोई आतिशबाजी नहीं।

संगति। वही क्रियाएं समान संकेत हैं।

पहुँच। फिडबेक को एक स्क्रीन रीडर द्वारा देखा, सुना और पढ़ा जाता है; गति/ध्वनि का एक विकल्प है।

3) टाइमिंग और घटता

होवर/फोकस: 120-180 मीटर

दबाया/टॉगल: 80-120 мс

टोस्ट/टूलटिप: इनपुट 180-240 मीटर, आउटपुट 120-160 मीटर

इनलाइन सत्यापन: फील्ड फोकस के नुकसान के बाद ≤ 100 एमएस

डिफ़ॉल्ट वक्र 'घन-बेजियर (0. 2, 0, 0. 2, 1)`; दबाया - त्वरित 'क्यूबिक-बेजियर (0। 4, 0, 1, 1)`.

4) माइक्रोइंटरएक्शन कैटलॉग

4. 1 बटन और स्विच

तत्काल प्रतिक्रिया: दृश्य क्लिक/इंडेंट + व्यस्त स्थिति जब नेटवर्क द्वारा क्

आशावादी अद्यतन: यूआई को तुरंत बदलें, त्रुटि पर वापस रोल करें (पूर्ववत के साथ)।

डबल-क्लिक बहस: ब्लॉक पुनरावृत्ति जब तक/टाइमआउट का जवाब नहीं दिया जाता है।

4. 2 रूपों का इनलाइन-सत्यापन

धुंधले क्षेत्रों पर मान्यता; संदेश संक्षिप्त और रचनात्मक हैं ("कम से कम 8 वर्ण")।

स्थिति प्रतीक + रंग + पाठ (एक रंग नहीं)।

पासवर्ड के लिए - "शक्ति" का एक त्वरित संकेतक (इनपुट में हस्तक्षेप नहीं करता है)।

4. 3 टोस्ट/बैनर/स्नैक्स

गैर-अवरोधक पुष्टि के लिए उपयोग करें।

अवधि 2-5 एस, होवर/फोकस पर रुकें, जहां उपयुक्त हो, पूर्ववत बटन।

महत्वपूर्ण सामग्री और सीटीए को बंद न करें।

4. 4 प्रगति और कंकाल

यदि प्रक्रिया की लंबाई ज्ञात है, तो प्रगति बार; यदि नहीं, तो स्पिनर के बजाय कंकाल।

कोई लेआउट कूदता नहीं है: ठीक करें। ब्लॉक ऊंचाइयों।

4. 5 बैज/काउंटर

डिजिट कंट्रास्ट ≥ 4। 5: 1; truncation '99 +' के साथ अधिकतम 99/999।

वृद्धि एनिमेशन - "कांपते" लेआउट के बिना 40-60 एमएस बैचों के छोटे कदम।

4. 6 टूलटिप/मदद

होवर/फोकस द्वारा उपस्थिति; 'आरिया-वर्णित' के माध्यम से पहुंच।

केवल टूलटिप में महत्वपूर्ण जानकारी प्रतिबंधित करें।

5) त्रुटियां, खाली अवस्थाएं, पूर्ववत

त्रुटि: ईमानदार पाठ, कारण और कार्रवाई की व्याख्या ("दोहराएं", "कार्ड बदलें")।

खाली अवस्था: यह क्या है और कैसे शुरू करना है; चित्रण मौन, पाठ विपरीत AA/AAA।

पूर्ववत खिड़की: प्रतिवर्ती कार्यों के लिए 5-10 एस (हटाना, गोली से पहले शर्त रद्द करना)।

6) मल्टीमॉडल फीडबैक

ध्वनि: शांत, छोटा, प्रति घटना प्रकार एक पैटर्न (सफलता/त्रुटि/ध्यान); सेटिंग्स में बंद करें।

विब्रो/हैप्टिका: आसान प्रेस प्रतिक्रिया/सफलता; 'प्रीफर्स-कम-मोशन' और सिस्टम सीमाओं का सम्मान करें।

दृश्य: केवल 'परिवर्तन/अपारदर्शिता', सरणियों पर कोई भारी धुंधला/छाया नहीं।

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

': कीबोर्ड के लिए फोकस-दृश्यमान'; धब्बा के बिना फोकस रिंग।

स्क्रीनसेवर: टोस्ट के लिए 'रोल = "स्थिति "/" अलर्ट "; जीवित क्षेत्र 'आरिया-लाइव = "विनम्र/मुखर"'।

ध्वनि/गति का विकल्प; 'प्रीफर्स-कम-गति: कम करें'।

टेक्स्ट और आइकन कंट्रास्ट - WCAG (नियमित ≥ 4। 5:1).

8) प्रदर्शन

≤ 100 मीटर का जवाब दें: नेटवर्क के लिए दृश्य प्रतिक्रिया।

एनिमेट 'रूपांतरण/अपारदर्शिता'; कई तत्वों पर 'ऊंचाई/बाएं/बॉक्स-छाया' से बचें।

नेटवर्क प्रभाव - प्रीफेच और आशावाद के साथ; रेट्राई पहचानने वाले हैं।

9) माइक्रोइंटरएक्शन टोकन (डिजाइन प्रणाली)

json
{
"micro": {
"duration": { "hover": 160, "focus": 160, "press": 90, "toastIn": 220, "toastOut": 140 },
"easing":  { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"toast":  { "timeoutMs": 3500, "pauseOnHover": true },
"badge":  { "max": 99, "emphasisStepMs": 50 }
}
}

10) कार्यान्वयन स्निपेट्स

होवर और पूर्ववत विराम टोस्ट:

html
<div id="toast" role="status" aria-live="polite" hidden></div>
<script>
const toast = (msg, {undo, timeout=3500}={})=>{
const el = document. getElementById('toast');
el. innerHTML = undo? '$ {msg} <button> Undo </button>': msg;
el. hidden = false;
let t = setTimeout(close, timeout);
el. onmouseenter = () => clearTimeout(t);
el. onmouseleave = () => t = setTimeout(close, timeout);
if (undo) el. querySelector('button'). onclick = ()=>{ undo(); close(); };
function close(){ el. hidden = true; el. innerHTML=''; }
};
</script>

ब्लर के लिए इनलाइन सत्यापन:

js const rules = { password: v => v.length>=8         "Minimum 8 characters"};
document. querySelectorAll('[data-validate]'). forEach(i=>{
i.addEventListener('blur', e=>{
const rule = rules[e. target. name]; if (!rule) return;
const ok = rule(e. target. value);
e. target. dataset. state = ok===true? 'ok': 'err';
e. target. nextElementSibling. textContent = ok===true? '': ok;
});
});

हैप्टिका/वाइब्रो (फोलबैक):

js export const haptic = type => {
if (!('vibrate' in navigator)) return;
if (type==='success') navigator. vibrate(10);
if (type==='error') navigator. vibrate([20,40,20]);
};

"सस्ते" प्रभावों के लिए सीएसएस:

css
.button{ transition: transform. 09s cubic-bezier(.4,0,1,1), box-shadow. 16s cubic-bezier(.2,0,.2,1); }
.button:active{ transform: scale(.98); }
.input[data-state="err"]{ outline: 2px solid var(--role-danger); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ { animation:none! important; transition-duration:.01ms! important; } }

11) मेट्रिक्स और गुणवत्ता नियंत्रण

INP p75 <200 ms, लॉन्ग टास्क शेयर <5%।

पहला उपयोगकर्ता प्रतिक्रिया klik→vizualnyy ≤ 100 ms

🚨 3% (अन्यथा - अविश्वास) के रोलबैक के साथ आशावादी क्रियाओं का अनुपात।

UX सर्वेक्षण: त्रुटि संदेशों की स्पष्टता, पुष्टि की दृश्यता।

क्यूए चेकलिस्ट

प्रत्येक इंटरैक्टिव 'दबाया/व्यस्त/अक्षम' है।
त्रुटियां पाठ और क्रियाओं (Retry/Undo) के साथ हैं।
टोस्ट एसआर पर उपलब्ध हैं और कुंजी सामग्री को ओवरलैप नहीं करते हैं।
इनलाइन सत्यापन इनपुट में हस्तक्षेप नहीं करता है; संदेश विशिष्ट हैं।
'पसंद-कम-गति' समर्थित; ध्वनि/कंपन बंद कर दिया जाता है।
कोई लेआउट और स्ट्रोब कूदता है; 'परिवर्तन/अपारदर्शिता' पर एनिमेशन।

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

शर्त/खरीद: तत्काल 'pressed→busy', टोस्ट "स्वीकृत" पूर्ववत के साथ (यदि नियम अनुमति देते हैं), पहचान कुंजी; देरी> 1 s - "पुष्टि की प्रतीक्षा कर रहा है"...।

स्पिन/रिवील: शॉर्ट प्रेस फीडबैक, स्मूथ स्टार्ट/स्टॉप बिना अंतहीन पलक झपकते; जीत - फट ≤ 500 ms + पढ़ ने योग्य पाठ (AAA)।

लाइव गुणांक: बैचों के साथ अपडेट, दृश्य डिफ़ (तीर/मोटाई) "कूदता" के बिना।

भुगतान/निष्कर्ष: चरण-दर-चरण प्रगति (KUS→Proverka→Vyplata), इनकार के कारणों के पारदर्शी ग्रंथ।

जिम्मेदार नाटक: विचलित करने वाले प्रभावों के बिना सूचनाएं; उच्च कंट्रास्ट, स्पष्ट "सेट लिमिट" CTA।

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

क्लिक पर प्रतिक्रिया दिखाने से पहले नेटवर्क अनुक्रिया के लिए

"आकार के बिना रंग": राज्य केवल छाया में भिन्न होता है।

अंतहीन स्पंदन/पलकें, एक स्विच के बिना तेज ध्वनियाँ।

महत्वपूर्ण सामग्री के साथ औज़ार्टिप कुंजीपटल से पहुँच योग्य नहीं है।

शून्य> 1-2 s में कोई प्रगति/कंकाल के साथ स्पिनर।

सैकड़ों तत्वों पर पतली छाया/धुंधला (कमजोर उपकरणों पर अंतराल)।

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

"माइक्रो-टोकन": 'अवधि/सहजता', टोस्ट/बैज/वेलिडेटर के प्रीसेट।

"पैटर्न": बटन, आकार, टोस्ट, प्रगति, इनलाइन त्रुटियां, पूर्ववत।

"A11y & मोशन": एसआर/एचसी/कम-गति के लिए नियम; ARIA उदाहरण।

"डू/डोंट": समय के साथ छोटी क्लिप, INP/फर्स्ट फीडबैक नंबर।

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

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

Microinteractions और प्रतिक्रिया

क्यूए चेकलिस्ट

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

हमसे संपर्क करें

त्वरित संपर्क

वीडियो जल्द ही अपडेट किया जाएगा

हम इस समय परियोजनाओं में बहुत व्यस्त हैं