तपाईं सायद त्यहाँ पहिले हुनुहुन्थ्यो। हामी प्रयोगकर्ताहरूलाई मोडल देखाउने बीच कसरी छनौट गर्छौं, र हामीले तिनीहरूलाई छुट्टै, नयाँ पृष्ठमा कहिले नेभिगेट गर्छौं? र यो सबै फरक छ? वास्तवमा, यसले गर्छ। निर्णयले प्रयोगकर्ताहरूको प्रवाह, तिनीहरूको सन्दर्भ, विवरणहरू हेर्ने तिनीहरूको क्षमता, र यसको साथ त्रुटि आवृत्ति र कार्य पूरा गर्न प्रभाव पार्छ। दुबै विकल्पहरू विघटनकारी र निराशाजनक हुन सक्छन् - गलत समयमा, र गलत ठाउँमा। त्यसोभए हामीले यसलाई सही बनाउनु राम्रो हुन्छ। ठीक छ, हेरौं कि कसरी गर्ने। मोडलहरू बनाम संवादहरू बनाम ओभरलेहरू बनाम लाइटबक्सहरू जब हामी प्राय: एकल मोडल UI कम्पोनेन्टको बारेमा बोल्छौं, हामी प्रायः सबै विभिन्न प्रकारका मोडलहरू बीचको राम्रो, जटिल सूक्ष्मताहरूलाई बेवास्ता गर्छौं। वास्तवमा, हरेक मोडल समान छैन। मोडलहरू, संवादहरू, ओभरलेहरू, र लाइटबक्सहरू - सबै समान लाग्दछन्, तर तिनीहरू वास्तवमा एकदम फरक छन्:
DialogA "वार्तालाप" (प्रयोगकर्ता ↔ प्रणाली) को लागी सामान्य शब्द। ओभरले एउटा सानो सामग्री प्यानल पृष्ठको शीर्षमा प्रदर्शित हुन्छ। ModalUser ले ओभरले + पृष्ठभूमि असक्षम पारेको हुनुपर्छ। NonmodalUser ले ओभरले + पृष्ठभूमि सक्षमसँग अन्तरक्रिया गर्नुपर्छ। मोडलमा ध्यान केन्द्रित गर्नको लागि लाइटबक्स डिम गरिएको पृष्ठभूमि।
अन्ना कालेले हाइलाइट गरेझैं, धेरैजसो ओभरलेहरू गलत समयमा देखा पर्छन्, प्रयोगकर्ताहरूलाई महत्त्वपूर्ण कार्यहरूमा बाधा पुर्याउँछन्, खराब भाषा प्रयोग गर्छन्, र प्रयोगकर्ताहरूको प्रवाह तोड्छन्। तिनीहरू प्रकृति द्वारा अवरोधकारी छन्, र सामान्यतया उच्च स्तरको गम्भीरताको साथ यसको लागि बलियो आवश्यकता बिना।
पक्कै पनि प्रयोगकर्ताहरूलाई ढिलो र अवरोध गरिनु पर्छ यदि तिनीहरूको कार्यको परिणामहरूले उच्च प्रभाव पार्छ, तर धेरै परिदृश्यहरूको लागि गैर-मोडलहरू धेरै सूक्ष्म हुन्छन् र प्रयोगकर्ताको ध्यानमा केहि ल्याउनको लागि अधिक अनुकूल विकल्प हो। यदि केहि छ भने, म सधैं यसलाई पूर्वनिर्धारित हुन सुझाव दिन्छु। मोडलहरू → एकल, आत्म-निहित कार्यहरूको लागि डिजाइनरहरूको रूपमा, हामी प्रायः मोडलहरूलाई अप्रासंगिक र कष्टप्रद भनी खारेज गर्छौं — र प्रायः तिनीहरू हुन्छन्! - यद्यपि तिनीहरूको मूल्य पनि छ। तिनीहरू प्रयोगकर्ताहरूलाई सम्भावित गल्तीहरूको बारेमा चेतावनी दिन वा डेटा हानिबाट बच्न मद्दत गर्न धेरै उपयोगी हुन सक्छन्। तिनीहरूले सम्बन्धित कार्यहरू गर्न वा पृष्ठको हालको अवस्थालाई अवरोध नगरी विवरणहरूमा ड्रिल गर्न मद्दत गर्न सक्छन्। तर मोडलहरूको सबैभन्दा ठूलो फाइदा यो हो कि यसले प्रयोगकर्ताहरूलाई हालको स्क्रिनको सन्दर्भ राख्न मद्दत गर्दछ। यसको मतलब केवल UI होइन, तर सम्पादन गरिएको इनपुट, स्क्रोलिङ स्थिति, accordions को स्थिति, फिल्टरहरूको चयन, क्रमबद्ध, र यस्तै।
कहिलेकाहीँ, प्रयोगकर्ताहरूले छिट्टै चयन पुष्टि गर्न आवश्यक छ (जस्तै, माथि देखाइएको फिल्टरहरू) र त्यसपछि त्यहाँबाट तुरुन्तै अगाडि बढ्नुहोस्। स्वत: बचतले पक्कै पनि त्यस्तै हासिल गर्न सक्छ, तर यो सधैं आवश्यक वा चाहिने छैन। र UI अवरुद्ध अक्सर एक राम्रो विचार होइन। यद्यपि, मोडलहरू कुनै पनि कार्यका लागि प्रयोग गरिँदैनन्। सामान्यतया, हामी तिनीहरूलाई एकल, आत्म-निहित कार्यहरूको लागि प्रयोग गर्छौं जहाँ प्रयोगकर्ताहरू हाम फाल्नुपर्छ, कार्य पूरा गर्नुपर्छ, र त्यसपछि तिनीहरू जहाँ थिए त्यहाँ फर्कनु पर्छ। आश्चर्यजनक रूपमा, तिनीहरूले उच्च प्राथमिकता, छोटो अन्तरक्रियाहरू (जस्तै, अलर्टहरू, विनाशकारी कार्यहरू, द्रुत पुष्टिकरणहरू) को लागि राम्रोसँग काम गर्छन्। जब मोडलहरूले मद्दत गर्दछ: 🚫 मोडलहरू प्रायः विघटनकारी, आक्रामक र भ्रामक हुन्छन्। 🚫 तिनीहरूले तुलना गर्न र प्रतिलिपि टाँस्न गाह्रो बनाउँछन्। ✅ तर मोडलहरूले प्रयोगकर्ताहरूलाई धेरै सन्दर्भहरू कायम राख्न अनुमति दिन्छ। ✅ अपरिवर्तनीय त्रुटिहरू र डेटा हानि रोक्नको लागि उपयोगी। ✅ प्रयोगकर्ताहरूले अवरोधको कदर गरेमा मात्र मोडल देखाउनुहोस्। ✅ पूर्वनिर्धारित रूपमा, गैर-ब्लकिङ संवादहरूलाई प्राथमिकता दिनुहोस् ("nonmodals")।✅ प्रयोगकर्ताहरूलाई पछि संवादलाई कम गर्न, लुकाउन वा पुनर्स्थापना गर्न अनुमति दिनुहोस्। ✅ प्रयोगकर्ताहरूलाई ढिलो गर्न मोडल प्रयोग गर्नुहोस्, जस्तै, जटिल इनपुट प्रमाणित गर्नुहोस्। पृष्ठहरू → जटिल, बहु-चरण कार्यप्रवाहहरूको लागि विजार्डहरू वा मोडलहरू भित्र ट्याब गरिएको नेभिगेसनले धेरै राम्रोसँग काम गर्दैन, जटिल उद्यम उत्पादनहरूमा पनि - त्यहाँ, साइड प्यानल वा दराजहरूले सामान्यतया राम्रो काम गर्दछ। प्रयोगकर्ताहरूले डेटा बिन्दुहरू तुलना गर्न वा सन्दर्भ गर्न आवश्यक हुँदा समस्याहरू सुरु हुन्छन् — तर मोडलहरूले यो व्यवहारलाई रोक्छन्, त्यसैले तिनीहरूले एउटै पृष्ठलाई धेरै ट्याबहरूमा पुन: खोल्छन्।
थप जटिल प्रवाह र बहु-चरण प्रक्रियाहरूको लागि, स्ट्यान्डअलोन पृष्ठहरूले राम्रो काम गर्दछ। पृष्ठहरूले पनि राम्रो काम गर्दछ जब तिनीहरूले प्रयोगकर्ताको पूर्ण ध्यान माग्छन्, र अघिल्लो स्क्रिनको सन्दर्भ धेरै उपयोगी छैन। र ड्रअरहरूले उप-कार्यहरूको लागि काम गर्दछ जुन साधारण मोडलको लागि धेरै जटिल छ, तर पूर्ण पृष्ठ नेभिगेसन आवश्यक पर्दैन। कहिले मोडलबाट बच्ने: 🚫 त्रुटि सन्देशहरूका लागि मोडलहरू बेवास्ता गर्नुहोस्।🚫 सुविधा सूचनाहरूका लागि मोडलहरू बेवास्ता गर्नुहोस्।🚫 अनबोर्डिङ अनुभवका लागि मोडलहरू बेवास्ता गर्नुहोस्।🚫 जटिल, लामो बहु-चरण-कार्यहरूका लागि मोडलहरू वेवास्ता गर्नुहोस्। दुबैबाट बच्नुहोस्दोहोरिने कार्यहरूको लागि धेरै जटिल, कार्य-भारी उत्पादनहरूमा, प्रयोगकर्ताहरूले आफूलाई बारम्बार, बारम्बार एउटै कार्यहरू प्रदर्शन गरेको भेट्टाउनेछन्। त्यहाँ, दुबै मोडलहरू र नयाँ पृष्ठ नेभिगेसनहरूले घर्षण थप्छन् किनभने तिनीहरूले प्रवाहमा बाधा पुर्याउँछन् वा प्रयोगकर्ताहरूलाई सबै फरक ट्याबहरू वा दृश्यहरू बीच छुटेको डेटा सङ्कलन गर्न बाध्य पार्छन्। प्रायः, प्रयोगकर्ताहरूले टुटेको अनुभवको साथ समाप्त हुन्छन्, कहिल्यै अन्त्य नहुने पुष्टिकरणहरू, अतिरंजित चेतावनीहरू, वर्बोज निर्देशनहरू, वा केवल सन्दर्भ बिन्दुहरू छुटेका छन्। Saulius Stebulis ले उल्लेख गरेझैं, यी परिदृश्यहरूमा, विस्तार गर्न सकिने खण्डहरू वा इन-प्लेस सम्पादनले प्राय: राम्रो काम गर्छ - तिनीहरूले कार्यलाई हालको स्क्रिनमा लंगर राख्छन्। अभ्यासमा, धेरै परिदृश्यहरूमा, प्रयोगकर्ताहरूले अलगावमा आफ्नो कार्यहरू पूरा गर्दैनन्। तिनीहरूले डेटा हेर्न, प्रतिलिपि टाँस्ने मानहरू, विभिन्न ठाउँहरूमा प्रविष्टिहरू परिष्कृत गर्न, वा तिनीहरूको कार्यहरू मार्फत काम गर्दा समान रेकर्डहरू समीक्षा गर्न आवश्यक छ। ओभरले र ड्रअरहरू कार्यको क्रममा पृष्ठभूमि डेटामा पहुँच कायम राख्न थप सहयोगी हुन्छन्। नतिजाको रूपमा, सन्दर्भ सधैं आफ्नो स्थानमा रहन्छ, सन्दर्भ वा प्रतिलिपि टाँस्नको लागि उपलब्ध छ। मोडलहरू र पृष्ठ नेभिगेसन क्षणहरूको लागि बचत गर्नुहोस् जहाँ अवरोधले वास्तविक रूपमा मूल्य थप्छ — विशेष गरी महत्वपूर्ण गल्तीहरू रोक्न। मोडल बनाम पृष्ठहरू: एक निर्णय रूख केही समय अघि, Ryan Neufeld ले डिजाइनरहरूलाई मोडल र पृष्ठहरू बीचमा छनोट गर्न मद्दत गर्नको लागि एक धेरै उपयोगी गाइड राखे। यो एक उपयोगी PNG चीटसिट र 7 खण्डहरूमा विभाजित प्रश्नहरूको साथ Google कागजात टेम्प्लेटको साथ आउँछ। यो लामो, अत्यन्तै गहन, तर पछ्याउन धेरै सजिलो छ:
यो डरलाग्दो लाग्न सक्छ, तर यो एकदम सरल 4-चरण प्रक्रिया हो:
स्क्रिनको सन्दर्भ।पहिले, हामी प्रयोगकर्ताहरूले अन्तर्निहित स्क्रिनको सन्दर्भलाई कायम राख्न आवश्यक छ कि छैन भनेर जाँच गर्छौं। कार्यको जटिलता र अवधि। सरल, केन्द्रित, ध्यान भंग नगर्ने कार्यहरूले मोडल प्रयोग गर्न सक्छ, तर लामो, जटिल प्रवाहहरूलाई पृष्ठ चाहिन्छ। अन्तर्निहित पृष्ठको सन्दर्भ। त्यसपछि, हामी जाँच गर्छौं कि प्रयोगकर्ताहरूले प्राय: पृष्ठभूमिमा डेटा सन्दर्भ गर्न आवश्यक छ वा यदि कार्य एक साधारण पुष्टिकरण वा चयन हो। सही ओभरले छनोट गर्दै।अन्तमा, यदि ओभरले साँच्चै राम्रो विकल्प हो भने, यसले हामीलाई मोडल वा ननमोडल (ननमोडलतर्फ झुकाव) बीच छनौट गर्न मार्गदर्शन गर्छ।
लपेट्दै सम्भव भएसम्म, सम्पूर्ण UI अवरुद्ध नगर्नुहोस्। UI लाई आंशिक रूपमा कभर गर्ने, तर नेभिगेसन, स्क्रोलिङ, र प्रतिलिपि टाँस्ने अनुमति दिँदै संवाद फ्लोटिंग गर्नुहोस्। वा मोडलका सामग्रीहरूलाई साइड ड्रअरको रूपमा देखाउनुहोस्। वा यसको सट्टा ठाडो एकॉर्डियन प्रयोग गर्नुहोस्। वा यदि तपाईंलाई धेरै विवरणहरू देखाउन आवश्यक छ भने प्रयोगकर्ताहरूलाई छुट्टै पृष्ठमा ल्याउनुहोस्। तर यदि तपाइँ प्रयोगकर्ताहरूको दक्षता र गति बढाउन चाहनुहुन्छ भने, सबै मूल्यहरूमा मोडलहरू बेवास्ता गर्नुहोस्। प्रयोगकर्ताहरूलाई ढिलो गर्न, उनीहरूको ध्यान बन्डल गर्न, गल्तीहरू रोक्न तिनीहरूलाई प्रयोग गर्नुहोस्। थेरेसे फेसेन्डनले उल्लेख गरेझैं, कसैले पनि अवरोध गर्न मन पराउँदैन, तर यदि तपाईंले आवश्यक छ भने, यो निश्चित रूपमा लागतको लायक छ। "स्मार्ट इन्टरफेस डिजाइन पैटर्न" लाई भेट्नुहोस् तपाईंले स्मार्ट इन्टरफेस डिजाइन ढाँचाहरूमा मोडलहरू र विकल्पहरू बारे सम्पूर्ण खण्डहरू फेला पार्न सक्नुहुन्छ, हाम्रो 15h-भिडियो पाठ्यक्रम वास्तविक-जीवन परियोजनाहरूबाट 100s व्यावहारिक उदाहरणहरू सहित — यस वर्ष पछि प्रत्यक्ष UX प्रशिक्षणको साथ। मेगा-ड्रपडाउनदेखि जटिल इन्टरप्राइज टेबुलहरूमा सबै कुरा — प्रत्येक वर्ष ५ नयाँ खण्डहरू थपिन्छन्। नि:शुल्क पूर्वावलोकनमा जानुहोस्। 15% छुट बचत गर्न कोड BIRDIE प्रयोग गर्नुहोस्। स्मार्ट इन्टरफेस डिजाइन ढाँचाहरू भेट्नुहोस्, इन्टरफेस डिजाइन र UX मा हाम्रो भिडियो पाठ्यक्रम।
भिडियो + UX प्रशिक्षण भिडियो मात्र भिडियो + UX प्रशिक्षण$ ४९५.०० $ ६९९.००
Video + UX Training25 भिडियो पाठ (15h) + लाइभ UX Training पाउनुहोस्।100 दिनको पैसा फिर्ता-ग्यारेन्टी।भिडियो मात्र $300.00$ 395.00
भिडियो कोर्स ४० भिडियो पाठ (१५ घन्टा) पाउनुहोस्। वार्षिक रूपमा अद्यावधिक हुन्छ। २ भिडियो पाठ्यक्रमहरू सहितको UX बन्डलको रूपमा पनि उपलब्ध छ।
उपयोगी स्रोतहरू
पपअप को विभिन्न प्रकार, अन्ना Kaley द्वारा Uxcel द्वारा UI मोडलहरू डिजाइन गर्नका लागि उत्तम अभ्यासहरू हामी धेरै धेरै धिक्कार मोडलहरू प्रयोग गर्छौं: एड्रियन एगर द्वारा UX दिशानिर्देश मोडल र ननमोडल संवाद, थेरेसे फेसेन्डेन द्वारा आधुनिक उद्यम UI डिजाइन: मोडल संवाद, जेम्स जेकब्स द्वारा डिजाइन प्रणालीमा मोडलहरू
