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