आप शायद पहले भी वहां रहे होंगे. हम उपयोगकर्ताओं को एक मॉडल दिखाने के बीच चयन कैसे करते हैं, और हम उन्हें एक अलग, नए पृष्ठ पर कब नेविगेट करते हैं? और क्या इससे कोई फर्क पड़ता है? दरअसल, ऐसा होता है। निर्णय उपयोगकर्ताओं के प्रवाह, उनके संदर्भ, विवरण देखने की उनकी क्षमता और इसके साथ त्रुटि आवृत्ति और कार्य पूर्णता को प्रभावित करता है। दोनों विकल्प विघटनकारी और निराशाजनक हो सकते हैं - गलत समय पर, और गलत जगह पर। इसलिए बेहतर होगा कि हम इसे सही कर लें। खैर, आइए देखें कि यह कैसे करना है। मॉडल बनाम डायलॉग बनाम ओवरले बनाम लाइटबॉक्स जबकि हम अक्सर एकल मॉडल यूआई घटक के बारे में बात करते हैं, हम अक्सर सभी विभिन्न प्रकार के मॉडलों के बीच बारीक, जटिल बारीकियों को नजरअंदाज कर देते हैं। दरअसल, हर मॉडल एक जैसा नहीं होता। मॉडल, संवाद, ओवरले और लाइटबॉक्स - सभी समान लगते हैं, लेकिन वे वास्तव में काफी अलग हैं:
डायलॉग "बातचीत" (उपयोगकर्ता ↔ सिस्टम) के लिए एक सामान्य शब्द। ओवरले एक पृष्ठ के शीर्ष पर प्रदर्शित एक छोटा सामग्री पैनल। ModalUser को ओवरले + पृष्ठभूमि अक्षम के साथ इंटरैक्ट करना होगा। नॉनमॉडलयूजर को ओवरले + बैकग्राउंड सक्षम के साथ इंटरैक्ट करना होगा। मोडल पर ध्यान केंद्रित करने के लिए लाइटबॉक्सडिम्ड पृष्ठभूमि।
जैसा कि अन्ना कैली ने रेखांकित किया है, अधिकांश ओवरले गलत समय पर दिखाई देते हैं, महत्वपूर्ण कार्यों के दौरान उपयोगकर्ताओं को बाधित करते हैं, खराब भाषा का उपयोग करते हैं और उपयोगकर्ताओं के प्रवाह को तोड़ते हैं। वे स्वभाव से व्यवधानकारी होते हैं, और आम तौर पर इसकी तीव्र आवश्यकता के बिना उच्च स्तर की गंभीरता के साथ होते हैं।
निश्चित रूप से उपयोगकर्ताओं को धीमा और बाधित किया जाना चाहिए यदि उनके कार्यों के परिणामों का अधिक प्रभाव पड़ता है, लेकिन अधिकांश परिदृश्यों के लिए गैर-मॉडल बहुत अधिक सूक्ष्म होते हैं और उपयोगकर्ता के ध्यान में कुछ लाने के लिए अधिक अनुकूल विकल्प होते हैं। यदि कुछ भी हो, तो मैं हमेशा सुझाव देता हूं कि यह डिफ़ॉल्ट हो। मॉडल → एकल, स्व-निहित कार्यों के लिए डिजाइनर के रूप में, हम अक्सर तौर-तरीकों को अप्रासंगिक और कष्टप्रद कहकर खारिज कर देते हैं - और अक्सर वे होते भी हैं! - फिर भी उनका अपना मूल्य भी है। वे उपयोगकर्ताओं को संभावित गलतियों के बारे में चेतावनी देने या डेटा हानि से बचने में मदद करने में बहुत सहायक हो सकते हैं। वे पृष्ठ की वर्तमान स्थिति को बाधित किए बिना संबंधित कार्यों को करने या विवरणों को गहराई से समझने में भी मदद कर सकते हैं। लेकिन मॉडल्स का सबसे बड़ा फायदा यह है कि वे उपयोगकर्ताओं को वर्तमान स्क्रीन के संदर्भ को बनाए रखने में मदद करते हैं। इसका मतलब केवल यूआई नहीं है, बल्कि संपादित इनपुट, स्क्रॉलिंग स्थिति, अकॉर्डियन की स्थिति, फिल्टर का चयन, सॉर्टिंग इत्यादि भी है।
कभी-कभी, उपयोगकर्ताओं को किसी चयन की तुरंत पुष्टि करने की आवश्यकता होती है (उदाहरण के लिए, ऊपर दिखाए गए अनुसार फ़िल्टर) और फिर वहां से तुरंत आगे बढ़ें। ऑटो-सेव निश्चित रूप से वही हासिल कर सकता है, लेकिन इसकी हमेशा आवश्यकता या वांछित नहीं होती है। और यूआई को ब्लॉक करना अक्सर एक अच्छा विचार नहीं है। हालाँकि, मॉडल्स का उपयोग किसी भी कार्य के लिए नहीं किया जाता है। आमतौर पर, हम उनका उपयोग एकल, स्व-निहित कार्यों के लिए करते हैं जहां उपयोगकर्ताओं को कूदना चाहिए, एक कार्य पूरा करना चाहिए और फिर जहां वे थे वहां वापस लौटना चाहिए। आश्चर्य की बात नहीं है कि, वे उच्च-प्राथमिकता, छोटी बातचीत (उदाहरण के लिए, अलर्ट, विनाशकारी क्रियाएं, त्वरित पुष्टि) के लिए अच्छा काम करते हैं। जब मोडल मदद करते हैं: 🚫 मॉडल अक्सर विघटनकारी, आक्रामक और भ्रमित करने वाले होते हैं। 🚫 वे तुलना करना और कॉपी-पेस्ट करना कठिन बनाते हैं। ✅ फिर भी मॉडल उपयोगकर्ताओं को कई संदर्भों को बनाए रखने की अनुमति देते हैं। ✅ अपरिवर्तनीय त्रुटियों और डेटा हानि को रोकने के लिए उपयोगी। ✅ यदि उपयोगकर्ताओं को किसी नए पृष्ठ पर भेजना विघटनकारी होगा तो उपयोगी है। ✅ केवल एक मॉडल दिखाएं यदि उपयोगकर्ता व्यवधान को महत्व देंगे। ✅ डिफ़ॉल्ट रूप से, गैर-अवरुद्ध संवाद ("नॉनमॉडल") को प्राथमिकता दें। ✅ उपयोगकर्ताओं को बाद में संवाद को छोटा करने, छिपाने या पुनर्स्थापित करने की अनुमति दें। ✅ उपयोगकर्ताओं को धीमा करने के लिए एक मोडल का उपयोग करें, उदाहरण के लिए, जटिल इनपुट को सत्यापित करें। ✅ "बंद करें", ईएससी कुंजी के साथ एक रास्ता दें, या बॉक्स के बाहर क्लिक करें। पेज → कॉम्प्लेक्स, मल्टी-स्टेप वर्कफ़्लोज़ के लिए मोडल्स के भीतर विज़ार्ड या टैब्ड नेविगेशन बहुत अच्छी तरह से काम नहीं करता है, यहां तक कि जटिल उद्यम उत्पादों में भी - वहां, साइड पैनल या ड्रॉअर आमतौर पर बेहतर काम करते हैं। समस्याएँ तब शुरू होती हैं जब उपयोगकर्ताओं को डेटा बिंदुओं की तुलना या संदर्भ देने की आवश्यकता होती है - फिर भी मॉडल इस व्यवहार को रोकते हैं, इसलिए वे इसके बजाय एक ही पृष्ठ को कई टैब में फिर से खोलते हैं।
अधिक जटिल प्रवाह और बहु-चरणीय प्रक्रियाओं के लिए, स्टैंडअलोन पृष्ठ सबसे अच्छा काम करते हैं। पेज तब भी बेहतर काम करते हैं जब वे उपयोगकर्ता का पूरा ध्यान मांगते हैं, और पिछली स्क्रीन का संदर्भ बहुत उपयोगी नहीं होता है। और ड्रॉअर उन उप-कार्यों के लिए काम करते हैं जो एक साधारण मॉडल के लिए बहुत जटिल हैं, लेकिन उन्हें पूर्ण पृष्ठ नेविगेशन की आवश्यकता नहीं है। मोडल्स से कब बचें: 🚫त्रुटि संदेशों के लिए मोडल्स से बचें।🚫 फीचर नोटिफिकेशन के लिए मोडल्स से बचें।🚫 ऑनबोर्डिंग अनुभव के लिए मोडल्स से बचें।🚫 जटिल, लंबे बहु-चरण-कार्यों के लिए मोडल्स से बचें।🚫 एकाधिक नेस्टेड मोडल्स से बचें और इसके बजाय प्रीव/नेक्स्ट का उपयोग करें।🚫 जब तक बिल्कुल आवश्यक न हो, ऑटो-ट्रिगर मोडल्स से बचें। दोनों से बचेंबार-बार किये जाने वाले कार्यों के लिए कई जटिल, कार्य-भारी उत्पादों में, उपयोगकर्ता स्वयं को एक ही कार्य बार-बार, बार-बार निष्पादित करते हुए पाएंगे। वहां, मॉडल और नए पेज नेविगेशन दोनों घर्षण जोड़ते हैं क्योंकि वे प्रवाह को बाधित करते हैं या उपयोगकर्ताओं को सभी अलग-अलग टैब या दृश्यों के बीच लापता डेटा इकट्ठा करने के लिए मजबूर करते हैं। बहुत बार, उपयोगकर्ताओं को एक टूटा हुआ अनुभव मिलता है, जो कभी न खत्म होने वाली पुष्टियों, अतिरंजित चेतावनियों, वाचाल निर्देशों, या बस गायब संदर्भ बिंदुओं से भरा होता है। जैसा कि सॉलियस स्टेबुलिस ने उल्लेख किया है, इन परिदृश्यों में, विस्तार योग्य अनुभाग या इन-प्लेस संपादन अक्सर बेहतर काम करते हैं - वे कार्य को वर्तमान स्क्रीन पर स्थिर रखते हैं। व्यवहार में, कई परिदृश्यों में, उपयोगकर्ता अपने कार्यों को अकेले पूरा नहीं करते हैं। उन्हें डेटा देखने, मूल्यों को कॉपी-पेस्ट करने, विभिन्न स्थानों में प्रविष्टियों को परिष्कृत करने, या अपने कार्यों के दौरान समान रिकॉर्ड की समीक्षा करने की आवश्यकता होती है। कार्य के दौरान पृष्ठभूमि डेटा तक पहुंच बनाए रखने में ओवरले और ड्रॉअर अधिक सहायक होते हैं। परिणामस्वरूप, संदर्भ हमेशा अपनी जगह पर रहता है, संदर्भ या कॉपी-पेस्ट के लिए उपलब्ध होता है। उन क्षणों के लिए मोडल और पेज नेविगेशन सहेजें जहां रुकावट वास्तव में मूल्य जोड़ती है - विशेष रूप से गंभीर गलतियों को रोकने के लिए। मॉडल्स बनाम पेज: एक निर्णय वृक्ष कुछ समय पहले, रयान नेफेल्ड ने डिजाइनरों को मॉडल और पेज के बीच चयन करने में मदद करने के लिए एक बहुत ही उपयोगी मार्गदर्शिका तैयार की थी। यह एक आसान पीएनजी चीटशीट और एक Google डॉक टेम्पलेट के साथ आता है जिसमें 7 खंडों में प्रश्न विभाजित हैं। यह लंबा है, बेहद गहन है, लेकिन इसका पालन करना बहुत आसान है:
यह कठिन लग सकता है, लेकिन यह काफी सरल 4-चरणीय प्रक्रिया है:
स्क्रीन का संदर्भ। सबसे पहले, हम जांचते हैं कि क्या उपयोगकर्ताओं को अंतर्निहित स्क्रीन के संदर्भ को बनाए रखने की आवश्यकता है। कार्य की जटिलता और अवधि। सरल, केंद्रित, गैर-विचलित करने वाले कार्य एक मोडल का उपयोग कर सकते हैं, लेकिन लंबे, जटिल प्रवाह के लिए एक पृष्ठ की आवश्यकता होती है। अंतर्निहित पृष्ठ का संदर्भ। फिर, हम जांचते हैं कि क्या उपयोगकर्ताओं को अक्सर पृष्ठभूमि में डेटा को संदर्भित करने की आवश्यकता होती है या यदि कार्य एक साधारण पुष्टि या चयन है। सही ओवरले का चयन करना। अंत में, यदि ओवरले वास्तव में एक अच्छा विकल्प है, तो यह हमें मोडल या नॉनमोडल (नॉनमोडल की ओर झुकाव) के बीच चयन करने के लिए मार्गदर्शन करता है।
लपेटना जब भी संभव हो, संपूर्ण यूआई को ब्लॉक करने से बचें। एक संवाद फ़्लोटिंग है, जो आंशिक रूप से यूआई को कवर करता है, लेकिन नेविगेशन, स्क्रॉलिंग और कॉपी-पेस्ट करने की अनुमति देता है। या मोडल की सामग्री को साइड ड्रॉअर के रूप में दिखाएं। या इसके बजाय एक ऊर्ध्वाधर अकॉर्डियन का उपयोग करें। या यदि आपको बहुत अधिक विवरण दिखाने की आवश्यकता है तो उपयोगकर्ताओं को एक अलग पृष्ठ पर लाएँ। लेकिन यदि आप उपयोगकर्ताओं की दक्षता और गति को बढ़ाना चाहते हैं, तो हर कीमत पर मोडल से बचें। उपयोगकर्ताओं को धीमा करने, उनका ध्यान आकर्षित करने, गलतियों को रोकने के लिए उनका उपयोग करें। जैसा कि थेरेसी फेसेंडेन ने कहा, किसी को भी बाधित होना पसंद नहीं है, लेकिन यदि आपको ऐसा करना ही है, तो सुनिश्चित करें कि यह लागत के बिल्कुल लायक है। मिलिए "स्मार्ट इंटरफ़ेस डिज़ाइन पैटर्न" से आप स्मार्ट इंटरफ़ेस डिज़ाइन पैटर्न में मॉडल और विकल्पों के बारे में एक संपूर्ण अनुभाग पा सकते हैं, वास्तविक जीवन परियोजनाओं से 100 व्यावहारिक उदाहरणों के साथ हमारा 15 घंटे का वीडियो पाठ्यक्रम - इस वर्ष के अंत में लाइव यूएक्स प्रशिक्षण के साथ। मेगा-ड्रॉपडाउन से लेकर जटिल एंटरप्राइज़ टेबल तक सब कुछ - हर साल 5 नए सेगमेंट जोड़े जाने के साथ। निःशुल्क पूर्वावलोकन पर जाएँ. 15% छूट पाने के लिए कोड BIRDIE का उपयोग करें। स्मार्ट इंटरफ़ेस डिज़ाइन पैटर्न से मिलें, इंटरफ़ेस डिज़ाइन और यूएक्स पर हमारा वीडियो कोर्स।
वीडियो + यूएक्स प्रशिक्षणकेवल वीडियोवीडियो + यूएक्स प्रशिक्षण$495.00 $699.00
वीडियो + यूएक्स प्रशिक्षण प्राप्त करें 25 वीडियो पाठ (15 घंटे) + लाइव यूएक्स प्रशिक्षण। 100 दिन की मनी-बैक-गारंटी। केवल वीडियो$ 300.00$ 395.00
वीडियो पाठ्यक्रम 40 वीडियो पाठ (15 घंटे) प्राप्त करें। वार्षिक रूप से अपडेट किया जाता है। 2 वीडियो पाठ्यक्रमों के साथ यूएक्स बंडल के रूप में भी उपलब्ध है।
उपयोगी संसाधन
विभिन्न प्रकार के पॉपअप, अन्ना कैली द्वारा Uxcel द्वारा यूआई मॉडल डिजाइन करने के लिए सर्वोत्तम अभ्यास हम बहुत अधिक मॉडलों का उपयोग करते हैं: यूएक्स दिशानिर्देश, एड्रियन एगर द्वारा थेरेसी फेसेन्डेन द्वारा मॉडल और नॉनमॉडल डायलॉग्स आधुनिक एंटरप्राइज़ यूआई डिज़ाइन: मॉडल डायलॉग्स, जेम्स जैकब्स द्वारा डिज़ाइन सिस्टम में मॉडल
