तो कॉम्बोबॉक्स, मल्टीसेलेक्ट, लिस्टबॉक्स और ड्रॉपडाउन के बीच क्या अंतर है? हालाँकि ये सभी यूआई घटक समान दिख सकते हैं, लेकिन वे अलग-अलग उद्देश्यों को पूरा करते हैं। चुनाव अक्सर उपलब्ध विकल्पों की संख्या और उनकी दृश्यता पर निर्भर करता है। आइए देखें कि वे कैसे भिन्न हैं, वे किस उद्देश्य को पूरा करते हैं, और सही को कैसे चुनें - रास्ते में गलतफहमी और गलत उम्मीदों से बचें।
सभी सूची पैटर्न समान नहीं हैं ऊपर हाइलाइट किए गए सभी यूआई घटकों में बिल्कुल एक बात समान है: वे सूचियों के साथ उपयोगकर्ताओं की बातचीत का समर्थन करते हैं। हालाँकि, वे ऐसा थोड़ा अलग तरीके से करते हैं। आइए एक-एक करके प्रत्येक पर नज़र डालें:
ड्रॉपडाउन → सूची ट्रिगर होने तक छिपी रहती है। कॉम्बोबॉक्स → फ़िल्टर करने के लिए टाइप करें + 1 विकल्प चुनें। बहुचयन → फ़िल्टर करने के लिए टाइप करें + कई विकल्प चुनें। सूची बॉक्स → सभी सूची विकल्प डिफ़ॉल्ट रूप से दिखाई देते हैं (+ स्क्रॉल करें)। दोहरी सूची बॉक्स → आइटम को 2 सूची बॉक्स के बीच ले जाएं।
दूसरे शब्दों में, कॉम्बोबॉक्स एक ड्रॉपडाउन सूची के साथ एक टेक्स्ट इनपुट फ़ील्ड को जोड़ता है, ताकि उपयोगकर्ता फ़िल्टर करने के लिए टाइप कर सकें और एक विकल्प चुन सकें। मल्टीसेलेक्ट के साथ, उपयोगकर्ता कई विकल्प चुन सकते हैं (अक्सर गोलियों या चिप्स के रूप में प्रदर्शित होते हैं)। सूची बॉक्स डिफ़ॉल्ट रूप से दिखाई देने वाले सभी सूची विकल्प प्रदर्शित करते हैं, अक्सर स्क्रॉलिंग के साथ। यह तब सहायक होता है जब उपयोगकर्ताओं को सभी उपलब्ध विकल्पों को तुरंत देखने की आवश्यकता होती है। दोहरी सूची बॉक्स (स्थानांतरण सूची भी कहा जाता है) एक सूची बॉक्स का एक रूप है जो उपयोगकर्ताओं को आम तौर पर थोक चयन के लिए दो सूची बॉक्स (बाएं ↔ दाएं) के बीच वस्तुओं को स्थानांतरित करने की अनुमति देता है। बार-बार उपयोग किए जाने वाले विकल्पों को कभी न छिपाएं जैसा कि ऊपर उल्लेख किया गया है, सही यूआई घटक का चुनाव 2 कारकों पर निर्भर करता है: कितने सूची विकल्प उपलब्ध हैं, और क्या इन सभी विकल्पों को डिफ़ॉल्ट रूप से दिखाई देने की आवश्यकता है। सभी सूचियों में वृक्ष संरचनाएं, घोंसला बनाना और समूह चयन भी हो सकता है।
एक सिद्धांत है जिसका मैं किसी भी यूआई घटक के लिए वर्षों से पालन कर रहा हूं: अक्सर उपयोग किए जाने वाले विकल्पों को कभी न छिपाएं। यदि उपयोगकर्ता किसी विशेष चयन पर बार-बार भरोसा करते हैं, तो उनसे इसे छिपाने का कोई महत्व नहीं है। हम या तो इसे पूर्व-चयनित कर सकते हैं, या (यदि केवल 2-3 बार-बार उपयोग किए जाने वाले विकल्प हैं) उन्हें चिप्स या बटन के रूप में दिखा सकते हैं, और फिर शेष सूची को इंटरैक्शन पर दिखा सकते हैं। सामान्य तौर पर, हमेशा लोकप्रिय विकल्प प्रदर्शित करना एक अच्छा विचार है - भले ही यह यूआई को अव्यवस्थित कर दे। कौन सा कैसे चुनें? प्रत्येक सूची को एक जटिल चयन पद्धति की आवश्यकता नहीं होती है. 5 से कम आइटम वाली सूचियों के लिए, साधारण रेडियो बटन या चेकबॉक्स आमतौर पर सबसे अच्छा काम करते हैं। लेकिन यदि उपयोगकर्ताओं को विकल्पों की एक बड़ी सूची (उदाहरण के लिए, 200+ आइटम) से चयन करने की आवश्यकता है, तो तेज़ फ़िल्टरिंग (उदाहरण के लिए, देश चयन) के कारण कॉम्बोबॉक्स + मल्टीसेलेक्ट सहायक होते हैं।
लिस्टबॉक्स तब सहायक होते हैं जब लोगों को एक साथ कई विकल्पों तक पहुंचने की आवश्यकता होती है, खासकर यदि उन्हें उस सूची से भी कई विकल्प चुनने की आवश्यकता होती है। वे अक्सर उपयोग किए जाने वाले फ़िल्टर के लिए सहायक हो सकते हैं।
दोहरी सूची बॉक्स को अक्सर नजरअंदाज कर दिया जाता है। लेकिन यह जटिल कार्यों के लिए बहुत मददगार हो सकता है, जैसे बड़े पैमाने पर चयन, या भूमिकाएँ, कार्य, जिम्मेदारियाँ सौंपना। यह एकमात्र यूआई घटक है जो उपयोगकर्ताओं को प्रतिबद्ध होने से पहले स्रोत सूची के साथ-साथ अपनी पूर्ण चयन सूची की समीक्षा करने की अनुमति देता है (जिसे "स्थानांतरण सूची" भी कहा जाता है)। वास्तव में, दोहरी सूची बॉक्स अक्सर ड्रैग-एंड-ड्रॉप की तुलना में अधिक तेज़, अधिक सटीक और अधिक सुलभ होता है। प्रयोज्यता संबंधी विचार ध्यान रखने योग्य एक महत्वपूर्ण बात यह है कि सभी सूची प्रकारों को पहुंच के लिए कीबोर्ड नेविगेशन (उदाहरण के लिए, ↑/↓ तीर कुंजियाँ) का समर्थन करना आवश्यक है। कुछ लोग टाइप करना शुरू करने के बाद विकल्पों का चयन करने के लिए लगभग हमेशा कीबोर्ड पर निर्भर रहेंगे।
उससे परे:
7+ विकल्पों वाली सूचियों के लिए, उपयोगकर्ता इंटरैक्शन को सुव्यवस्थित करने के लिए "सभी का चयन करें" और "सभी को साफ़ करें" कार्यक्षमताओं को जोड़ने पर विचार करें। कॉम्बोबॉक्स के साथ लंबी सूचियों के लिए, क्लिक/टैप पर उपयोगकर्ताओं के लिए सभी विकल्प उजागर करें, अन्यथा वे कभी नहीं देखे जा सकेंगे, सबसे महत्वपूर्ण, भ्रम से बचने के लिए गैर-इंटरैक्टिव तत्वों को बटन के रूप में प्रदर्शित न करें - और इंटरैक्टिव तत्वों को स्थिर लेबल के रूप में प्रदर्शित न करें।
समापन: हर चीज़ एक ड्रॉपडाउन नहीं है नाम मायने रखते हैं. विकल्पों की एक ऊर्ध्वाधर सूची को आम तौर पर "ड्रॉपडाउन" के रूप में वर्णित किया जाता है - लेकिन अक्सर यह सार्थक होने के लिए थोड़ा सामान्य होता है। "ड्रॉपडाउन" संकेत देता है कि सूची डिफ़ॉल्ट रूप से छिपी हुई है। "बहुचयन" का तात्पर्य किसी सूची के भीतर बहु-चयन (चेकबॉक्स) से है। "कॉम्बोबॉक्स" का तात्पर्य टेक्स्ट इनपुट से है। और "लिस्टबॉक्स" केवल चयन योग्य वस्तुओं की एक सूची है, जो हर समय दिखाई देती है। लक्ष्य केवल उपरोक्त परिभाषाओं के अनुरूप होना नहीं है। बल्कि इरादों को संरेखित करने के लिए - इन यूआई घटकों पर निर्णय लेते समय, डिज़ाइन करते समय, निर्माण करते समय और फिर उनका उपयोग करते समय एक ही भाषा बोलें। इसके लिए काम करना चाहिएहर कोई - डिज़ाइनर, इंजीनियर और अंतिम उपयोगकर्ता - जब तक स्थैतिक लेबल इंटरैक्टिव बटन की तरह नहीं दिखते हैं, और रेडियो बटन चेकबॉक्स की तरह काम नहीं करते हैं। मिलिए "एआई इंटरफेस के लिए डिज़ाइन पैटर्न" से एआई इंटरफेस के लिए डिज़ाइन पैटर्न से मिलें, वास्तविक जीवन के उत्पादों के व्यावहारिक उदाहरणों के साथ विटाली का नया वीडियो कोर्स - जल्द ही लाइव यूएक्स प्रशिक्षण के साथ। निःशुल्क पूर्वावलोकन पर जाएँ. एआई इंटरफेस के लिए डिजाइन पैटर्न से मिलें, इंटरफेस डिजाइन और यूएक्स पर विटाली का वीडियो कोर्स।
वीडियो + यूएक्स प्रशिक्षणकेवल वीडियोवीडियो + यूएक्स प्रशिक्षण$ 450.00 $799.00
वीडियो + यूएक्स प्रशिक्षण 30 वीडियो पाठ (10 घंटे) + लाइव यूएक्स प्रशिक्षण प्राप्त करें। 100 दिन की मनी-बैक-गारंटी। केवल वीडियो $ 275.00$ 395.00
वीडियो पाठ्यक्रम 30 वीडियो पाठ (10 घंटे) प्राप्त करें। वार्षिक रूप से अपडेट किया जाता है। 3 वीडियो पाठ्यक्रमों के साथ यूएक्स बंडल के रूप में भी उपलब्ध है।
उपयोगी संसाधन
स्वत: पूर्ण: यूएक्स दिशानिर्देश, विटाली फ्रीडमैन द्वारा कॉम्बोबॉक्स, ईबे द्वारा 👍 कॉम्बोबॉक्स, इलास्टिक द्वारा कॉम्बोबॉक्स, एलिसा द्वारा कॉम्बोबॉक्स, MongoDB द्वारा 👍 कॉम्बोबॉक्स, वीज़ा द्वारा 👍 कॉम्बोबॉक्स, वॉटसन द्वारा (डॉकप्लानर) कॉम्बोबॉक्स, विकिमीडिया द्वारा ज़ेंडेस्क द्वारा कॉम्बोबॉक्स मल्टीसेलेक्ट (MongoDB कॉम्बोबॉक्स डिज़ाइन डॉक्स), MongoDB द्वारा 👍 विकिमीडिया द्वारा मल्टीसेलेक्ट लुकअप वाडिन द्वारा बहु-चयन कॉम्बो बॉक्स बहुचयन, वीज़ा द्वारा स्थानांतरण (लिस्टबॉक्स उदाहरण), एंट डिज़ाइन द्वारा हॉपर द्वारा लिस्टबॉक्स वाडिन द्वारा सूची बॉक्स लिस्टबॉक्स, वीज़ा द्वारा रेड हैट द्वारा दोहरी सूची चयनकर्ता (पैटर्नफ्लाई) सेल्सफोर्स द्वारा डुअल लिस्टबॉक्स (लाइटनिंग डिज़ाइन सिस्टम) स्थानांतरण सूची, मेंटाइन द्वारा डैशलाइट द्वारा डुअल लिस्टबॉक्स विटाली फ्रीडमैन द्वारा बैज बनाम पिल्स बनाम चिप्स बनाम टैग एना कैली द्वारा लिस्टबॉक्स बनाम ड्रॉपडाउन सूचियाँ (एनएन/जी)
