माइक्रो-इंटरैक्शन: 15 उदाहरण और उन्हें कैसे डिज़ाइन करें
माइक्रो-इंटरैक्शन समझाया गया: एक परिभाषा, डैन सैफ़र के चार भाग, प्रकार, डिज़ाइन नियमों और उन्हें CSS, Framer Motion, GSAP या ExodeUI में कैसे बनाया जाए, के आधार पर समूहीकृत 15 वास्तविक उदाहरण।
कोर टेकअवे
माइक्रो-इंटरैक्शन एक इंटरफ़ेस में एक छोटा, निहित क्षण है जो एक काम करता है: किसी पोस्ट को पसंद करना, किसी सेटिंग को टॉगल करना, किसी फ़ॉर्म की पुष्टि करना, या किसी जेस्चर को पूरा करना। यह शब्द और इसकी शारीरिक रचना डैन सैफर से आई है, जो चार भागों को परिभाषित करते हैं। एक ट्रिगर इसे शुरू करता है, नियम तय करते हैं कि क्या होता है, फीडबैक परिणाम दिखाता है, और लूप या मोड यह नियंत्रित करते हैं कि यह समय के साथ क्या करता है। अच्छे माइक्रो-इंटरैक्शन छोटे होते हैं, उपयोगकर्ता के स्वयं के इनपुट पर प्रतिक्रिया देते हैं और बाधित रहते हैं।
माइक्रो-इंटरैक्शन क्या है?
माइक्रो-इंटरैक्शन किसी उत्पाद में सबसे छोटा पूर्ण इंटरैक्शन है: शुरुआत, परिवर्तन और अंत के साथ एक एकल कार्य। यह संपूर्ण प्रवाह नहीं है. किसी पोस्ट को लाइक करना एक माइक्रो-इंटरैक्शन है; टिप्पणी लिखना और प्रकाशित करना एक प्रवाह है। यह विचार और इसकी संरचना डैन सैफर की पुस्तक माइक्रोइंटरेक्शन्स से आई है, जो प्रत्येक को चार भागों में विभाजित करती है।
सूक्ष्म-अंतःक्रिया के चार भाग
डैन सैफर का ढांचा सूक्ष्म-इंटरैक्शन को चार घटकों में तोड़ता है। उनका नामकरण करना उपयोगी है क्योंकि अधिकांश कीड़े और सबसे खराब गति चारों में से एक में रहते हैं, पूरे में नहीं।
चालू कर देना
वह घटना जो इसे प्रारंभ करती है. उपयोगकर्ता द्वारा शुरू किया गया (एक टैप, होवर, लॉन्ग-प्रेस, ड्रैग) या सिस्टम द्वारा शुरू किया गया (एक डाउनलोड खत्म, एक नेटवर्क त्रुटि आ रही है)। श्रेय: डैन सैफर।
नियम
एक बार शुरू होने पर क्या होता है: वैध स्थितियाँ, बाधाएँ जैसे ड्रैग सीमाएँ या न्यूनतम और अधिकतम मान, और घटनाओं का क्रम। श्रेय: डैन सैफर।
प्रतिक्रिया
उत्पाद उपयोगकर्ता को कैसे बताता है कि क्या हुआ: स्प्रिंग सेटलमेंट, रंग परिवर्तन, आइकन मॉर्फ, टेक्स्ट अपडेट। यहीं पर अधिकांश मोशन डिज़ाइन रहता है। श्रेय: डैन सैफर।
लूप और मोड
समय के साथ अंतःक्रिया क्या करती है, और तरीके इसे कैसे बदलते हैं। एक ही टॉगल अपने तर्क को बदले बिना डार्क मोड या कॉम्पैक्ट लेआउट में अलग-अलग व्यवहार कर सकता है। श्रेय: डैन सैफर।
सूक्ष्म-अंतःक्रियाएँ क्यों मायने रखती हैं?
माइक्रो-इंटरैक्शन यह है कि एक इंटरफ़ेस टेक्स्ट के पैराग्राफ के बिना उपयोगकर्ता को कैसे उत्तर देता है। यह पुष्टि करता है कि एक कार्रवाई प्राप्त हुई थी, यह दर्शाता है कि कुछ अभी भी काम कर रहा है, या बताता है कि अभी क्या बदल गया है। जब वे गायब होते हैं, तो एक ही उत्पाद भारी लगता है: उपयोगकर्ता दो बार टैप करते हैं क्योंकि उन्हें कुछ भी नहीं बताया जाता कि पहला टैप आया है, या वे ऐसी स्क्रीन पर प्रतीक्षा करते हैं जिसने प्रगति का कोई संकेत नहीं दिया। अच्छे लोगों को नोटिस से ज्यादा महसूस किया जाता है, यही बात है।
15 माइक्रो-इंटरैक्शन उदाहरण
इन्हें इस आधार पर समूहीकृत किया जाता है कि वे क्या संचार करते हैं। जहां ExodeUI एक मिलान उदाहरण भेजता है, नाम दिया गया है ताकि आप इसे खोल सकें और संपादित कर सकें।
बटन और टॉगल (दबाएं और बताएं)
1. बटन दबाएँ: पॉइंटरडाउन पर लगभग 0.92 का स्केल और रिलीज़ होने पर स्प्रिंग बैक (ExodeUI उदाहरण: जेली बटन)। 2. टॉगल स्विच: कमिट पर रंग परिवर्तन के साथ स्प्रिंग-आधारित अनुवाद (गूई टॉगल)। 3. मोड स्विच: एक खंडित नियंत्रण जो अपने संकेतक को स्लाइड करता है और सक्रिय लेबल (मोशन स्विच) को रूपांतरित करता है।
फॉर्म फीडबैक (सत्यापन और सबमिशन)
4. अमान्य इनपुट शेक: एक छोटा क्षैतिज संकेत जो कहता है "इस फ़ील्ड को जांचें" बिना किसी संवाद के (विगल टेक्स्ट इनपुट)। 5. प्रगति पर सबमिट करें: बटन प्रगति संकेतक बन जाता है, इसलिए उपयोगकर्ता कभी भी अपना स्थान नहीं खोता है (एनिमेटेड सेंड बटन)। 6. सफलता की पुष्टि: जब कार्रवाई शुरू होती है (रॉकेट लॉन्च बटन) तो बटन पर एक छोटा जश्न मनाने वाला विस्फोट होता है।
लोड हो रहा है और प्रगति हो रही है
7. वृत्ताकार प्रगति: एक अंगूठी जो वास्तविक मूल्य तक भरती है और एक स्प्रिंग (रेडियल गेज) के साथ स्थिर हो जाती है। 8. स्तर या गतिविधि मीटर: एक बार जो आने वाले डेटा जैसे ऑडियो स्तर (ध्वनि तरंग) पर लाइव प्रतिक्रिया करता है।
मार्गदर्शन
9. मेनू टॉगल: एक आइकन जो दो राज्यों के बीच रूपांतरित होता है और मेनू को उसके स्थान पर प्रकट करता है (मॉर्फ़ नेव)। 10. डॉक आवर्धन: कर्सर के पास की वस्तुएं उठती हैं और बढ़ती हैं, फिर स्थिर हो जाती हैं (चुंबकीय डॉक)। 11. टैब चयन: एक संकेतक जो ब्लिंक करने के बजाय टैब के बीच स्लाइड करता है (लिक्विड टैब बार)।
खाली और सफल राज्य
12. खाली अवस्था: एक छोटा सा चित्रण जो एक खाली स्क्रीन को नरम करने के लिए एक बार में एनिमेट होता है। 13. इनाम का खुलासा: एक उपहार या बैज जो एक मील का पत्थर (आश्चर्यजनक उपहार बॉक्स) तक पहुंचने पर प्रत्याशा के साथ खुलता है।
रीफ़्रेश करने के लिए खींचें
14. पुल-टू-रिफ्रेश: इलास्टिक ओवरस्क्रॉल जो ड्रैग को ट्रैक करता है, फिर वापस स्प्रिंग करता है और रिलीज़ होने पर स्थिर हो जाता है। फीडबैक खिंचाव है, स्पिनर नहीं।
हैप्टिक्स-शैली प्रतिक्रिया
15. पुष्टिकरण पल्स: उस तत्व पर एक संक्षिप्त स्केल और चमक जो मोबाइल पर हैप्टिक टैप को प्रतिबिंबित करता है, इसलिए वही क्रिया बिना कंपन मोटर वाले डिवाइस पर भी समान महसूस होती है।
डिज़ाइन नियम जो उन्हें अच्छा बनाए रखते हैं
कुछ नियम मदद करने वाले सूक्ष्म-इंटरैक्शन को परेशान करने वाले माइक्रो-इंटरैक्शन से अलग करते हैं।
- इसे छोटा रखें: लगभग 200-400 मि.से. में अधिकतम पूर्ण; एक छोटे तत्व पर लंबी गति धीमी लगती है
- इनपुट के समान फ़्रेम में प्रारंभ करें; विलंबित शुरुआत कारण और प्रभाव की भावना को तोड़ देती है
- इसे बाधित रखें: यदि उपयोगकर्ता मध्य गति में कार्रवाई को उलट देता है, तो शून्य से पुनः आरंभ करने के बजाय वेग के साथ रीडायरेक्ट करें
- प्राथमिकता-कम-गति का सम्मान करें: एक स्थिर या क्रॉस-फ़ेड फ़ॉलबैक प्रदान करें जो अभी भी परिवर्तन का संचार करता है
- इसे एक काम दें: यदि बातचीत के लिए एक से अधिक निर्णय की आवश्यकता होती है, तो यह एक प्रवाह है
माइक्रो-इंटरैक्शन कैसे बनाएं
सही टूल इस बात पर निर्भर करता है कि एक ही इंटरैक्शन को कितने प्लेटफ़ॉर्म पर चलाना है।
केवल CSS
सरल, स्व-निहित मामलों के लिए अच्छा है: होवर लिफ्ट, फोकस रिंग, और टॉगल जो :चेक या वर्ग परिवर्तन द्वारा संचालित होते हैं। ट्रांज़िशन और @कीफ़्रेम पर्याप्त हैं, और स्टाइलशीट से परे भेजने के लिए कुछ भी नहीं है।
Framer Motion या GSAP (वेब)
अच्छा है जब गति को स्प्रिंग्स, इशारों या ऑर्केस्ट्रेशन की आवश्यकता होती है और केवल वेब पर चलना होता है। दोनों आपको रुकावट पैदा करने वाले स्प्रिंग देते हैं और इन्हें React स्थिति द्वारा संचालित किया जा सकता है।
ExodeUI (वेब, iOS और Android एक फ़ाइल से)
इसका उपयोग तब करें जब समान इंटरैक्शन को React ऐप, SwiftUI ऐप और Flutter में समान व्यवहार करना हो। आप इसे .exode फ़ाइल में एक बार लिखते हैं और रनटाइम इसे प्रत्येक प्लेटफ़ॉर्म पर चलाता है, इसलिए प्रति-प्लेटफ़ॉर्म पुनर्लेखन नहीं होता है।
उत्पादन कार्यान्वयन स्निपेट
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}याद रखने योग्य कुंजी Principle
- माइक्रो-इंटरैक्शन एक ट्रिगर, नियम, फीडबैक और लूप या मोड के साथ एक छोटा सा कार्य है, डैन सैफर द्वारा नामित चार भाग
- अधिकांश अच्छे लगभग 200-400 एमएस में पूरे होते हैं, इनपुट के समान फ्रेम में शुरू होते हैं, और बाधित रहते हैं
- फीडबैक वह है जो काम करता है: यह कार्रवाई की पुष्टि करता है और बताता है कि क्या बदलाव आया है, अक्सर बिना किसी पाठ के
- हमेशा एक प्राथमिकता-कम-गति फ़ॉलबैक प्रदान करें जो बिना गति के समान जानकारी प्रदान करता है