તો કોમ્બોબોક્સ, મલ્ટીસિલેક્ટ, લિસ્ટબોક્સ અને ડ્રોપડાઉન વચ્ચે શું તફાવત છે? જ્યારે આ બધા UI ઘટકો સમાન દેખાઈ શકે છે, તેઓ જુદા જુદા હેતુઓ પૂરા કરે છે. પસંદગી ઘણીવાર ઉપલબ્ધ વિકલ્પોની સંખ્યા અને તેમની દૃશ્યતા પર આવે છે. ચાલો જોઈએ કે તેઓ કેવી રીતે અલગ પડે છે, તેઓ કયા હેતુ માટે સેવા આપે છે અને યોગ્ય એક કેવી રીતે પસંદ કરવી — રસ્તામાં ગેરસમજણો અને ખોટી અપેક્ષાઓ ટાળવી.
બધી સૂચિ પેટર્ન સમાન નથી ઉપર દર્શાવેલ તમામ UI ઘટકોમાં એક વસ્તુ સામાન્ય છે: તેઓ યાદીઓ સાથે વપરાશકર્તાઓની ક્રિયાપ્રતિક્રિયાઓને સમર્થન આપે છે. જો કે, તેઓ આવું થોડું અલગ રીતે કરે છે. ચાલો દરેક પર એક નજર કરીએ, એક પછી એક:
ડ્રૉપડાઉન → સૂચિ ટ્રિગર ન થાય ત્યાં સુધી છુપાયેલ છે. કોમ્બોબોક્સ → ફિલ્ટર કરવા માટે ટાઇપ કરો + 1 વિકલ્પ પસંદ કરો. બહુપસંદ કરો → ફિલ્ટર કરવા માટે પ્રકાર + ઘણા વિકલ્પો પસંદ કરો. લિસ્ટબૉક્સ → બધા સૂચિ વિકલ્પો મૂળભૂત રીતે દૃશ્યમાન છે (+ સ્ક્રોલ). ડ્યુઅલ લિસ્ટબોક્સ → આઇટમ્સને 2 લિસ્ટબોક્સ વચ્ચે ખસેડો.
બીજા શબ્દોમાં કહીએ તો, કોમ્બોબોક્સ ટેક્સ્ટ ઇનપુટ ફીલ્ડને ડ્રોપડાઉન સૂચિ સાથે જોડે છે, જેથી વપરાશકર્તાઓ ફિલ્ટર કરવા માટે ટાઇપ કરી શકે અને એક વિકલ્પ પસંદ કરી શકે. મલ્ટિસિલેક્ટ સાથે, વપરાશકર્તાઓ ઘણા વિકલ્પો પસંદ કરી શકે છે (ઘણી વખત ગોળીઓ અથવા ચિપ્સ તરીકે પ્રદર્શિત થાય છે). લિસ્ટબૉક્સ ડિફૉલ્ટ રૂપે દૃશ્યમાન તમામ સૂચિ વિકલ્પો પ્રદર્શિત કરે છે, ઘણીવાર સ્ક્રોલ કરીને. જ્યારે વપરાશકર્તાઓને તરત જ બધી ઉપલબ્ધ પસંદગીઓ જોવાની જરૂર હોય ત્યારે તે મદદરૂપ થાય છે. ડ્યુઅલ લિસ્ટબૉક્સ (જેને ટ્રાન્સફર લિસ્ટ પણ કહેવાય છે) એ લિસ્ટબૉક્સની વિવિધતા છે જે વપરાશકર્તાઓને સામાન્ય રીતે બલ્ક સિલેક્શન માટે બે લિસ્ટબૉક્સ (ડાબે ↔ જમણે) વચ્ચે આઇટમ ખસેડવાની મંજૂરી આપે છે. વારંવાર ઉપયોગમાં લેવાતા વિકલ્પો ક્યારેય છુપાવશો નહીં ઉપર જણાવ્યા મુજબ, યોગ્ય UI ઘટકની પસંદગી 2 પરિબળો પર આધારિત છે: કેટલા સૂચિ વિકલ્પો ઉપલબ્ધ છે, અને જો આ બધા વિકલ્પો મૂળભૂત રીતે દૃશ્યમાન હોવા જરૂરી છે. બધી સૂચિઓમાં વૃક્ષની રચના, માળો અને જૂથ પસંદગી પણ હોઈ શકે છે.
એક સિદ્ધાંત છે જે હું કોઈપણ UI ઘટક માટે વર્ષોથી અનુસરી રહ્યો છું: વારંવાર ઉપયોગમાં લેવાતા વિકલ્પોને ક્યારેય છુપાવશો નહીં. જો વપરાશકર્તાઓ વારંવાર ચોક્કસ પસંદગી પર આધાર રાખે છે, તો તેમની પાસેથી તેને છુપાવવામાં બહુ ઓછું મૂલ્ય છે. અમે કાં તો તેને પૂર્વ-પસંદ કરી શકીએ છીએ, અથવા (જો ત્યાં ફક્ત 2-3 વારંવાર ઉપયોગમાં લેવાતા વિકલ્પો હોય તો) તેમને ચિપ્સ અથવા બટનો તરીકે બતાવી શકીએ છીએ, અને પછી બાકીની સૂચિ ક્રિયાપ્રતિક્રિયા પર બતાવી શકીએ છીએ. સામાન્ય રીતે, લોકપ્રિય વિકલ્પો હંમેશા પ્રદર્શિત કરવા તે એક સારો વિચાર છે — ભલે તે UI ને અવ્યવસ્થિત કરી શકે. કઈ રીતે પસંદ કરવું? દરેક સૂચિને જટિલ પસંદગી પદ્ધતિની જરૂર નથી. 5 કરતાં ઓછી આઇટમ ધરાવતી સૂચિઓ માટે, સાદા રેડિયો બટનો અથવા ચેકબોક્સ સામાન્ય રીતે શ્રેષ્ઠ કામ કરે છે. પરંતુ જો વપરાશકર્તાઓને વિકલ્પોની મોટી સૂચિમાંથી પસંદ કરવાની જરૂર હોય (દા.ત., 200+ આઇટમ), કોમ્બોબૉક્સ + મલ્ટિસેલેક્ટ ઝડપી ફિલ્ટરિંગ (દા.ત., દેશની પસંદગી)ને કારણે મદદરૂપ થાય છે.
જ્યારે લોકોને એકસાથે ઘણા વિકલ્પો ઍક્સેસ કરવાની જરૂર હોય ત્યારે લિસ્ટબોક્સ મદદરૂપ થાય છે, ખાસ કરીને જો તેમને તે સૂચિમાંથી પણ ઘણા વિકલ્પો પસંદ કરવાની જરૂર હોય. તેઓ વારંવાર ઉપયોગમાં લેવાતા ફિલ્ટર્સ માટે મદદરૂપ થઈ શકે છે.
ડ્યુઅલ લિસ્ટબૉક્સને ઘણીવાર અવગણવામાં આવે છે અને અવગણવામાં આવે છે. પરંતુ તે જટિલ કાર્યો માટે ખૂબ જ મદદરૂપ થઈ શકે છે, દા.ત. બલ્ક પસંદગી, અથવા ભૂમિકાઓ, કાર્યો, જવાબદારીઓ સોંપવા. તે એકમાત્ર UI ઘટક છે જે વપરાશકર્તાઓને પ્રતિબદ્ધતા પહેલાં સ્રોત સૂચિ સાથે તેમની સંપૂર્ણ પસંદગી સૂચિની સાથે-સાથે સમીક્ષા કરવાની મંજૂરી આપે છે (જેને "ટ્રાન્સફર સૂચિ" પણ કહેવાય છે). વાસ્તવમાં, ડ્યુઅલ લિસ્ટબૉક્સ ઘણીવાર ઝડપી, વધુ સચોટ અને ડ્રેગ-એન્ડ-ડ્રોપ કરતાં વધુ ઍક્સેસિબલ હોય છે. ઉપયોગિતા વિચારણાઓ ધ્યાનમાં રાખવાની એક મહત્વની નોંધ એ છે કે તમામ સૂચિ પ્રકારોને ઍક્સેસિબિલિટી માટે કીબોર્ડ નેવિગેશન (દા.ત. ↑/↓ એરો કી)ને સપોર્ટ કરવાની જરૂર છે. કેટલાક લોકો એકવાર ટાઇપ કરવાનું શરૂ કરે તે પછી વિકલ્પો પસંદ કરવા માટે લગભગ હંમેશા કીબોર્ડ પર આધાર રાખે છે.
તે ઉપરાંત:
7+ વિકલ્પો સાથેની સૂચિઓ માટે, વપરાશકર્તાની ક્રિયાપ્રતિક્રિયાને સુવ્યવસ્થિત કરવા માટે "બધા પસંદ કરો" અને "બધા સાફ કરો" કાર્યક્ષમતા ઉમેરવાનું વિચારો. કોમ્બોબોક્સ સાથેની લાંબી યાદીઓ માટે, ક્લિક/ટૅપ પર વપરાશકર્તાઓ સમક્ષ તમામ વિકલ્પોનો ખુલાસો કરો, કારણ કે અન્યથા તેઓ ક્યારેય જોઈ શકાશે નહીં, સૌથી અગત્યનું, મૂંઝવણ ટાળવા માટે બિન-અરસપરસ તત્વોને બટન તરીકે પ્રદર્શિત કરશો નહીં — અને ઇન્ટરેક્ટિવ ઘટકોને સ્થિર લેબલ તરીકે દર્શાવશો નહીં.
રેપિંગ અપ: બધું જ ડ્રોપડાઉન નથી નામો મહત્વપૂર્ણ છે. વિકલ્પોની ઊભી સૂચિને સામાન્ય રીતે "ડ્રોપડાઉન" તરીકે વર્ણવવામાં આવે છે — પરંતુ ઘણી વખત તે અર્થપૂર્ણ બનવા માટે થોડી ઘણી સામાન્ય હોય છે. "ડ્રોપડાઉન" સંકેત આપે છે કે સૂચિ મૂળભૂત રીતે છુપાયેલ છે. "મલ્ટિસેલેક્ટ" સૂચિમાં બહુ-પસંદગી (ચેકબોક્સ) સૂચવે છે. "કોમ્બોબોક્સ" ટેક્સ્ટ ઇનપુટ સૂચવે છે. અને "સૂચિબોક્સ" એ ફક્ત પસંદ કરી શકાય તેવી વસ્તુઓની સૂચિ છે, જે દરેક સમયે દૃશ્યક્ષમ છે. ધ્યેય તેની ખાતર ઉપરની વ્યાખ્યાઓ સાથે સુસંગત રહેવાનો નથી. પરંતુ ઇરાદાઓને સંરેખિત કરવાને બદલે - આ UI ઘટકોનો નિર્ણય, ડિઝાઇન, નિર્માણ અને પછી ઉપયોગ કરતી વખતે સમાન ભાષા બોલો. તે માટે કામ કરવું જોઈએદરેક વ્યક્તિ — ડિઝાઇનર્સ, એન્જિનિયર્સ અને અંતિમ વપરાશકર્તાઓ — જ્યાં સુધી સ્થિર લેબલ્સ ઇન્ટરેક્ટિવ બટનો જેવા દેખાતા નથી અને રેડિયો બટનો ચેકબોક્સની જેમ કાર્ય કરતા નથી. "AI ઇન્ટરફેસ માટે ડિઝાઇન પેટર્ન" ને મળો AI ઇન્ટરફેસ માટે ડિઝાઇન પેટર્નને મળો, વિટાલીનો નવો વિડિયો કોર્સ વાસ્તવિક જીવન ઉત્પાદનોના વ્યવહારુ ઉદાહરણો સાથે — ટૂંક સમયમાં લાઇવ UX તાલીમ સાથે. મફત પૂર્વાવલોકન પર જાઓ. AI ઇન્ટરફેસ માટે ડિઝાઇન પેટર્નને મળો, ઇન્ટરફેસ ડિઝાઇન અને UX પર વિટાલીનો વિડિયો કોર્સ.
વિડિયો + UX તાલીમવિડિયો માત્ર વિડિયો + UX તાલીમ$ 450.00 $ 799.00
વિડિઓ + UX તાલીમ30 વિડિઓ પાઠ (10h) + લાઇવ UX તાલીમ મેળવો. 100 દિવસની મની-બેક-ગેરંટી. વિડિઓ માત્ર$ 275.00$ 395.00
વિડિઓ કોર્સ 30 વિડિઓ પાઠ (10h) મેળવો. દર વર્ષે અપડેટ થાય છે. 3 વિડિયો કોર્સ સાથે UX બંડલ તરીકે પણ ઉપલબ્ધ છે.
ઉપયોગી સંસાધનો
સ્વતઃપૂર્ણ: UX માર્ગદર્શિકા, વિટાલી ફ્રીડમેન દ્વારા કોમ્બોબોક્સ, eBay દ્વારા 👍 કોમ્બોબોક્સ, સ્થિતિસ્થાપક દ્વારા કોમ્બોબોક્સ, એલિસા દ્વારા Combobox, MongoDB દ્વારા 👍 કોમ્બોબોક્સ, વિઝા દ્વારા 👍 કોમ્બોબોક્સ, વોટસન દ્વારા (ડોકપ્લાનર) કોમ્બોબોક્સ, વિકિમીડિયા દ્વારા કોમ્બોબોક્સ, ઝેન્ડેસ્ક દ્વારા મલ્ટિસિલેક્ટ (મોંગોડીબી કોમ્બોબોક્સ ડિઝાઇન ડોક્સ), મોંગોડીબી દ્વારા 👍 વિકિમીડિયા દ્વારા મલ્ટી-સિલેક્ટ લુકઅપ Vaadin દ્વારા, મલ્ટિ-સિલેક્ટ કૉમ્બો બૉક્સ વિઝા દ્વારા બહુપસંદ કરો ટ્રાન્સફર (સૂચિબોક્સ ઉદાહરણ), કીડી ડિઝાઇન દ્વારા લિસ્ટબોક્સ, હોપર દ્વારા લિસ્ટ બોક્સ, વાદિન દ્વારા લિસ્ટબોક્સ, વિઝા દ્વારા Red Hat (PatternFly) દ્વારા ડ્યુઅલ લિસ્ટ સિલેક્ટર ડ્યુઅલ લિસ્ટબોક્સ, સેલ્સફોર્સ દ્વારા (લાઈટનિંગ ડિઝાઇન સિસ્ટમ) ટ્રાન્સફર લિસ્ટ, મેન્ટીન દ્વારા ડ્યુઅલ લિસ્ટબોક્સ, ડેશલાઇટ દ્વારા બેજ વિ. પિલ્સ વિ. ચિપ્સ વિ. ટૅગ્સ, વિટાલી ફ્રીડમેન દ્વારા લિસ્ટબોક્સીસ વિ. ડ્રોપડાઉન લિસ્ટ, અન્ના કાલે દ્વારા (NN/g)
