तर कॉम्बोबॉक्स, मल्टीसिलेक्ट, लिस्टबॉक्स आणि ड्रॉपडाउनमध्ये काय फरक आहे? जरी हे सर्व UI घटक सारखे दिसू शकतात, ते भिन्न उद्देश पूर्ण करतात. निवड अनेकदा उपलब्ध पर्यायांची संख्या आणि त्यांची दृश्यमानता यावर अवलंबून असते. ते कसे वेगळे आहेत, ते कोणत्या उद्देशाने काम करतात आणि योग्य ते कसे निवडायचे ते पाहू या - वाटेत गैरसमज आणि चुकीच्या अपेक्षा टाळून.
सर्व सूचीचे नमुने सारखे नसतात वर हायलाइट केलेल्या सर्व UI घटकांमध्ये एक गोष्ट समान आहे: ते वापरकर्त्यांच्या सूचीसह परस्परसंवादांना समर्थन देतात. तथापि, ते थोड्या वेगळ्या पद्धतीने करतात. चला प्रत्येकाकडे एक एक नजर टाकूया:
ड्रॉपडाउन → सूची ट्रिगर होईपर्यंत लपलेली असते. कॉम्बोबॉक्स → फिल्टर करण्यासाठी टाइप करा + 1 पर्याय निवडा. फिल्टर करण्यासाठी मल्टीसिलेक्ट → प्रकार + अनेक पर्याय निवडा. सूचीबॉक्स → सर्व सूची पर्याय डीफॉल्टनुसार दृश्यमान आहेत (+ स्क्रोल). ड्युअल लिस्टबॉक्स → 2 लिस्टबॉक्समध्ये आयटम हलवा.
दुसऱ्या शब्दांत, कॉम्बोबॉक्स टेक्स्ट इनपुट फील्ड ड्रॉपडाउन सूचीसह एकत्र करतो, त्यामुळे वापरकर्ते फिल्टर करण्यासाठी टाइप करू शकतात आणि एक पर्याय निवडू शकतात. मल्टीसिलेक्टसह, वापरकर्ते अनेक पर्याय निवडू शकतात (अनेकदा गोळ्या किंवा चिप्स म्हणून प्रदर्शित केले जातात). लिस्टबॉक्स डिफॉल्टनुसार दृश्यमान असलेले सर्व सूची पर्याय प्रदर्शित करतात, अनेकदा स्क्रोलिंगसह. जेव्हा वापरकर्त्यांना सर्व उपलब्ध पर्याय त्वरित पाहण्याची आवश्यकता असते तेव्हा ते उपयुक्त ठरते. ड्युअल लिस्टबॉक्स (ज्याला ट्रान्सफर लिस्ट देखील म्हणतात) हे लिस्टबॉक्सचे एक वेरिएशन आहे जे वापरकर्त्यांना दोन लिस्टबॉक्सेस (डावीकडे ↔ उजवीकडे) मध्ये हलविण्याची परवानगी देते, विशेषत: मोठ्या प्रमाणात निवडीसाठी. वारंवार वापरलेले पर्याय कधीही लपवू नका वर नमूद केल्याप्रमाणे, योग्य UI घटकाची निवड 2 घटकांवर अवलंबून असते: सूचीचे किती पर्याय उपलब्ध आहेत आणि हे सर्व पर्याय डीफॉल्टनुसार दृश्यमान असणे आवश्यक असल्यास. सर्व सूचींमध्ये वृक्ष रचना, घरटे आणि गट निवड देखील असू शकते.
एक तत्त्व आहे जे मी कोणत्याही UI घटकासाठी वर्षानुवर्षे पाळत आहे: वारंवार वापरलेले पर्याय कधीही लपवू नका. वापरकर्ते वारंवार एखाद्या विशिष्ट निवडीवर अवलंबून राहिल्यास, त्यांच्यापासून ते लपविण्यात फारच कमी मूल्य आहे. आम्ही एकतर ते पूर्व-निवडलेले बनवू शकतो किंवा (जर फक्त 2-3 वारंवार वापरलेले पर्याय असतील तर) त्यांना चिप्स किंवा बटणे म्हणून दाखवू शकतो आणि नंतर उर्वरित सूची परस्परसंवादावर दर्शवू शकतो. सर्वसाधारणपणे, नेहमी लोकप्रिय पर्याय प्रदर्शित करणे चांगली कल्पना आहे — जरी ते UI मध्ये गोंधळ घालत असले तरीही. कोणती निवड कशी करावी? प्रत्येक यादीला जटिल निवड पद्धतीची आवश्यकता नसते. 5 पेक्षा कमी आयटम असलेल्या सूचींसाठी, साधी रेडिओ बटणे किंवा चेकबॉक्सेस सहसा सर्वोत्तम कार्य करतात. परंतु वापरकर्त्यांना पर्यायांच्या मोठ्या सूचीमधून (उदा. 200+ आयटम) निवडण्याची आवश्यकता असल्यास, जलद फिल्टरिंगमुळे (उदा. देश निवड) कॉम्बोबॉक्स + मल्टीसिलेक्ट उपयुक्त आहेत.
जेव्हा लोकांना एकाच वेळी अनेक पर्यायांमध्ये प्रवेश करण्याची आवश्यकता असते तेव्हा सूचीबॉक्सेस उपयुक्त ठरतात, विशेषत: त्यांना त्या सूचीमधून अनेक पर्याय निवडण्याची आवश्यकता असल्यास. ते वारंवार वापरल्या जाणाऱ्या फिल्टरसाठी उपयुक्त ठरू शकतात.
ड्युअल लिस्टबॉक्सकडे अनेकदा दुर्लक्ष केले जाते आणि दुर्लक्ष केले जाते. परंतु जटिल कार्यांसाठी, उदा. मोठ्या प्रमाणात निवड करणे किंवा भूमिका, कार्ये, जबाबदाऱ्या नियुक्त करणे यासाठी ते खूप उपयुक्त ठरू शकते. हा एकमेव UI घटक आहे जो वापरकर्त्यांना कमिट करण्यापूर्वी स्त्रोत सूचीसह त्यांच्या संपूर्ण निवड सूचीचे शेजारी पुनरावलोकन करण्यास अनुमती देतो (याला "हस्तांतरण सूची" देखील म्हटले जाते). खरं तर, ड्युअल लिस्टबॉक्स अनेकदा जलद, अधिक अचूक आणि ड्रॅग-अँड-ड्रॉपपेक्षा अधिक प्रवेशयोग्य असतो. उपयोगिता विचार लक्षात ठेवण्याची एक महत्त्वाची टीप आहे की सर्व सूची प्रकारांना प्रवेशयोग्यतेसाठी कीबोर्ड नेव्हिगेशन (उदा. ↑/↓ बाण की) समर्थित करणे आवश्यक आहे. काही लोक टाइप करणे सुरू केल्यावर पर्याय निवडण्यासाठी जवळजवळ नेहमीच कीबोर्डवर अवलंबून असतात.
त्यापलीकडे:
7+ पर्यायांसह सूचीसाठी, वापरकर्ता परस्परसंवाद सुव्यवस्थित करण्यासाठी "सर्व निवडा" आणि "सर्व साफ करा" कार्यक्षमता जोडण्याचा विचार करा. कॉम्बोबॉक्ससह लांबलचक सूचींसाठी, क्लिक/टॅपवर वापरकर्त्यांसमोर सर्व पर्याय उघड करा, अन्यथा ते कधीही दिसणार नाहीत, सर्वात महत्त्वाचे, गोंधळ टाळण्यासाठी गैर-परस्परसंवादी घटक बटणे म्हणून प्रदर्शित करू नका — आणि परस्परसंवादी घटक स्थिर लेबल म्हणून प्रदर्शित करू नका.
रॅपिंग अप: सर्वकाही ड्रॉपडाउन नाही नावे महत्त्वाची. पर्यायांच्या उभ्या सूचीचे वर्णन सामान्यत: "ड्रॉपडाउन" म्हणून केले जाते — परंतु बऱ्याचदा ती अर्थपूर्ण होण्यासाठी थोडीशी सामान्य असते. "ड्रॉपडाउन" सूचित करते की सूची डीफॉल्टनुसार लपवलेली आहे. "मल्टीसिलेक्ट" चा अर्थ सूचीमधील बहु-निवड (चेकबॉक्स) आहे. "कॉम्बोबॉक्स" मजकूर इनपुट सूचित करते. आणि "लिस्टबॉक्स" ही फक्त निवडण्यायोग्य आयटमची सूची आहे, जी नेहमी दृश्यमान असते. वरील व्याख्येशी सुसंगत असणे हे ध्येय नाही. परंतु हेतू संरेखित करण्यासाठी - हे UI घटक ठरवताना, डिझाइन करताना, तयार करताना आणि नंतर वापरताना समान भाषा बोला. त्यासाठी काम केले पाहिजेप्रत्येकजण — डिझाइनर, अभियंते आणि अंतिम वापरकर्ते — जोपर्यंत स्थिर लेबले परस्परसंवादी बटणांसारखी दिसत नाहीत आणि रेडिओ बटणे चेकबॉक्सप्रमाणे काम करत नाहीत. भेटा “एआय इंटरफेससाठी डिझाइन पॅटर्न” AI इंटरफेससाठी डिझाइन पॅटर्नला भेटा, Vitaly चा नवीन व्हिडिओ कोर्स वास्तविक जीवनातील उत्पादनांमधील व्यावहारिक उदाहरणांसह — एक थेट UX प्रशिक्षण लवकरच होणार आहे. विनामूल्य पूर्वावलोकनावर जा. एआय इंटरफेससाठी डिझाइन पॅटर्नला भेटा, इंटरफेस डिझाइन आणि यूएक्सवर विटालीचा व्हिडिओ कोर्स.
व्हिडिओ + UX प्रशिक्षण केवळ व्हिडिओ व्हिडिओ + UX प्रशिक्षण$ 450.00 $ 799.00
व्हिडिओ + UX प्रशिक्षण30 व्हिडिओ धडे (10h) + थेट UX प्रशिक्षण मिळवा. 100 दिवसांची मनी-बॅक-गॅरंटी. व्हिडिओ फक्त$ 275.00$ 395.00
व्हिडिओ कोर्स 30 व्हिडिओ धडे (10h) मिळवा. दरवर्षी अपडेट केले जाते. 3 व्हिडिओ कोर्ससह UX बंडल म्हणून देखील उपलब्ध.
उपयुक्त संसाधने
स्वयंपूर्ण: UX मार्गदर्शक तत्त्वे, Vitaly Friedman द्वारे कॉम्बोबॉक्स, eBay द्वारे 👍 कॉम्बोबॉक्स, लवचिक द्वारे कॉम्बोबॉक्स, एलिसा द्वारे कॉम्बोबॉक्स, MongoDB द्वारे 👍 कॉम्बोबॉक्स, व्हिसा द्वारे 👍 कॉम्बोबॉक्स, वॉटसन (डॉकप्लॅनर) द्वारे कॉम्बोबॉक्स, विकिमीडिया द्वारे कॉम्बोबॉक्स, झेंडेस्क द्वारे मोंगोडीबी द्वारे मल्टीसिलेक्ट (मोंगोडीबी कॉम्बोबॉक्स डिझाइन डॉक्स). विकिमीडिया द्वारे मल्टीसिलेक्ट लुकअप Vaadin द्वारे मल्टी-सिलेक्ट कॉम्बो बॉक्स व्हिसा द्वारे मल्टीसिलेक्ट एंट डिझाइनद्वारे हस्तांतरण (लिस्टबॉक्सचे उदाहरण). लिस्टबॉक्स, हॉपर द्वारे सूची बॉक्स, वादिन द्वारे लिस्टबॉक्स, व्हिसा द्वारे रेड हॅट (पॅटर्नफ्लाय) द्वारे ड्युअल लिस्ट सिलेक्टर ड्युअल लिस्टबॉक्स, सेल्सफोर्स (लाइटनिंग डिझाइन सिस्टम) हस्तांतरित यादी, मॅन्टाइन द्वारे ड्युअल लिस्टबॉक्स, डॅशलाइटद्वारे बॅज विरुद्ध गोळ्या विरुद्ध चिप्स विरुद्ध टॅग्ज, विटाली फ्रीडमन द्वारे लिस्टबॉक्स वि. ड्रॉपडाउन सूची, अण्णा काले (NN/g) द्वारे
