मोबाइल ऐप डिज़ाइन में माइक्रोएरेन्ट को समझना
प्रयोज्य के प्रमुख घटकों में से एक है मोबाइल यूआई डिजाइन. महान प्रयोज्यता अक्सर शामिल होती है microinteractions कौन से एक इंटरफ़ेस से छोटी प्रतिक्रियाएं और व्यवहार यह निर्धारित करना कि UI का उपयोग कैसे किया जाना चाहिए। ये माइक्रोएन्चर्स व्यवहार को परिभाषित करते हैं, जुड़ाव को प्रोत्साहित करते हैं, और उपयोगकर्ताओं को यह कल्पना करने में मदद करते हैं कि एक इंटरफ़ेस को कैसे काम करना चाहिए.
डिजिटल इंटरफेस उपयोगकर्ताओं और उनके इच्छित लक्ष्यों के बीच के बिचौलिए हैं। इंटरफ़ेस डिज़ाइनर ऐसे अनुभव बनाते हैं जो उपयोगकर्ताओं की सहायता करते हैं कुछ कार्य करें. उदाहरण के लिए, एक टूडू सूची ऐप में एक इंटरफ़ेस है जो उपयोगकर्ताओं को अपने कार्यों को व्यवस्थित करने में मदद करता है। जैसे फेसबुक ऐप यूजर्स को अपने फेसबुक अकाउंट से इंटरैक्ट करने के लिए एक इंटरफेस देता है.
इस गाइड में, मैं आगे तल्लीन करूंगा मोबाइल एप्लिकेशन के लिए माइक्रोइंटरटैक्स. छोटे इंटरैक्शन तुच्छ लग सकते हैं, लेकिन वे एक हो सकते हैं अपार प्रभाव उपयोगकर्ता के अनुभव की गुणवत्ता पर। जब ठीक से किया जाता है, तो माइक्रोएन्चर्स ओवररचिंग मोबाइल उपयोगकर्ता अनुभव का एक वास्तविक हिस्सा महसूस करते हैं.
Microinteractions की शक्ति
ज्यादातर मामलों में एक माइक्रोएनेरेशन का लक्ष्य होता है अपनी राय बताएं उपयोगकर्ता की कार्रवाई के आधार पर। यह उपयोगकर्ताओं की मदद कर सकता है इंटरफ़ेस कैसे चलता है या व्यवहार करता है, इसकी कल्पना करें, भले ही यह एक फ्लैट स्क्रीन पर पूरी तरह से डिजिटल हो.
Microinteractions की शक्ति है क्योंकि वे एक भ्रमपूर्ण अनुभव बनाएँ. ऑन / ऑफ स्लाइडर्स वास्तव में भौतिक स्विच की तरह नहीं चलते हैं, लेकिन वे एनिमेशन के माध्यम से इस तरह आगे बढ़ सकते हैं.
मुझे इस पोस्ट में मोबाइल ऐप के लिए माइक्रोइंटरटोर्स की अपार कीमत पर चर्चा करते हुए एक अविश्वसनीय उद्धरण मिला:
“सर्वश्रेष्ठ उत्पाद दो चीजों को अच्छी तरह से करते हैं: विशेषताएं और विवरण। विशेषताएं वे हैं जो आपके उत्पाद के लिए लोगों को आकर्षित करती हैं विवरण हैं कि उन्हें वहां कैसे रखा जाए। और विवरण वास्तव में हमारे ऐप को हमारी प्रतिस्पर्धा से अलग बनाते हैं.”
छोटे विवरण एक विकास के दृष्टिकोण से महत्वहीन लग सकता है, लेकिन एक उपयोगकर्ता अनुभव के दृष्टिकोण से वे वास्तव में फर्क करना एक ओके ऐप यूआई और एक असाधारण ऐप यूआई के बीच.
महान सूक्ष्म उपयोगकर्ता उपयोगकर्ता बनाते हैं पुरस्कृत महसूस करें एक कार्रवाई करने के लिए। ये क्रियाएं हो सकती हैं दोहराया गया तथा उपयोगकर्ता के व्यवहार में शामिल है. वे सीख सकते हैं कि इन छोटे माइक्रोएरेन्थ के आधार पर किसी एप्लिकेशन का उपयोग कैसे किया जाए। जब उपयोगकर्ता एक व्यवहार करता है, तो ये छोटे इंटरैक्शन सिग्नल "हाँ, आप मेरे साथ बातचीत कर सकते हैं!"
Google के सामग्री डिज़ाइन स्पेक्स में पाए गए उदाहरणों पर एक नज़र डालें। प्रलेखन में वास्तव में एक संपूर्ण अनुभाग है जो सामग्री गति के लिए समर्पित है. स्थानिक रिश्ते इस समीकरण का एक बड़ा हिस्सा हैं, लेकिन गति केवल स्थानिक रिश्तों से अधिक तय कर सकती है.
यहाँ हैं एनीमेशन और गति का सबसे आम उपयोग मोबाइल यूआई / यूएक्स डिजाइन में:
- विभिन्न पृष्ठों के बीच उपयोगकर्ताओं का मार्गदर्शन करना
- कुछ व्यवहारों को सिखाने के लिए इंटरफ़ेस के माध्यम से उपयोगकर्ताओं का मार्गदर्शन करना
- क्रिया / व्यवहार सुझाना जो किसी भी पृष्ठ पर लिया जा सकता है
मोबाइल एप हैं बहुत कम स्क्रीन स्पेस वेबसाइटों की तुलना में। इससे उपयोगकर्ताओं को ऐप का उपयोग करने के तरीके सिखाने में कुछ कठिनाइयों का सामना करना पड़ सकता है। लेकिन यह आश्चर्यजनक रूप से सरल हो सकता है यदि आप जानते हैं कि माइक्रोट्रांस को ठीक से कैसे लागू किया जाए.
कैसे काम करता है Microinteractions
जब भी यूजर इंटरफेस के एक हिस्से से जुड़ता है तो एक एकल माइक्रोएरेनेशन फायर करता है। अधिकांश माइक्रोएरेन्ट हैं उपयोगकर्ता के इशारे पर एनिमेटेड प्रतिक्रियाएं. तो एक स्वाइप गति एक नल या एक झटका की तुलना में अलग तरह से प्रतिक्रिया करेगा.
ब्लिंक यूएक्स ने माइक्रोइंटरटैक्स के मामूली विवरणों पर चर्चा करते हुए एक शानदार पोस्ट किया। इन छोटे एनिमेशन का अनुसरण करना चाहिए पूर्वानुमेय प्रक्रिया उपयोगकर्ता सीख सकता है आवेदन में हर बातचीत के लिए.
Microinteractions द्वारा एक इंटरफ़ेस के माध्यम से उपयोगकर्ताओं का मार्गदर्शन करते हैं व्यवहारों की प्रतिक्रियाएं दे रहा है. एक बार उपयोगकर्ता जानता है कि एक चालू / बंद स्लाइडर स्थानांतरित हो सकता है, उन्हें पता है कि यह इंटरैक्टिव है। प्रतिक्रिया के आधार पर, उन्हें यह भी पता चल जाएगा कि सेटिंग चालू या बंद थी या नहीं। जब एक बटन दिखता है तो इसे उपयोगकर्ता पर क्लिक किया जा सकता है सहज रूप से जानता है वे इसके साथ बातचीत कर सकते हैं.
UXPin के अनुसार, प्रत्येक मूल माइक्रोएनेरेशन चार चरणों में टूट सकता है, लेकिन मैंने इस प्रक्रिया को संक्षेप में प्रस्तुत किया है तीन कदम.
- कार्य - उपयोगकर्ता कुछ करता है जैसे झटका, स्वाइप, टैप एंड होल्ड, या कुछ अन्य इंटरैक्शन.
- प्रतिक्रिया - इंटरफ़ेस जवाब देता है क्या होने की जरूरत पर आधारित है। स्क्रीन को स्वाइप करने से ब्राउज़र इतिहास में वापस आ सकता है, या ON / OFF स्लाइडर को टैप करने से सेटिंग बंद हो सकती है.
- प्रतिक्रिया - यह क्या है उपयोगकर्ता वास्तव में देखता है बातचीत के परिणाम के रूप में। जब उपयोगकर्ता एक मोबाइल ब्राउज़र में वापस स्वाइप करता है तो वह स्क्रीन के "शीर्ष पर" प्रकट होने के लिए पिछले पृष्ठ को फ़्लोट कर सकता है। जब स्क्रीन पर दबाव डाला जाता है तो ऑन / ऑफ स्लाइडर आसानी से फिसल सकता है या बड़ा हो सकता है.
एनीमेशन के बिना ये बहुत छोटे कार्य पूरे किए जा सकते हैं, लेकिन महान माइक्रोएरेन्शंस एक की पेशकश करते हैं यथार्थवादी भावना फ्लैट डिजिटल इंटरफेस, जो ज्यादातर के रूप में आता है यथार्थवादी एनीमेशन प्रभाव. ये जीवन को इंटरफ़ेस में सांस लेते हैं और अधिक उपयोगकर्ता इंटरैक्शन को प्रोत्साहित करते हैं.
विवरण के लिए देखो
एक डिज़ाइन के छोटे टुकड़ों को देखकर, आप समझ जाएंगे कि किसी ऐप को किसी विशेष व्यवहार का जवाब कैसे देना चाहिए.
रीफ़्रेश करने के लिए खींचें अब लोकप्रिय माइक्रोटेनेशन का एक अच्छा उदाहरण है। जब यह पहली बार लॉन्च हुआ था, तो यह iOS का अभिन्न हिस्सा नहीं था, लेकिन कई ऐप ने यह विचार लिया और इसके साथ चलना शुरू कर दिया। अब रिफ्रेश करने के लिए पुल एक जाना माना व्यवहार है जिसे ज्यादातर यूजर्स फीड यूआई ब्राउज़ करते समय उपयोग करना जानते हैं। मोबाइल हैमबर्गर मेनू के बारे में भी यही कहा जा सकता है जो लोकप्रियता में बेतहाशा वृद्धि हुई है.
हर सूक्ष्मवतन बनाओ यथार्थवादी और सरल. अति एनिमेशन न करें क्योंकि वे कर सकते हैं थकाऊ बनो यदि वे बहुत विस्तृत हैं और अक्सर उपयोग किए जाते हैं। उपयोगकर्ता नहीं चाहता कि हर बार जब वे मेनू आइकन पर टैप करें, तो स्पार्कल दिखाई दे. एक संतुलन कायम करना वास्तविक मूल्य के साथ जो संचार करता है इंटरफ़ेस कैसे काम करना चाहिए ओवरबोर्ड पर जाए बिना.
कुछ उदाहरणों को देखते हुए
मुझे लगता है कि कुछ सीखने का सबसे अच्छा तरीका यह है, और दूसरा सबसे अच्छा तरीका दूसरों के काम का अध्ययन करना है। मैंने एक छोटा सा मुट्ठी भर संग्रह किया है यूआई / यूएक्स माइक्रोएनेशन एनिमेशन प्रतिभाशाली ड्रिबल उपयोगकर्ताओं से आपको यह दिखाने के लिए कि ये वास्तविक नकली में कैसे दिखते हैं.
हर एप्लिकेशन अलग होगा और ऐप क्या करता है, इसके आधार पर अलग-अलग ज़रूरतें हैं। अंत में अधिकांश उपयोगकर्ता एक ही बात चाहते हैं: एक ऐप सहज ज्ञान युक्त तथा एक गुणवत्ता उपयोगकर्ता अनुभव देता है उपयोगकर्ता के व्यवहार के सापेक्ष माइक्रोट्रान्स के साथ.
1. एनिमेटेड इवेंट ऐप यूआई
पहला उदाहरण इवान मार्टीनेंको द्वारा बनाया गया निफ्टी कार्ड एनीमेशन फीचर है। आप नोटिस करेंगे मुट्ठी भर माइक्रोएरेन्ट इस डिजाइन में, विशेष रूप से कार्ड स्वाइप करना और विवरण के माध्यम से आगे बढ़ना.
कार्ड पर टैप करने पर यह आकार में बढ़ता है। और सदस्यता लें बटन को टैप करते समय उपयोगकर्ता की प्रोफ़ाइल फोटो ग्राहकों की सूची में स्लाइड हो जाती है। सब कुछ इंटरफ़ेस के लिए बहुत सहज और काफी स्वाभाविक लगता है.
2. इंटरएक्टिव एक्सरसाइज स्क्रीन
यह रचनात्मक मोबाइल व्यायाम एनीमेशन डिजाइनर विटाली रूबसोव से आता है। यह स्क्वाट्स के एक सेट के लिए अपनी कसरत बचाने वाले उपयोगकर्ता को डेमो करता है.
ध्यान दें कि प्रत्येक एनीमेशन में समान है लोचदार उछाल प्रभाव जब मेनू खुले और स्नैप बंद हो जाए। यह भी सच है जब गतिविधि को "संपन्न" के रूप में जांचा जाता है. संगति क्योंकि वे सभी महसूस करना चाहिए microinteractions के साथ महत्वपूर्ण है एक ही इंटरफ़ेस से जुड़ा है.
3. ऐप माइक्रोइंटरटैंट खोजें
संक्षिप्त, प्यारा और सटीक। मुझे लगता है कि यह सबसे अच्छा लुकास होराक द्वारा डिजाइन किए गए इन खोज ऐप माइक्रोएन्थ्रेट्स का वर्णन करता है। हर एनीमेशन है त्वरित लेकिन फिर भी ध्यान देने योग्य.
यह है कि आप कैसे करने के लिए microinteractions डिजाइन करना चाहिए अति-जटिलता से बचें. यदि इंटरफ़ेस एनीमेशन के बिना तेज लोड होता है, तो इसे जोड़ने से क्यों परेशान होता है? त्वरित एनिमेशन उपयोगकर्ता को अनुभव को चकित किए बिना आगे बढ़ते रहें.
4. फिटनेस गोल माइक्रोएनेरेशन
मुझे लगता है कि जैकब एंटालो ?? ?? Ã'k-k ने वास्तव में पार्क के बाहर अपने फिटनेस लक्ष्य सूक्ष्मता के साथ मारा। स्क्रीन सभी को जिगली जेली-ओ की यह भावना है क्योंकि आकृतियाँ इतनी तेज़ी से चलती हैं.
फिर भी इंटरफ़ेस भी लगता है ठोस और प्रयोग करने योग्य. यह दिखाने के लिए जाता है कि एक उद्देश्य के साथ तैयार किए गए माइक्रोएरेन्च अभी भी मज़ेदार और मनोरंजक हो सकते हैं, लेकिन कार्यात्मक और व्यावहारिक भी हैं.
5. एनीमेशन को ताज़ा करने के लिए खींचो
यहाँ रामसूट में टीम द्वारा बनाए गए मेरे पसंदीदा पसंदीदा पुल-टू-रिफ्रेश एनिमेशन में से एक है। यही नहीं एक तरल पदार्थ की नकल करता है पुल कार्रवाई के साथ, लेकिन प्रतिक्रिया एनीमेशन आसानी से जोड़ता है एक लोडिंग सर्कल में तरल के एक स्पलैश से.
इस विस्तार पर ज्यादा ध्यान मोबाइल ऐप माइक्रोएन्थ्रूज़ में सच्ची सुंदरता को सामने लाता है.
6. टैब माइक्रोएनेरेशन
टैब्ड विजेट छोटी स्क्रीन के कारण मोबाइल ऐप्स के लिए काफी सामान्य हैं। मैं वास्तव में जॉन नूसीस द्वारा बनाई गई इस सूक्ष्मता को पसंद करता हूं, हालांकि मुझे लगता है कि यह तेज गति से अधिक प्रभावी होगा, लेकिन एनीमेशन ही शानदार और अच्छी तरह से सोचा गया है.
टैब एंकर तीर दाईं ओर से ठीक वैसे ही फिसलता है जैसे नई सामग्री दाईं ओर से उछलती है। यह का भ्रम देता है पूरी स्क्रीन शारीरिक रूप से चलती है दांई ओर। एनीमेशन उत्तम है, लेकिन चूंकि यह इतना धीमा है, मुझे लगता है कि अधिकांश उपयोगकर्ता कुछ दिनों के बाद नाराज हो जाएंगे.
7. प्रीलोडिंग एनीमेशन
मैंने ज्यादा कुछ नहीं कहा है लोडिंग बार इस पोस्ट में, लेकिन वे समग्र अनुभव के लिए मूल्यवान हैं। अधिकांश उपयोगकर्ता डेटा लोड करने के लिए इंतजार नहीं करना चाहते हैं, लेकिन वे निश्चित रूप से खाली स्क्रीन पर घूरना नहीं चाहते हैं जबकि यह लोड होता है.
ब्रेट कुर्त्ज़ ने इस अद्भुत प्रीलोडिंग स्क्रीन को किया जो मज़ेदार और ज्ञानवर्धक दोनों है। उपयोगकर्ता वास्तव में हो सकता है मनोरंजन इस छोटे से एनीमेशन को दोहराते हुए देखें। वे भी हो सकते हैं भरोसा दिलाया कि आवेदन है अभी भी उनका डेटा लोड हो रहा है और दुर्घटनाग्रस्त नहीं हुआ.
समेट रहा हु
इन सभी उदाहरणों ने शानदार ढंग से माइक्रोटेन्मेंट के मूल्य को प्रदर्शित किया है। मोबाइल ऐप्स को यूजर्स के माइक्रोइंटरट्यूशंस से बहुत अधिक मूल्य मिलता है शारीरिक रूप से स्क्रीन को स्पर्श करें उनकी उंगलियों के साथ। उपयोगकर्ता अपने डेस्कटॉप मॉनिटर या अपने लैपटॉप स्क्रीन पर टैप नहीं करते हैं, लेकिन हर कोई अपने स्मार्टफोन को टैप करता है क्योंकि यह है अन्तरक्रियाशीलता की डिफ़ॉल्ट स्थिति.
यह है बहुत अधिक व्यक्तिगत अनुभव, यही कारण है कि मोबाइल एप्लिकेशन डिजाइन ऐसा हो सकता है बारीक प्रक्रिया. जब ठीक से किया जाता है, तो महान मोबाइल माइक्रोएन्थर्स का जोड़ एक निर्माण कर सकता है शक्तिशाली भ्रम उपयोगकर्ता अनुभव पिक्सल और मोशन के अलावा कुछ नहीं.
