त्यसोभए कम्बोबक्स, बहुचयन, सूचीबक्स, र ड्रपडाउन बीचको भिन्नता के हो? जबकि यी सबै UI कम्पोनेन्टहरू समान देखिन सक्छन्, तिनीहरूले फरक उद्देश्यहरू सेवा गर्छन्। छनौट प्रायः उपलब्ध विकल्पहरूको संख्या र तिनीहरूको दृश्यतामा आउँछ। तिनीहरू कसरी भिन्न छन्, तिनीहरूले कुन उद्देश्यले सेवा गर्छन्, र कसरी सही छनौट गर्ने भनेर हेरौं — बाटोमा गलतफहमी र गलत अपेक्षाहरू बेवास्ता गर्दै।
सबै सूची ढाँचाहरू समान छैनन् माथि हाइलाइट गरिएका सबै UI कम्पोनेन्टहरूसँग ठ्याक्कै एउटा कुरा समान छ: तिनीहरूले सूचीहरूसँग प्रयोगकर्ताहरूको अन्तरक्रियालाई समर्थन गर्छन्। यद्यपि, तिनीहरू अलि फरक तरिकाले गर्छन्। एक एक गरी प्रत्येकलाई हेरौं:
ड्रपडाउन → सूची यो ट्रिगर नभएसम्म लुकेको छ। कम्बोबक्स → फिल्टर गर्न टाइप गर्नुहोस् + १ विकल्प चयन गर्नुहोस्। बहुचयन → फिल्टर गर्न टाइप गर्नुहोस् + धेरै विकल्पहरू चयन गर्नुहोस्। सूचीबक्स → पूर्वनिर्धारित रूपमा देखिने सबै सूची विकल्पहरू (+ स्क्रोल)। दोहोरो सूचीबक्स → वस्तुहरू २ सूचीबक्सहरू बीच सार्नुहोस्।
अर्को शब्दमा, कम्बोबक्सले पाठ इनपुट फिल्डलाई ड्रपडाउन सूचीसँग जोड्दछ, त्यसैले प्रयोगकर्ताहरूले फिल्टर गर्न र एकल विकल्प चयन गर्न टाइप गर्न सक्छन्। Multiselect को साथ, प्रयोगकर्ताहरूले धेरै विकल्पहरू चयन गर्न सक्छन् (प्रायः चक्की वा चिप्सको रूपमा देखाइन्छ)। सूचीबक्सहरूले पूर्वनिर्धारित रूपमा देखिने सबै सूची विकल्पहरू प्रदर्शन गर्दछ, प्रायः स्क्रोलिङको साथ। यो उपयोगी हुन्छ जब प्रयोगकर्ताहरूले तुरुन्तै सबै उपलब्ध विकल्पहरू हेर्न आवश्यक छ। दोहोरो सूचीबक्स (स्थानान्तरण सूची पनि भनिन्छ) एक सूचीबक्सको एक भिन्नता हो जसले प्रयोगकर्ताहरूलाई सामान्यतया थोक चयनका लागि दुई सूचीबक्सहरू (बायाँ ↔ दायाँ) बीच वस्तुहरू सार्न अनुमति दिन्छ। बारम्बार प्रयोग हुने विकल्पहरू कहिल्यै लुकाउनुहोस् माथि उल्लेख गरिए अनुसार, सही UI कम्पोनेन्टको छनोट २ कारकहरूमा निर्भर गर्दछ: कतिवटा सूची विकल्पहरू उपलब्ध छन्, र यदि यी सबै विकल्पहरू पूर्वनिर्धारित रूपमा देखिनु आवश्यक छ भने। सबै सूचीहरूमा रूख संरचनाहरू, नेस्टिङ, र समूह चयन पनि हुन सक्छ।
त्यहाँ एउटा सिद्धान्त छ जुन मैले कुनै पनि UI कम्पोनेन्टको लागि वर्षौंदेखि अनुसरण गर्दै आएको छु: बारम्बार प्रयोग गरिएका विकल्पहरू कहिल्यै लुकाउनुहोस्। यदि प्रयोगकर्ताहरू बारम्बार एक विशेष चयनमा भर पर्छन् भने, तिनीहरूबाट लुकाउनको लागि त्यहाँ धेरै कम मूल्य छ। हामीले या त यसलाई पूर्व-चयनित बनाउन सक्छौं, वा (यदि त्यहाँ 2-3 बारम्बार प्रयोग हुने विकल्पहरू छन् भने) तिनीहरूलाई चिप्स वा बटनहरूको रूपमा देखाउनुहोस्, र त्यसपछि अन्तरक्रियामा सूचीको बाँकी भाग देखाउनुहोस्। सामान्यतया, यो सधैं लोकप्रिय विकल्पहरू प्रदर्शन गर्न राम्रो विचार हो - यदि यसले UI लाई अव्यवस्थित गर्न सक्छ। कुन कसरी छनौट गर्ने? प्रत्येक सूचीलाई जटिल चयन विधि आवश्यक पर्दैन। 5 भन्दा कम वस्तुहरू भएका सूचीहरूको लागि, साधारण रेडियो बटनहरू वा चेकबक्सहरू सामान्यतया राम्रो काम गर्छन्। तर यदि प्रयोगकर्ताहरूले विकल्पहरूको ठूलो सूचीबाट चयन गर्न आवश्यक छ (जस्तै, 200+ वस्तुहरू), कम्बोबक्स + मल्टिसेलेक्ट छिटो फिल्टरिङ (जस्तै, देश चयन) को कारणले उपयोगी छ।
सूचीबक्सहरू उपयोगी हुन्छन् जब मानिसहरूले एकैचोटि धेरै विकल्पहरू पहुँच गर्न आवश्यक पर्दछ, विशेष गरी यदि उनीहरूलाई त्यो सूचीबाट धेरै विकल्पहरू छनौट गर्न आवश्यक छ। तिनीहरू प्राय: प्रयोग गरिएका फिल्टरहरूको लागि उपयोगी हुन सक्छन्।
दोहोरो सूचीबक्स प्रायः बेवास्ता गरिन्छ र बेवास्ता गरिन्छ। तर यो जटिल कार्यहरूको लागि धेरै सहयोगी हुन सक्छ, जस्तै बल्क चयन, वा भूमिका, कार्य, जिम्मेवारी तोक्ने। यो एक मात्र UI कम्पोनेन्ट हो जसले प्रयोगकर्ताहरूलाई कमिट गर्नु अघि उनीहरूको पूर्ण चयन सूचीलाई स्रोत सूचीको साथसाथै समीक्षा गर्न अनुमति दिन्छ (जसलाई "स्थानान्तरण सूची" पनि भनिन्छ)। वास्तवमा, दोहोरो सूचीबक्स प्रायः छिटो, अधिक सटीक, र ड्र्याग-एन्ड-ड्रप भन्दा बढी पहुँचयोग्य हुन्छ। उपयोगिता विचारहरू दिमागमा राख्नको लागि एउटा महत्त्वपूर्ण नोट यो हो कि सबै सूची प्रकारहरूले पहुँचको लागि किबोर्ड नेभिगेसन (जस्तै, ↑/↓ तीर कुञ्जीहरू) समर्थन गर्न आवश्यक छ। केही व्यक्तिहरूले टाइप गर्न सुरु गरेपछि विकल्पहरू चयन गर्न लगभग सधैँ किबोर्डमा भर पर्छन्।
त्यो भन्दा पर:
7+ विकल्पहरू भएका सूचीहरूको लागि, प्रयोगकर्ता अन्तरक्रियालाई सुव्यवस्थित गर्न "सबै चयन गर्नुहोस्" र "सबै खाली गर्नुहोस्" सुविधाहरू थप्ने विचार गर्नुहोस्। कम्बोबक्सको साथ लामो सूचीहरूको लागि, क्लिक/ट्यापमा प्रयोगकर्ताहरूलाई सबै विकल्पहरू खुलासा गर्नुहोस्, अन्यथा तिनीहरू कहिल्यै नदेखिनेछन्, सबैभन्दा महत्त्वपूर्ण, भ्रमबाट बच्नको लागि बटनको रूपमा गैर-अन्तर्क्रियात्मक तत्वहरू प्रदर्शन नगर्नुहोस् — र स्थिर लेबलहरूको रूपमा अन्तरक्रियात्मक तत्वहरू प्रदर्शन नगर्नुहोस्।
र्यापिङ अप: सबै कुरा ड्रपडाउन होइन नामहरू महत्त्वपूर्ण छन्। विकल्पहरूको ठाडो सूचीलाई सामान्यतया "ड्रपडाउन" को रूपमा वर्णन गरिएको छ — तर प्रायः यो अर्थपूर्ण हुनको लागि अलि धेरै सामान्य हुन्छ। "ड्रपडाउन" ले पूर्वनिर्धारित रूपमा सूची लुकाइएको संकेत गर्दछ। "बहु चयन" ले सूची भित्र बहु-चयन (चेकबक्स) लाई जनाउँछ। "कम्बोबक्स" ले पाठ इनपुटलाई बुझाउँछ। र "सूचीबक्स" केवल चयन गर्न मिल्ने वस्तुहरूको सूची हो, सधैं देखिने। लक्ष्य यसको खातिर माथिका परिभाषाहरूसँग अनुरूप हुनु होइन। तर बरु इरादाहरू पङ्क्तिबद्ध गर्न — निर्णय गर्दा, डिजाइन गर्दा, निर्माण गर्दा, र त्यसपछि यी UI कम्पोनेन्टहरू प्रयोग गर्दा उही भाषा बोल्नुहोस्। लागि काम गर्नुपर्छसबैजना — डिजाइनरहरू, इन्जिनियरहरू, र अन्तिम प्रयोगकर्ताहरू — जबसम्म स्थिर लेबलहरू अन्तरक्रियात्मक बटनहरू जस्तो देखिँदैनन्, र रेडियो बटनहरूले चेकबक्सहरू जस्तै काम गर्दैनन्। भेट्नुहोस् "एआई इन्टरफेसका लागि डिजाइन ढाँचाहरू" AI इन्टरफेसका लागि डिजाइन ढाँचाहरू भेट्नुहोस्, Vitaly को वास्तविक जीवन उत्पादनहरूबाट व्यावहारिक उदाहरणहरू सहितको नयाँ भिडियो कोर्स — प्रत्यक्ष UX प्रशिक्षण चाँडै हुँदैछ। नि:शुल्क पूर्वावलोकनमा जानुहोस्। एआई इन्टरफेसका लागि डिजाइन ढाँचाहरू भेट्नुहोस्, इन्टरफेस डिजाइन र UX मा Vitaly को भिडियो कोर्स।
भिडियो + UX प्रशिक्षण भिडियो मात्र भिडियो + UX प्रशिक्षण$ 450.00 $ 799.00
Video + UX Training30 भिडियो पाठ (10h) + लाइभ UX Training पाउनुहोस्।100 दिनको पैसा फिर्ता-ग्यारेन्टी।भिडियो मात्र $275.00$ 395.00
भिडियो पाठ्यक्रम 30 भिडियो पाठ (10h) प्राप्त गर्नुहोस्। वार्षिक रूपमा अद्यावधिक हुन्छ। 3 भिडियो पाठ्यक्रमहरू सहितको UX बन्डलको रूपमा पनि उपलब्ध छ।
उपयोगी स्रोतहरू
स्वत: पूर्ण: UX दिशानिर्देश, Vitaly Friedman द्वारा कम्बोबक्स, eBay द्वारा 👍 कम्बोबक्स, लोचदार द्वारा कम्बोबक्स, एलिसा द्वारा Combobox, MongoDB द्वारा 👍 कम्बोबक्स, भिसा द्वारा 👍 कम्बोबक्स, वाटसन द्वारा (Docplanner) कम्बोबक्स, विकिमीडिया द्वारा कम्बोबक्स, Zendesk द्वारा बहुचयन (MongoDB कम्बोबक्स डिजाइन कागजात), MongoDB 👍 द्वारा विकिमीडियाद्वारा बहुचयन लुकअप Vaadin द्वारा बहु-चयन कम्बो बक्स भिसाद्वारा बहुचयन गर्नुहोस् स्थानान्तरण (सूचीबक्स उदाहरण), कमिला डिजाइन द्वारा Listbox, Hopper द्वारा सूची बक्स, Vaadin द्वारा लिस्टबक्स, भिसा द्वारा दोहोरो सूची चयनकर्ता, Red Hat द्वारा (PatternFly) डुअल लिस्टबक्स, सेल्सफोर्स द्वारा (लाइटनिङ डिजाइन सिस्टम) स्थानान्तरण सूची, Mantine द्वारा डुअल लिस्टबक्स, Dashlite द्वारा ब्याज बनाम गोली बनाम चिप्स बनाम ट्याग, Vitaly Friedman द्वारा लिस्टबक्स बनाम ड्रपडाउन सूची, अन्ना काले द्वारा (NN/g)
