Kakšna je torej razlika med kombiniranim poljem, večizbirnim poljem, seznamskim poljem in spustnim menijem? Čeprav so vse te komponente uporabniškega vmesnika morda videti podobne, služijo različnim namenom. Izbira je pogosto odvisna od števila razpoložljivih možnosti in njihove vidnosti. Poglejmo, v čem se razlikujejo, čemu služijo in kako izbrati pravega – pri tem pa se izogniti nesporazumom in napačnim pričakovanjem na poti.
Niso vsi vzorci seznamov enaki Vse zgoraj poudarjene komponente uporabniškega vmesnika imajo točno eno skupno stvar: podpirajo interakcije uporabnikov s seznami. Vendar to počnejo nekoliko drugače. Oglejmo si vsakega posebej:
Spustni meni → seznam je skrit, dokler se ne sproži. Kombinirano polje → vnesite za filtriranje + izberite 1 možnost. Večkratna izbira → tip za filtriranje + izbira številnih možnosti. Seznam → vse možnosti seznama so privzeto vidne (+ drsenje). Dvojno seznamsko polje → premikanje elementov med dvema seznamskima poljema.
Z drugimi besedami, Combobox združuje polje za vnos besedila s spustnim seznamom, tako da lahko uporabniki tipkajo za filtriranje in izberejo eno možnost. Z možnostjo Multiselect lahko uporabniki izberejo številne možnosti (pogosto prikazane kot tablete ali čips). Seznamska polja prikazujejo vse možnosti seznama, ki so privzeto vidne, pogosto z drsenjem. Koristno je, ko morajo uporabniki takoj videti vse razpoložljive možnosti. Dvojno seznamsko polje (imenovano tudi prenosni seznam) je različica seznamskega polja, ki uporabnikom omogoča premikanje elementov med dvema seznamskima poljema (levo ↔ desno), običajno za množično izbiro. Nikoli ne skrivaj pogosto uporabljenih možnosti Kot je navedeno zgoraj, je izbira prave komponente uporabniškega vmesnika odvisna od dveh dejavnikov: koliko možnosti seznama je na voljo in ali morajo biti vse te možnosti privzeto vidne. Vsi seznami imajo lahko tudi drevesne strukture, gnezdenje in skupinsko izbiro.
Obstaja eno načelo, ki ga že leta upoštevam za katero koli komponento uporabniškega vmesnika: nikoli ne skrivaj pogosto uporabljenih možnosti. Če se uporabniki pogosto zanašajo na določeno izbiro, je zelo malo vrednosti, če jo skrivate pred njimi. Lahko bi ga naredili vnaprej izbranega ali (če so samo 2–3 pogosto uporabljene možnosti) jih prikazali kot žetone ali gumbe in nato prikazali preostali del seznama pri interakciji. Na splošno je dobra ideja, da vedno prikažete priljubljene možnosti – tudi če bi to lahko obremenjevalo uporabniški vmesnik. Kako izbrati katerega? Vsak seznam ne potrebuje zapletene izbirne metode. Za sezname z manj kot 5 elementi običajno najbolje delujejo preprosti izbirni gumbi ali potrditvena polja. Če pa morajo uporabniki izbrati z velikega seznama možnosti (npr. 200+ elementov), sta kombinirano polje + večizbirna izbira v pomoč zaradi hitrejšega filtriranja (npr. izbira države).
Seznamska polja so v pomoč, ko morajo ljudje dostopati do več možnosti hkrati, zlasti če morajo izbrati tudi veliko možnosti s tega seznama. Lahko so v pomoč pri pogosto uporabljenih filtrih.
Dvojno seznamsko polje je pogosto spregledano in prezrto. Lahko pa je zelo koristen za zapletene naloge, npr. množično izbiro ali dodeljevanje vlog, nalog, odgovornosti. To je edina komponenta uporabniškega vmesnika, ki uporabnikom omogoča pregled celotnega izbirnega seznama vzporedno z izvornim seznamom, preden se zavežejo (imenovan tudi »prenosni seznam«). Pravzaprav je dvojno seznamsko polje pogosto hitrejše, natančnejše in bolj dostopno kot povleci in spusti. Premisleki glede uporabnosti Ena pomembna opomba, ki jo morate upoštevati, je, da morajo vse vrste seznamov podpirati navigacijo s tipkovnico (npr. puščične tipke ↑/↓) za dostopnost. Nekateri ljudje se skoraj vedno zanašajo na tipkovnico za izbiro možnosti, ko začnejo tipkati.
Poleg tega:
Za sezname s 7+ možnostmi razmislite o dodajanju funkcij »Izberi vse« in »Počisti vse«, da poenostavite uporabniško interakcijo. Za dolge sezname s kombiniranim poljem vse možnosti izpostavite uporabnikom ob kliku/dotiku, sicer jih morda ne bodo nikoli videli, Najpomembneje je, da neinteraktivnih elementov ne prikazujte kot gumbe, da se izognete zmedi – in interaktivnih elementov ne prikazujte kot statične oznake.
Zaključek: ni vse spustni meni Imena so pomembna. Navpični seznam možnosti je običajno opisan kot "spustni meni" - vendar je pogosto preveč splošen, da bi bil smiseln. »Spustni« namiguje, da je seznam privzeto skrit. »Večkratna izbira« pomeni večkratno izbiro (potrditveno polje) znotraj seznama. »Combobox« pomeni vnos besedila. In »Listbox« je preprosto seznam elementov, ki jih je mogoče izbrati in so vidni ves čas. Cilj ni biti skladen z zgornjimi definicijami samo zaradi tega. Namesto tega, da uskladite namere – govorite isti jezik, ko se odločate o, načrtujete, gradite in nato uporabljate te komponente uporabniškega vmesnika. Moralo bi delovati zavsi – oblikovalci, inženirji in končni uporabniki – dokler statične oznake niso videti kot interaktivni gumbi in radijski gumbi ne delujejo kot potrditvena polja. Spoznajte »Vzorci oblikovanja za vmesnike AI« Spoznajte vzorce oblikovanja za vmesnike umetne inteligence, Vitalyjev novi video tečaj s praktičnimi primeri iz izdelkov iz resničnega življenja – kmalu bo na sporedu usposabljanje UX v živo. Skoči na brezplačen predogled. Spoznajte vzorce oblikovanja za vmesnike AI, Vitalijev video tečaj o oblikovanju vmesnikov in UX.
Video + UX usposabljanje Samo video Video + UX usposabljanje $ 450,00 $ 799,00
Pridobite videoposnetek + usposabljanje UX30 video lekcij (10 ur) + usposabljanje UX v živo. 100-dnevna garancija vračila denarja. Samo videoposnetki 275,00 $ 395,00 $
Pridobite video tečaj 30 video lekcij (10 ur). Posodobljeno letno. Na voljo tudi kot paket UX s 3 video tečaji.
Uporabni viri
Samodokončanje: Smernice UX, avtor Vitaly Friedman Combobox, eBay 👍 Combobox, Elastic Combobox, avtorica Elisa Combobox, MongoDB 👍 Combobox, Visa 👍 Combobox, Watson (Docplanner) Combobox, Wikimedia Combobox, Zendesk Multiselect (MongoDB Combobox Design Docs), avtor MongoDB 👍 Multiselect Lookup, Wikimedia Kombinirano polje za več izbir, avtor Vaadin Multiselect, z Viso Prenos (primer Listbox), Ant Design Listbox, avtor Hopper List Box, avtor Vaadin Listbox, Visa Izbirnik dvojnega seznama, Red Hat (PatternFly) Dual Listbox, Salesforce (Lightning Design System) Seznam prenosov, avtor Mantine Dual Listbox, Dashlite Značke vs. Tablete vs. Čips vs. Etikete, avtor Vitaly Friedman Seznamska polja proti spustnim seznamom, avtorica Anna Kaley (NN/g)
