👉 🐟 🧗 उपयोगकर्ता इंटरफ़ेस में मोडल विंडो का उपयोग करना 🛅 👨🏽‍🏫 👩🏼‍💼

डिजिटल उत्पाद बनाने की प्रक्रिया में कई डिजाइनर अपनी भावनाओं पर आधारित होते हैं। हालांकि यह कुछ मामलों में उपयोगी है, ऐसे सामान्य मानक सिद्ध होते हैं जो अंतर्ज्ञान पर भरोसा करने के बजाय तार्किक रूप से उपयोगकर्ता इंटरफ़ेस समाधान बनाने में मदद करते हैं।

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

हम इस अध्ययन को निम्नलिखित साहसिक कथन के साथ शुरू करते हैं:

स्क्रीन दो प्रकार की होती हैं:

मोडल स्क्रीन
मॉडल स्क्रीन

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

मोडल स्क्रीन क्या है?

मोडल स्क्रीन को इसके विभिन्न रूपों और अभ्यावेदन में पाया जा सकता है, उदाहरण के लिए, निम्न सूचीबद्ध में से एक:

पूर्ण स्क्रीन मोडल दृश्य
पॉप-अप
पॉप अप
lightboxes

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

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

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

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

IOS उदाहरण: मोबाइल उपकरणों पर मोडल विंडो अक्सर मुख्य एप्लिकेशन विंडो को पूरी तरह से छिपाते हैं।

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

मॉडल विंडो के लिए सबसे हड़ताली दृश्य संकेतक नेविगेशन है (हमारे उदाहरण में टैब बार)। मॉडल स्क्रीन उपयोगकर्ताओं को एप्लिकेशन नेविगेशन के मुख्य स्तर पर आगे और पीछे कूदने की अनुमति देती है।

हालाँकि, मोडल स्क्रीन के लिए उपयोगकर्ताओं को विंडो बंद करने से पहले आवेदन के मुख्य नेविगेशन (हमारे उदाहरण में "सेव" या "रद्द करें" बटन) का उपयोग करने की आवश्यकता होती है।

आपको विनय का उपयोग क्यों करना चाहिए?

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

"कार्य पूरा करने से पहले लोगों को अन्य कार्यों को करने से रोकने या मोडल में कहे गए दृष्टिकोण को अस्वीकार करने से" ध्यान केंद्रित करता है "- Apple

मॉड्युलिटी का उपयोग कब किया जाना चाहिए?

अब जब हम जानते हैं कि मोडल स्क्रीन कैसा दिखता है। मॉडल स्क्रीन के साथ इसकी तुलना कैसे करें और इसका उद्देश्य क्या है? सबसे पहले, हमें खुद से पूछना चाहिए: "हमें किस स्थिति में इसका इस्तेमाल करना चाहिए?"

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

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

Purrrfect उपयोगकर्ता स्ट्रीम

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

अब आपको यह समझने की जरूरत है कि इनमें से कौन सी स्क्रीन मोडल है और कौन सी नहीं? इस मामले में वर्गीकरण कठिन है, लेकिन यहाँ मेरा व्यक्तिगत नियम है:

स्टैंड-अलोन प्रक्रियाओं के लिए मोडल स्क्रीन का उपयोग करें, और बाकी सब के लिए गैर-मोडल स्क्रीन।

एक "स्वायत्त प्रक्रिया" एक विशिष्ट क्रिया है जिसकी प्रक्रिया में स्पष्ट शुरुआत और अंत बिंदु होता है।

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

Google इस नियम को इस प्रकार तैयार करता है:

"महत्वपूर्ण जानकारी के लिए विशिष्ट उपयोगकर्ता कार्य, इसके समाधान या पुष्टि" की आवश्यकता के लिए मोडल स्क्रीन (संवाद) का उपयोग करें - Google

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

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

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

आइए हमारे आवेदन पर वापस जाएं। Purrrfect के लिए एक संभावित इंटरफ़ेस इस तरह दिख सकता है:

Purrrfect उपयोगकर्ता इंटरफ़ेस

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

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

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

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

कैसे इस्तेमाल किया जाना चाहिए?

अब तक, मुझे उम्मीद है कि सामान्यता का उपयोग कब करना है, इसकी एक सामान्य समझ है। केवल एक ही प्रश्न शेष है: "हम एक आधुनिकता कैसे डिज़ाइन करते हैं?" मोडल स्क्रीन का उपयोग करने के लिए यहां एक त्वरित चेकलिस्ट दी गई है:

हमेशा शीर्ष नेविगेशन बार में मोडल विंडो (या "रद्द करें", "रद्द करें", "कम से कम") के करीब / छिपा बटन दिखाएं। जब उपयोगकर्ता खो जाता है, तो वह ऐसी विंडो को आसानी से बंद कर सकता है और एप्लिकेशन स्तर पर वापस आ सकता है जहां से मोडल विंडो को कॉल किया गया था।
IOS और Android पर रद्द बटन अक्सर नेविगेशन बार के ऊपरी बाएँ भाग में स्थित होता है। Android "X" क्लोज आइकन पसंद करता है, जबकि iOS "रद्द" बटन पसंद करता है। हालाँकि, आईओएस में आइकन बटन भी काफी सामान्य हैं।
IOS और Android में मोडल विंडो पर क्रिया पुष्टिकरण बटन डिफ़ॉल्ट रूप से नेविगेशन पैनल के ऊपरी दाएँ भाग में स्थित हैं। हालाँकि, यह प्लेसमेंट एक बड़े विकर्ण वाले उपकरणों पर उपयोगकर्ता के लिए उपलब्ध नहीं हो सकता है। इसलिए, स्क्रीन के निचले भाग में या पृष्ठ के अंत में इसका फिक्स्ड फ्लोटिंग प्लेसमेंट एक अच्छा वैकल्पिक समाधान हो सकता है।

मल्टीस्टेज मोडल विंडो

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

मुख्य कार्रवाई ("सहेजें", "लागू करें" या "जारी रखें") को स्क्रीन के निचले हिस्से में रखने के दौरान (जैसा कि पहले की सिफारिश की गई है), मोडल ब्लॉक के दूसरे चरण का ऊपरी दायां क्षेत्र हमेशा एक अतिरिक्त रद्द बटन के लिए स्थान मुक्त करता है। हालाँकि, यह बाएं से दाएं की ओर अधिक तार्किक लगता है, यह प्लेसमेंट अभी भी मोडल विंडो के लिए बच्चे (पिछले) स्क्रीन पर मोडल स्क्रीन को बंद करने की अक्षमता से बेहतर है।

निष्कर्ष

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

उपयोगकर्ता इंटरफ़ेस में मोडल विंडो का उपयोग करना