👇🏽 ⛹🏽 🎟️ उपयोगकर्ता प्रवाह: लोकप्रिय एप्लिकेशन और साइट कैसे बनाएं 💊 🙌🏽 👦🏼

सभी को नमस्कार!

मैं ओमेगा-आर के यूएक्स / यूआई डिजाइनर मैक्सिम स्कवॉर्टसोव हूं, जो आईटी समाधानों के विकास और एकीकरण के लिए एक अंतरराष्ट्रीय कंपनी है। मैं मोबाइल और वेब अनुप्रयोगों के इंटरफेस को डिजाइन और कल्पना करता हूं।

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

उपयोगकर्ता प्रवाह क्या है?

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

उपयोगकर्ता प्रवाह क्रियाओं के अनुक्रम का एक दृश्य प्रतिनिधित्व है ।उपयोगकर्ता अपने लक्ष्य को प्राप्त करने के लिए प्रदर्शन करता है । यह किसी विशेष फ़ंक्शन या संपूर्ण उत्पाद को कवर कर सकता है।

एक अनुक्रम बनाने के लिए, एक अध्ययन करना और तीन बुनियादी सवालों के जवाब देना आवश्यक है :

उपयोगकर्ता कौन है?
उसका उद्देश्य क्या है?
इसे हासिल करने के लिए उसे क्या कदम उठाने चाहिए?

ये मुख्य प्रश्न हैं जो कभी-कभी स्पष्ट उत्तर देना मुश्किल हो सकते हैं, इसलिए सहायक प्रश्न मदद कर सकते हैं:

उपयोगकर्ता किस एप्लिकेशन के लिए उपयोग करेगा?
इस लक्ष्य को प्राप्त करने के लिए उपयोगकर्ता को क्या प्रेरित करता है?
ऐप आपके लक्ष्य तक पहुंचने में आपकी मदद कैसे करता है?
उपयोगकर्ता को एप्लिकेशन का उपयोग करने से क्या रोका जा सकता है?
ग्राहक और उपयोगकर्ताओं के लिए किसी उत्पाद या सेवा के कौन से गुण सबसे महत्वपूर्ण हैं? प्रश्न, संदेह और संकोच क्या हैं?
उपयोगकर्ता के लिए एप्लिकेशन के कौन से गुण सबसे महत्वपूर्ण हैं?
किसी कार्रवाई को पूरा करने के लिए उपयोगकर्ताओं को क्या जानकारी चाहिए?
किस तरह की भावनात्मक ट्रिगर उन्हें कार्रवाई के लिए प्रेरित करती है?

डिजाइन की प्रक्रिया में, कई सवाल हमेशा उठने चाहिए। उनके जवाब की तलाश हर तरफ से हर छोटी चीज पर विचार करने का अवसर प्रदान करती है। केवल इस मामले में परिणाम वास्तव में सुविधाजनक उत्पाद हो सकता है।

उपयोगकर्ता प्रवाह एक उपयोगकर्ता के बारे में एक कहानी है।

उपयोगकर्ता प्रवाह आपको उपयोगकर्ता की बातचीत और उपयोगकर्ता की आंखों के माध्यम से आवेदन को देखने की अनुमति देता है।

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

मान लीजिए आप एक म्यूजिक प्लेयर के लिए एक एप्लीकेशन बना रहे हैं। एक तरफ, आप चाहते हैं कि उपयोगकर्ता एक स्पर्श के साथ अपने पसंदीदा गाने चलाने में सक्षम हो। दूसरी ओर, उन्हें पसंदीदा पटरियों को परिभाषित करने, नए संगीत की खोज (संभवतः कई स्थानों पर) की आवश्यकता है, वॉल्यूम को नियंत्रित करें और तुल्यकारक को समायोजित करें, संगीत को सूची में फेरबदल करें, कलाकार की जीवनी पढ़ें, खरीदारी करें और हाथ पर अन्य सभी कार्य करें। उपयोगकर्ता सामाजिक नेटवर्क में सिफारिशें और प्लेलिस्ट साझा करना चाहते हैं और देखेंगे कि उनके मित्र क्या सुन रहे हैं।

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

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

डिजाइनर भूमिका

कल्पना करें कि आप किसी उत्पाद पर एक टीम में काम कर रहे हैं, जहां प्रोजेक्ट मैनेजर, बैकएंड- और वेब-डेवलपर्स हैं। मान लीजिए कि ग्राहक से किसी प्रकार का तकनीकी कार्य है, जो पर्याप्त विस्तार और ध्वनिपूर्ण तरीके से लिखा गया है। यह सिर्फ एक उत्पाद लेने और बनाने के लिए बनी हुई है।

एक डिजाइनर को क्या करना चाहिए? अपेक्षित परिणाम को देखते हुए, सभी आवश्यक स्क्रीन बनाएं ताकि अंतिम उत्पाद सुविधाजनक और सुंदर हो, और इसे डेवलपर्स को दें।

सामान्य तौर पर, हाँ। लेकिन एक हिमशैल का एक पानी के नीचे का हिस्सा है। कई चीजें वहां छिपी होती हैं जिनके बारे में बहुत कम लोग सोचते हैं। हम सभी सुविधाजनक और सहज ज्ञान युक्त इंटरफेस पसंद करते हैं, हम प्यार करते हैं जब सब कुछ तार्किक रूप से काम करता है और किसी भी इंटरैक्शन का परिणाम अनुमानित है। और यह सब होने के लिए, आपको प्रत्येक विवरण को सावधानीपूर्वक काम करने की आवश्यकता है।

बस इसके लिए आपको उपयोगकर्ता प्रवाह की आवश्यकता है - यह उपयोगकर्ताओं को लक्ष्य प्राप्त करने के तरीकों को निर्धारित करने में मदद करेगा, हमारे संभावित उपयोगकर्ताओं के लक्ष्यों को प्राप्त करने के लिए चुने हुए मार्ग पर सकारात्मक और नकारात्मक परिदृश्यों की गणना करेगा। यह समझना संभव बनाता है कि क्या उत्पाद में सभी प्रक्रियाओं का तार्किक निष्कर्ष है और कुशलता से बनाया गया है, ताकि उपयोगकर्ता लक्ष्य प्राप्त करने के लिए न्यूनतम समय बिताए।

महत्वपूर्ण: जितनी बड़ी समस्या और अधिक कार्य, उतने अधिक परिदृश्यों के माध्यम से आपको काम करना होगा।

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

उत्पाद टीम के लिए मूल्य

उपयोगकर्ता प्रवाह उत्पाद या कार्यक्षमता के लिए ग्राहक के साथ परिदृश्यों के समन्वय के लिए शीर्ष स्तर पर मदद करता है। खासकर जब ग्राहकों के पास विशिष्ट और विस्तृत आवश्यकताएं नहीं होती हैं (जब वे खुद को खराब समझते हैं कि वे क्या चाहते हैं)। इस मामले में, उपयोगकर्ता प्रवाह ग्राहकों को कुछ दिशा दे सकता है, और वे आपको पहले ही बता देंगे कि वे किन स्थानों पर अपनी प्रतिक्रिया प्रदान करके तर्क को बदलना चाहेंगे - या तो एक टिप्पणी के रूप में या वर्तमान योजना को स्वतंत्र रूप से समायोजित करके। इस तथ्य के बावजूद कि उपयोगकर्ता प्रवाह बनाना एक जटिल और समय लेने वाली प्रक्रिया की तरह लगता है, यह उत्पाद विकास के दौरान बहुत सी गलतियों को खत्म करने में मदद करता है। उसकी मदद से, जैसा कि वे कहते हैं, "धीरे-धीरे हार्नेस, लेकिन जल्दी से सवारी करें।"

उपयोगकर्ता प्रवाह के आधार पर, पीएम के लिए, डेवलपर्स के लिए कार्य शुरू करना सुविधाजनक है - यह काफी स्पष्ट और पारदर्शी है कि वर्तमान तर्क में क्या बदलाव किए जाने चाहिए या कौन से नए कार्य जोड़े जाएंगे।

परीक्षक उपयोग के मामले (परीक्षण) और जाँच सूची तैयार कर सकते हैं, क्योंकि वे उपयोगकर्ता के अनुकूल लिपियों को सुविधाजनक प्रारूप में प्रदर्शित करते हैं।

टीम के लिए उपयोगकर्ता प्रवाह बहुत उपयोगी है, खासकर जब टीम की रचना काफी बड़ी है - आपको काम के तर्क को अलग से समझाने की आवश्यकता नहीं है। इस प्रकार, उपयोगकर्ता प्रवाह में ग्राहक को डिजाइन प्रक्रिया में शामिल किया जाता है, टीम को प्रेरित करता है, सभी कार्य प्रक्रियाओं को एक ही दिशा में निर्देशित करता है, क्योंकि टीम के प्रत्येक सदस्य तस्वीर को समग्र रूप से देखता है।

ग्राहक मूल्य

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

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

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

इस प्रकार, उपयोगकर्ता प्रवाह सीधे साइट या मोबाइल एप्लिकेशन की सफलता और ग्राहक के लाभ को प्रभावित करता है। उपयोगकर्ता डिजाइन का केंद्र बन जाता है, और यह पूरी तरह से ग्राहक के सिद्धांत के साथ मेल खाता है।

वो कैसा दिखता है?

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

उपयोगकर्ता प्रवाह का संयोजन के रूप में प्रतिनिधित्व किया जा सकता है:

कार्य प्रवाह
तार प्रवाह (लो-फाई)
स्क्रीन प्रवाह (हाई-फाई)

आइए उनमें से प्रत्येक को देखें और देखें कि वे कैसे दिख सकते हैं। एक उदाहरण के रूप में, हम घरेलू उपकरणों का ऑनलाइन स्टोर लेते हैं। लक्ष्य को प्राप्त करने के लिए उपयोगकर्ता, उसके लक्ष्य और चरणों को परिभाषित करें।

हमारे उपयोगकर्ता को एक युवा मां होने दें जिसका लक्ष्य एक बहुक्रियाशील खाद्य प्रोसेसर खरीदना है। चरणों के अनुक्रम में एक परिदृश्य इस तरह दिखाई दे सकता है:

स्टोर की वेबसाइट खोलें;
खोज में टाइप करें "खाद्य प्रोसेसर";
खोज परिणामों से कई उत्पादों की तुलना करें
उत्पाद को टोकरी में पसंद करें;
खरीदारी करें;
भुगतान करने के लिए;
साइट बंद करें।

कार्य प्रवाह

टास्क फ्लो एक सरल प्रतिनिधित्व है कि लक्ष्य या कार्य को पूरा करने के लिए उपयोगकर्ता प्रत्येक चरण पर क्या करता है। यह अनिवार्य रूप से एक क्लासिक फ़्लोचार्ट है जो इस अनुक्रम को परिभाषित करता है।

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

चित्र बनाने के लिए, आप चित्र में दिखाए गए क्लासिक ब्लॉक आरेख से आवश्यक और पर्याप्त तत्वों की सूची का उपयोग कर सकते हैं या BPMN मानक का उपयोग कर सकते हैं - यह तकनीकी विशेषज्ञों और व्यावसायिक उपयोगकर्ताओं दोनों के उद्देश्य से है।

तार प्रवाह (लो-फाई)

तार प्रवाह एक फ्लोचार्ट और वायरफ्रेम का संयोजन है। वायरफ्रेम स्क्रीन डिजाइन का एक कम विस्तृत स्केच है, जिसका जोर दृश्य घटक पर नहीं है, बल्कि तत्वों, स्क्रीन की संरचना और सामग्री के स्थान पर है।

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

मोबाइल स्क्रीन बनाते समय वायर का प्रवाह विशेष रूप से उपयोगी होता है: फ्लोचार्ट के अधिक सार तत्वों को बदलने के लिए मोबाइल स्क्रीन के अपेक्षाकृत छोटे आकार आसानी से उपयोग किए जाते हैं। तार प्रवाह तकनीकी विनिर्देशों के गठन और शोधन के लिए आरामदायक हैं, लेकिन परीक्षण चरण के लिए शायद ही उपयुक्त हैं।

ऐसी योजना का एक उदाहरण:

स्क्रीन प्रवाह (हाई-फाई)

यहां हम विस्तृत स्क्रीन के बारे में बात कर रहे हैं जो उपयोगकर्ताओं और डेवलपर्स दोनों के लिए समझने योग्य हैं। आमतौर पर, नेविगेशन तत्वों और व्यवहार की कुछ बारीकियों पर जोर दिया जाता है। इसका उपयोग लेआउट के डिजाइन को अनुमोदित करने के लिए एक नियामक दस्तावेज के रूप में किया जा सकता है।

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

जब आप उसे स्क्रीन प्रवाह दिखाते हैं, तो एप्लिकेशन का ग्राहक विकास की गति से सुखद आश्चर्यचकित हो सकता है, और यह सोच सकता है कि विकास पूरा होने के करीब है। एक नियम के रूप में, हम ग्राहक को अग्रिम रूप से सूचित करते हैं कि स्क्रीन फ्लो के पीछे कोई कोड नहीं है, लेकिन स्क्रीन फ्लो की उपस्थिति ग्राहक को एक गारंटी देती है कि अच्छी तरह से तैयार किए गए यूएक्स और यूआई को समान रूप से सही कोड का पालन करना होगा।

स्क्रीन फ्लो उदाहरण:

नीचे एक उदाहरण है कि कैसे क्लासिक फ़्लोचार्ट्स, योजनाबद्ध छवियों और अंतिम लेआउट का एक संकर कुल मिलाकर कैसा दिख सकता है।

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

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

उपयोगकर्ता प्रवाह: लोकप्रिय एप्लिकेशन और साइट कैसे बनाएं