Deci, care este diferența dintre caseta combinată, selecția multiplă, caseta cu listă și meniul drop-down? Deși toate aceste componente ale interfeței de utilizare pot părea similare, ele servesc unor scopuri diferite. Alegerea se reduce adesea la numărul de opțiuni disponibile și la vizibilitatea acestora. Să vedem cum diferă, ce scop servesc și cum să-l alegem pe cel potrivit - evitând neînțelegerile și așteptările greșite pe parcurs.
Nu toate modelele de listă sunt aceleași Toate componentele UI evidențiate mai sus au exact un lucru în comun: susțin interacțiunile utilizatorilor cu liste. Cu toate acestea, fac acest lucru ușor diferit. Să aruncăm o privire la fiecare, unul câte unul:
Meniu → lista este ascunsă până când este declanșată. Combobox → tastați pentru a filtra + selectați 1 opțiune. Multiselect → tastați pentru a filtra + selectați multe opțiuni. Listă → toate opțiunile listei vizibile implicit (+ defilare). Casetă cu listă duală → mutați elemente între 2 casete cu listă.
Cu alte cuvinte, Combobox combină un câmp de introducere a textului cu o listă derulantă, astfel încât utilizatorii să poată introduce pentru a filtra și selecta o singură opțiune. Cu Multiselect, utilizatorii pot selecta multe opțiuni (deseori afișate ca pastile sau chipsuri). Casetele cu listă afișează toate opțiunile de listă vizibile în mod implicit, adesea cu derulare. Este util atunci când utilizatorii trebuie să vadă imediat toate opțiunile disponibile. Caseta listă duală (numită și listă de transfer) este o variantă a casetei listă care permite utilizatorilor să mute articole între două casete listă (stânga ↔ dreapta), de obicei pentru selecție în bloc. Nu ascunde niciodată opțiunile utilizate frecvent După cum am menționat mai sus, alegerea componentei UI potrivite depinde de 2 factori: câte opțiuni de listă sunt disponibile și dacă toate aceste opțiuni trebuie să fie vizibile în mod implicit. Toate listele ar putea avea, de asemenea, structuri arborescente, imbricare și selecție de grup.
Există un principiu pe care l-am urmat de ani de zile pentru orice componentă a interfeței de utilizare: nu ascunde niciodată opțiunile utilizate frecvent. Dacă utilizatorii se bazează frecvent pe o anumită selecție, este foarte puțin util să o ascunzi de ei. Am putea fie să-l preselectăm, fie (dacă există doar 2-3 opțiuni frecvent utilizate) să le arătăm ca jetoane sau butoane, apoi să arătăm restul listei despre interacțiune. În general, este o idee bună să afișați întotdeauna opțiunile populare - chiar dacă ar putea aglomera interfața de utilizare. Cum să alegi pe care? Nu orice listă are nevoie de o metodă de selecție complexă. Pentru listele cu mai puțin de 5 articole, butoanele radio simple sau casetele de selectare funcționează cel mai bine de obicei. Dar dacă utilizatorii trebuie să selecteze dintr-o listă mare de opțiuni (de exemplu, peste 200 de articole), caseta combinată + selecția multiplă sunt utile datorită filtrelor mai rapide (de exemplu, selecția țării).
Listbox-urile sunt utile atunci când oamenii trebuie să acceseze mai multe opțiuni simultan, mai ales dacă trebuie să aleagă și multe opțiuni din acea listă. Ele ar putea fi utile pentru filtrele utilizate frecvent.
Caseta de listă duală este adesea trecută cu vederea și ignorată. Dar poate fi foarte util pentru sarcini complexe, de exemplu, selecția în bloc sau atribuirea de roluri, sarcini, responsabilități. Este singura componentă a UI care permite utilizatorilor să-și revizuiască lista completă de selecție alături de lista sursă înainte de a se angaja (numită și „Lista de transfer”). De fapt, listbox dual este adesea mai rapid, mai precis și mai accesibil decât drag-and-drop. Considerații de utilizare O notă importantă de reținut este că toate tipurile de liste trebuie să accepte navigarea de la tastatură (de exemplu, tastele săgeți ↑/↓) pentru accesibilitate. Unii oameni se vor baza aproape întotdeauna pe tastatură pentru a selecta opțiunile odată ce încep să tasteze.
Dincolo de asta:
Pentru listele cu peste 7 opțiuni, luați în considerare adăugarea de funcționalități „Selectați tot” și „Ștergeți toate” pentru a simplifica interacțiunea utilizatorului. Pentru liste lungi cu o casetă combinată, expuneți utilizatorilor toate opțiunile făcând clic/atingeți, deoarece altfel nu vor fi văzute niciodată, Cel mai important, nu afișați elemente neinteractive ca butoane pentru a evita confuzia - și nu afișați elementele interactive ca etichete statice.
Încheiere: nu totul este un dropdown Numele contează. O listă verticală de opțiuni este de obicei descrisă ca un „menu derulant” – dar adesea este puțin prea generică pentru a fi semnificativă. „Meniu derulant” sugerează că lista este ascunsă în mod implicit. „Multiselect” implică selecția multiplă (căsuță de selectare) în cadrul unei liste. „Combobox” implică introducerea textului. Și „Listbox” este pur și simplu o listă de elemente selectabile, vizibile în orice moment. Scopul nu este să fie în concordanță cu definițiile de mai sus de dragul acesteia. Ci mai degrabă pentru a alinia intențiile - vorbiți aceeași limbă atunci când decideți, proiectați, construiți și apoi utilizați aceste componente UI. Ar trebui să funcționeze pentrutoată lumea – designeri, ingineri și utilizatori finali – atâta timp cât etichetele statice nu arată ca butoane interactive, iar butoanele radio nu acționează ca casete de selectare. Faceți cunoștință cu „Modele de design pentru interfețele AI” Faceți cunoștință cu Design Patterns For AI Interfaces, noul curs video Vitaly cu exemple practice din produse din viața reală - cu un curs de UX live care va avea loc în curând. Salt la o previzualizare gratuită. Faceți cunoștință cu Design Patterns For AI Interfaces, cursul video Vitaly despre designul interfeței și UX.
Video + UX Training Numai video Video + UX Training 450,00 USD 799,00 USD
Obțineți Video + UX Training30 de lecții video (10 ore) + Live UX Training. Garanție de rambursare a banilor în 100 de zile. Numai videoclip 275,00 USD 395,00 USD
Obțineți cursul video30 de lecții video (10 ore). Actualizat anual. Disponibil și ca pachet UX cu 3 cursuri video.
Resurse utile
Completare automată: Ghid UX, de Vitaly Friedman Combobox, de la eBay 👍 Combobox, de la Elastic Combobox, de Elisa Combobox, de la MongoDB 👍 Combobox, de la Visa 👍 Combobox, de Watson (Docplanner) Combobox, de la Wikimedia Combobox, de la Zendesk Multiselect (MongoDB Combobox Design Docs), de MongoDB 👍 Căutare cu selecție multiplă, de la Wikimedia Casetă combinată cu selecție multiplă, de Vaadin Multiselect, prin Visa Transfer (exemplu Listbox), de Ant Design Listbox, de Hopper List Box, de Vaadin Listbox, de la Visa Selector dublu de liste, de Red Hat (PatternFly) Dual Listbox, de la Salesforce (Lightning Design System) Lista de transferuri, de Mantine Dual Listbox, de la Dashlite Insigne vs. Pastile vs. Chips vs. Etichete, de Vitaly Friedman Listbox-uri vs. liste drop-down, de Anna Kaley (NN/g)
