Uboard [OCD] को बेहतर बनाने के लिए एक साधारण UI हैक

यूआई मॉकअप और स्केच मानते हैं कि उपयोगकर्ता डेटा पहले से मौजूद है। उदाहरण के लिए, मॉकअप यह मानता है कि उपयोगकर्ता के पास चैट, सूचना और यहां तक ​​कि चैट थ्रेड से संपर्क करने के लिए होगा।

इस मुफ्त स्केच संसाधन का उपयोग करके निर्मित सरल संदेशवाहक यूआई

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

चमकदार UI डिज़ाइन जानकारी का उपभोग करना आसान बनाता है और उस जानकारी को बनाने के तरीके पर ध्यान केंद्रित नहीं करता है।

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

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

मौजूदा समाधान

एक समाधान के लिए इंटरफ़ेस जैसी स्लाइड का उपयोग करके एक अपफ्रंट ऑन-बोर्डिंग होना था। यह मोबाइल ऐप्स के लिए मानक प्रतीत होता है।

UX पर स्लैक की स्लाइड-आधारित बोर्डिंग

स्लाइड दृष्टिकोण के साथ समस्या संदर्भ की कमी है। आप स्लाइड्स पर केवल इतना ही बता सकते हैं (उपयोगकर्ता कितना भी अलग हो, एक अलग सवाल है)।

यह उत्पाद का अवलोकन देने के लिए बहुत अच्छा है, लेकिन यह समझाने में बहुत मददगार नहीं है कि उत्पाद कैसे काम करता है। यह मेरे उपयोग के मामले के लिए अप्रासंगिक था, क्योंकि उत्पाद की जटिलता को कुछ स्लाइड्स में उबाला नहीं जा सकता था।

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

Introjs.com/ के लिए टूलटिप पर आधारित बोर्डिंग डेमो

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

एक बीकन शैली दृष्टिकोण भी मौजूद है, जहां आमतौर पर गलतफहमी की विशेषताओं को चमकते बीकन के साथ लेबल किया जाता है, जो आवश्यक होने पर (यदि) आवश्यक जानकारी प्रदान करते हैं।

यह सबसे विनीत तरीका है। टूलटिप के विपरीत जो आपके गले के नीचे 17 कदम के ट्यूटोरियल को हिलाता है और गायब हो जाता है जब आपको वास्तव में इसकी आवश्यकता होती है, यह हॉटस्पॉट आधारित दृष्टिकोण आपको तैयार होने पर जानकारी प्रदान करता है।

यह उल्लेखनीय है कि स्लैक सभी 3 रूपों का उपयोग करता है। कोई आश्चर्य नहीं कि उनके उपयोगकर्ता छड़ी करते हैं। जो किसी भी तरह से इस तथ्य को इंगित करता है कि प्रतिधारण ऑन-बोर्डिंग में आसानी के लिए सीधे आनुपातिक है।

ओसीडी उर्फ ​​ऑनबोर्डिंग केंद्रित डिजाइन

मुझे नामकरण की चीजें पसंद हैं। नाम दिमाग में विचारों को लाने में मदद करते हैं। तो चलिए इस ऑनबोर्डिंग सेंट्रिक डिज़ाइन को कॉल करते हैं।

मैं एक समाधान चाहता था जो:

  • प्रसंग के लिए प्रासंगिक था
  • कष्टप्रद नहीं था (कोई भी यह जानने के लिए 17 कदम उठाना पसंद नहीं करता है कि एक फीचर कैसे काम करता है)
  • विनीत है (बीकन की तरह)
  • उपभोग करना आसान है (टूलटिप का उपभोग करना आसान नहीं है)

परिणाम

मैंने बस राज्यों को डिजाइन करना शुरू किया। इस लेख को पढ़ने के दौरान आपके द्वारा देखी गई चैट डिज़ाइन को तीन राज्यों के साथ डिज़ाइन किया जा सकता है।

राज्य 1: कोई संपर्क मौजूद नहीं है

राज्य 2: संपर्क मौजूद हैं, लेकिन कोई चैट नहीं है

राज्य 3: चैट और संपर्क दोनों मौजूद हैं

प्रत्येक राज्य का लक्ष्य उपयोगकर्ता को अगले राज्य में प्रगति करना है। जब उपयोगकर्ता ने राज्य 3 में प्रगति की है, तो वह सफलतापूर्वक ऑन-बोर्ड किया गया है। चैट मॉकअप को ध्यान में रखते हुए, प्रत्येक राज्य के लिए लक्ष्य निम्नानुसार हैं:

राज्य का लक्ष्य 1: संपर्क जोड़ने के लिए प्रमुख उपयोगकर्ता

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

राज्य 1 - संपर्क जोड़ने के लिए उपयोगकर्ता को बताएं (चित्र द्वारा undraw.co)

एक बार संपर्क जोड़ने के बाद, हम दूसरा लक्ष्य शुरू कर सकते हैं।

राज्य 2 का लक्ष्य: एक चैट शुरू करने के लिए प्रमुख उपयोगकर्ता

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

स्टेट 2 - चैट शुरू करने के लिए प्राइम को जोड़ा गया

राज्य 3 का लक्ष्य: कोई नहीं, उपयोगकर्ता चालू है - सभी संकेत गायब हो जाने चाहिए

और अंत में, जब आपके उपयोगकर्ता ने प्रक्रिया को कुछ बार दोहराया है, तो उसका UI उस तरह से देखना शुरू कर देगा जैसा हमने मूल रूप से इरादा किया था।

राज्य 3 - उपयोगकर्ता सफलतापूर्वक बोर्ड पर है

इस दृष्टिकोण के लाभ

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

अतः अंगूठे के नियम के रूप में:

राज्यों के लिए डिजाइन मॉकअप।
प्रत्येक राज्य का एक लक्ष्य होता है - अगले राज्य की प्रगति।
अंतिम स्थिति तब होती है जब आपका उपयोगकर्ता ऑन-बोर्ड होता है।

पढ़ने के लिए धन्यवाद :)

नमस्ते, अगर आपको यह लेख पसंद आया है और आप इसे अपडेट रखना चाहते हैं, तो मेरे साथ अनुसरण करें: मध्यम, जीथूब या ट्विटर

मैं एक सुस्त समुदाय चलाता हूं (जिसमें 6 अक्टूबर, 2018 तक 18 सदस्य हैं) जहां आप दूसरों की मदद कर सकते हैं या सामान्य रूप से फ्रंटएंड, बैकएंड और विकास के बारे में सहायता प्राप्त कर सकते हैं। आप इसे यहाँ शामिल कर सकते हैं।