तुम्ही कदाचित आधी तिथे आला आहात. वापरकर्त्यांना मॉडेल दाखवणे यापैकी आम्ही कसे निवडू आणि आम्ही त्यांना वेगळ्या, नवीन पृष्ठावर कधी नेव्हिगेट करू? आणि काही फरक पडतो का? वास्तविक, ते करते. निर्णय वापरकर्त्यांचा प्रवाह, त्यांचे संदर्भ, तपशील शोधण्याची त्यांची क्षमता आणि त्यासह त्रुटी वारंवारता आणि कार्य पूर्ण होण्यावर परिणाम करतो. दोन्ही पर्याय विस्कळीत आणि निराशाजनक असू शकतात — चुकीच्या वेळी आणि चुकीच्या ठिकाणी. म्हणून आम्ही ते योग्यरित्या प्राप्त करणे चांगले आहे. बरं, ते कसं करायचं ते पाहू. मॉडेल विरुद्ध संवाद वि. आच्छादन वि. लाइटबॉक्सेस आम्ही अनेकदा एकाच मॉडेल UI घटकाबद्दल बोलत असताना, आम्ही बऱ्याचदा सर्व विविध प्रकारच्या मॉडेल्समधील बारीक, गुंतागुंतीच्या बारकावे दुर्लक्षित करतो. खरं तर, प्रत्येक मॉडेल सारखे नसते. मॉडेल्स, डायलॉग्स, आच्छादन आणि लाइटबॉक्सेस — सर्व एकसारखे वाटतात, परंतु प्रत्यक्षात ते बरेच वेगळे आहेत:
संवाद "संभाषण" (वापरकर्ता ↔ सिस्टम) साठी एक सामान्य संज्ञा. आच्छादन पृष्ठाच्या शीर्षस्थानी प्रदर्शित केलेले एक लहान सामग्री पॅनेल. ModalUser ने आच्छादन + पार्श्वभूमी अक्षम केली आहे. NonmodalUser ने आच्छादन + पार्श्वभूमी सक्षम सह संवाद साधला पाहिजे. मॉडेलवर लक्ष केंद्रित करण्यासाठी लाइटबॉक्स मंद केलेली पार्श्वभूमी.
ॲना कॅले यांनी हायलाइट केल्याप्रमाणे, बहुतेक आच्छादन चुकीच्या वेळी दिसतात, वापरकर्त्यांना गंभीर कार्यांमध्ये व्यत्यय आणतात, खराब भाषा वापरतात आणि वापरकर्त्यांचा प्रवाह खंडित करतात. ते स्वभावाने व्यत्यय आणणारे असतात, आणि विशेषत: उच्च पातळीच्या तीव्रतेसह त्याची तीव्र गरज नसते.
जर वापरकर्ते त्यांच्या कृतीचे परिणाम जास्त असतील तर त्यांची गती कमी करणे आणि व्यत्यय आणणे आवश्यक आहे, परंतु बऱ्याच परिस्थितींसाठी नॉन-मॉडल अधिक सूक्ष्म आणि वापरकर्त्याच्या लक्षात आणण्यासाठी अधिक अनुकूल पर्याय आहेत. काहीही असल्यास, मी नेहमी ते डीफॉल्ट असल्याचे सुचवितो. मॉडेल्स → एकल, स्वयंपूर्ण कार्यांसाठी डिझायनर म्हणून, आम्ही अनेकदा मॉडेल्सला असंबद्ध आणि त्रासदायक म्हणून डिसमिस करतो — आणि अनेकदा ते असतात! - तरीही त्यांचे मूल्य देखील आहे. वापरकर्त्यांना संभाव्य चुकांबद्दल चेतावणी देण्यासाठी किंवा डेटा गमावण्यापासून त्यांना मदत करण्यासाठी ते खूप उपयुक्त ठरू शकतात. ते पृष्ठाच्या वर्तमान स्थितीत व्यत्यय न आणता संबंधित क्रिया करण्यास किंवा तपशीलांमध्ये ड्रिल डाउन करण्यात देखील मदत करू शकतात. परंतु मॉडेल्सचा सर्वात मोठा फायदा म्हणजे ते वापरकर्त्यांना वर्तमान स्क्रीनचा संदर्भ ठेवण्यास मदत करतात. याचा अर्थ फक्त UI नाही, तर संपादित इनपुट, स्क्रोलिंग स्थिती, ॲकॉर्डियनची स्थिती, फिल्टरची निवड, क्रमवारी इ.
काही वेळा, वापरकर्त्यांना निवडीची त्वरीत पुष्टी करावी लागते (उदा. वर दर्शविल्याप्रमाणे फिल्टर) आणि नंतर तेथून लगेच पुढे जा. स्वयं-सेव्ह अर्थातच ते साध्य करू शकते, परंतु ते नेहमीच आवश्यक किंवा इच्छित नसते. आणि UI अवरोधित करणे बऱ्याचदा चांगली कल्पना नसते. तथापि, मॉडेल कोणत्याही कार्यासाठी वापरले जात नाहीत. सामान्यतः, आम्ही त्यांचा वापर एकल, स्वयंपूर्ण कार्यांसाठी करतो जेथे वापरकर्त्यांनी उडी मारली पाहिजे, कार्य पूर्ण केले पाहिजे आणि नंतर ते जिथे होते तिथे परतले पाहिजे. आश्चर्याची गोष्ट नाही की, ते उच्च-प्राधान्य, लहान परस्परसंवादासाठी चांगले कार्य करतात (उदा. सूचना, विध्वंसक क्रिया, द्रुत पुष्टीकरण). जेव्हा मॉडेल मदत करतात: 🚫 मॉडेल्स अनेकदा व्यत्यय आणणारे, आक्रमक आणि गोंधळात टाकणारे असतात. 🚫 ते तुलना करणे आणि कॉपी-पेस्ट करणे कठीण करतात. ✅ तरीही मॉडेल्स वापरकर्त्यांना एकाधिक संदर्भ राखण्यास अनुमती देतात.✅ अपरिवर्तनीय त्रुटी आणि डेटाचे नुकसान टाळण्यासाठी उपयुक्त.✅ वापरकर्त्यांना नवीन पृष्ठावर पाठवणे व्यत्यय आणणारे असेल तर उपयुक्त. ✅ जर वापरकर्ते व्यत्ययाला महत्त्व देतील तरच एक मॉडेल दाखवा. ✅ डीफॉल्टनुसार, नॉन-ब्लॉकिंग डायलॉग्स ("नॉनमोडल्स") ला प्राधान्य द्या. पृष्ठे → जटिल, बहु-चरण कार्यप्रवाहांसाठी मॉडेल्समधील विझार्ड्स किंवा टॅब केलेले नेव्हिगेशन खूप चांगले कार्य करत नाही, अगदी जटिल एंटरप्राइझ उत्पादनांमध्ये देखील - तेथे, साइड पॅनेल्स किंवा ड्रॉर्स सामान्यत: चांगले कार्य करतात. जेव्हा वापरकर्त्यांना डेटा पॉइंट्सची तुलना करणे किंवा संदर्भ देणे आवश्यक असते तेव्हा समस्या सुरू होतात — तरीही मॉडेल्स हे वर्तन अवरोधित करतात, त्यामुळे त्याऐवजी ते समान पृष्ठ एकाधिक टॅबमध्ये पुन्हा उघडतात.
अधिक जटिल प्रवाह आणि बहु-चरण प्रक्रियांसाठी, स्वतंत्र पृष्ठे सर्वोत्तम कार्य करतात. जेव्हा पृष्ठे वापरकर्त्याचे पूर्ण लक्ष देण्याची मागणी करतात तेव्हा ते अधिक चांगले कार्य करतात आणि मागील स्क्रीनचा संदर्भ फारसा उपयुक्त नसतो. आणि ड्रॉर्स उप-कार्यांसाठी कार्य करतात जे साध्या मॉडेलसाठी खूप जटिल आहेत, परंतु संपूर्ण पृष्ठ नेव्हिगेशनची आवश्यकता नाही. मॉडेल्स कधी टाळायचे: 🚫 त्रुटी संदेशांसाठी मॉडेल टाळा.🚫 वैशिष्ट्य सूचनांसाठी मॉडेल टाळा.🚫 ऑनबोर्डिंग अनुभवासाठी मॉडेल टाळा.🚫 जटिल, लांबलचक बहु-चरण-टास्कसाठी मॉडेल टाळा.🚫 एकाधिक नेस्टेड मॉडेल टाळा आणि त्याऐवजी मागील/पुढील वापरा. दोन्ही टाळावारंवार कामांसाठी बऱ्याच जटिल, टास्क-हेवी उत्पादनांमध्ये, वापरकर्ते स्वतःला तीच कार्ये वारंवार, पुन्हा पुन्हा करताना दिसतील. तेथे, दोन्ही मॉडेल आणि नवीन पृष्ठ नेव्हिगेशन घर्षण जोडतात कारण ते प्रवाहात व्यत्यय आणतात किंवा वापरकर्त्यांना सर्व भिन्न टॅब किंवा दृश्यांमधील गहाळ डेटा गोळा करण्यास भाग पाडतात. बऱ्याचदा, वापरकर्त्यांना तुटलेला अनुभव येतो, कधीही न संपणारी पुष्टीकरणे, अतिशयोक्तीपूर्ण इशारे, वाचाळ निर्देश किंवा फक्त गहाळ संदर्भ बिंदू असतात. सॉलियस स्टेबुलिसने नमूद केल्याप्रमाणे, या परिस्थितींमध्ये, विस्तार करण्यायोग्य विभाग किंवा इन-प्लेस एडिटिंग बऱ्याचदा चांगले कार्य करते — ते कार्य वर्तमान स्क्रीनवर अँकर ठेवतात. व्यवहारात, बऱ्याच परिस्थितींमध्ये, वापरकर्ते त्यांची कार्ये एकाकीपणे पूर्ण करत नाहीत. त्यांना डेटा पाहणे, मूल्ये कॉपी-पेस्ट करणे, वेगवेगळ्या ठिकाणी नोंदी परिष्कृत करणे किंवा ते त्यांच्या कार्यांद्वारे कार्य करत असताना समान रेकॉर्डचे पुनरावलोकन करणे आवश्यक आहे. कार्यादरम्यान पार्श्वभूमी डेटामध्ये प्रवेश राखण्यासाठी आच्छादन आणि ड्रॉर्स अधिक उपयुक्त आहेत. परिणामी, संदर्भ नेहमी त्याच्या जागी राहतो, संदर्भासाठी किंवा कॉपी-पेस्टसाठी उपलब्ध असतो. मोडल आणि पृष्ठ नेव्हिगेशन अशा क्षणांसाठी जतन करा जिथे व्यत्यय खरोखर मूल्य वाढवते — विशेषतः गंभीर चुका टाळण्यासाठी. मॉडेल विरुद्ध पृष्ठे: एक निर्णय वृक्ष काही काळापूर्वी, Ryan Neufeld ने डिझाइनरना मॉडेल आणि पृष्ठे यांच्यात निवड करण्यात मदत करण्यासाठी एक अतिशय उपयुक्त मार्गदर्शक एकत्र केले. हे एक सुलभ PNG चीटशीट आणि गुगल डॉक टेम्प्लेटसह 7 विभागांमध्ये विभागलेले प्रश्नांसह येते. हे लांबलचक, अत्यंत कसून, परंतु अनुसरण करणे खूप सोपे आहे:
हे कदाचित त्रासदायक वाटेल, परंतु ही एक अगदी सोपी 4-चरण प्रक्रिया आहे:
स्क्रीनचा संदर्भ. प्रथम, आम्ही वापरकर्त्यांना अंतर्निहित स्क्रीनचा संदर्भ राखण्याची आवश्यकता आहे का ते तपासतो. कार्याची जटिलता आणि कालावधी. सोपी, लक्ष केंद्रित करणारी, विचलित न करणारी कार्ये मॉडेलचा वापर करू शकतात, परंतु दीर्घ, जटिल प्रवाहांसाठी पृष्ठ आवश्यक आहे. अंतर्निहित पृष्ठाचा संदर्भ. त्यानंतर, आम्ही वापरकर्त्यांना पार्श्वभूमीतील डेटाचा संदर्भ घेण्याची आवश्यकता आहे का किंवा कार्य एक साधी पुष्टीकरण किंवा निवड आहे का ते तपासतो. योग्य आच्छादन निवडणे. शेवटी, जर आच्छादन खरोखरच एक चांगला पर्याय असेल, तर ते आम्हाला मॉडेल किंवा नॉनमॉडल (नॉनमॉडलकडे झुकलेले) यापैकी निवडण्यासाठी मार्गदर्शन करते.
गुंडाळणे जेव्हा शक्य असेल तेव्हा, संपूर्ण UI अवरोधित करणे टाळा. डायलॉग फ्लोटिंग करा, अंशतः UI कव्हर करा, परंतु नेव्हिगेशन, स्क्रोलिंग आणि कॉपी-पेस्टिंगला अनुमती द्या. किंवा साइड ड्रॉवर म्हणून मॉडेलची सामग्री दर्शवा. किंवा त्याऐवजी उभ्या एकॉर्डियनचा वापर करा. किंवा तुम्हाला बरेच तपशील दाखवायचे असल्यास वापरकर्त्यांना वेगळ्या पृष्ठावर आणा. परंतु जर तुम्हाला वापरकर्त्यांची कार्यक्षमता आणि गती वाढवायची असेल तर, कोणत्याही किंमतीत मॉडेल टाळा. वापरकर्त्यांची गती कमी करण्यासाठी, त्यांचे लक्ष वेधण्यासाठी, चुका टाळण्यासाठी त्यांचा वापर करा. थेरेसे फेसेन्डेन यांनी नमूद केल्याप्रमाणे, कोणालाही व्यत्यय आणणे आवडत नाही, परंतु जर तुम्हाला आवश्यक असेल तर, याची खात्री करा की त्याची किंमत अगदी योग्य आहे. "स्मार्ट इंटरफेस डिझाइन पॅटर्न" ला भेटा तुम्हाला स्मार्ट इंटरफेस डिझाइन पॅटर्नमध्ये मॉडेल्स आणि पर्यायांबद्दल संपूर्ण विभाग मिळू शकेल, आमचा 15h-व्हिडिओ कोर्स वास्तविक जीवनातील प्रकल्पांमधील 100 व्यावहारिक उदाहरणांसह — या वर्षाच्या शेवटी थेट UX प्रशिक्षणासह. मेगा-ड्रॉपडाउनपासून जटिल एंटरप्राइझ टेबलपर्यंत सर्व काही — दरवर्षी 5 नवीन विभाग जोडले जातात. विनामूल्य पूर्वावलोकनावर जा. 15% सूट वाचवण्यासाठी BIRDIE कोड वापरा. स्मार्ट इंटरफेस डिझाइन पॅटर्नला भेटा, इंटरफेस डिझाइन आणि UX वर आमचा व्हिडिओ कोर्स.
व्हिडिओ + UX प्रशिक्षण केवळ व्हिडिओ व्हिडिओ + UX प्रशिक्षण$ 495.00 $ 699.00
व्हिडिओ + UX प्रशिक्षण25 व्हिडिओ धडे (15h) + थेट UX प्रशिक्षण मिळवा. 100 दिवसांची मनी-बॅक-गॅरंटी. व्हिडिओ फक्त$ 300.00$ 395.00
व्हिडिओ कोर्स40 व्हिडिओ धडे (15h) मिळवा. दरवर्षी अपडेट केले जाते. 2 व्हिडिओ कोर्ससह UX बंडल म्हणून देखील उपलब्ध.
उपयुक्त संसाधने
पॉपअपचे विविध प्रकार, अण्णा काले यांचे Uxcel द्वारे UI मॉडेल डिझाइन करण्यासाठी सर्वोत्तम पद्धती आम्ही अनेक डॅमन मॉडेल्स वापरतो: UX मार्गदर्शक तत्त्वे, Adrian Egger द्वारे मॉडेल आणि नॉनमोडल संवाद, थेरेसे फेसेंडेन यांचे मॉडर्न एंटरप्राइझ UI डिझाइन: जेम्स जेकब्सचे मॉडेल डायलॉग्स डिझाइन सिस्टम्समधील मॉडेल्स
