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