Dakle, koja je razlika između combobox, multiselect, listbox i padajućeg izbornika? Iako sve ove komponente korisničkog sučelja mogu izgledati slične, služe različitim svrhama. Izbor se često svodi na broj dostupnih opcija i njihovu vidljivost. Pogledajmo po čemu se razlikuju, kojoj svrsi služe i kako odabrati pravu - izbjegavajući nesporazume i pogrešna očekivanja na tom putu.
Nisu svi obrasci lista isti Sve gore istaknute komponente korisničkog sučelja imaju upravo jednu zajedničku stvar: podržavaju interakciju korisnika sa listama. Međutim, oni to rade malo drugačije. Pogledajmo svaki, jedan po jedan:
Padajući izbornik → lista je skrivena dok se ne pokrene. Kombinirani okvir → otkucajte za filtriranje + odaberite 1 opciju. Višestruki odabir → ukucajte za filtriranje + odaberite mnogo opcija. Listbox → sve opcije liste vidljive su podrazumevano (+ skrolovanje). Dvostruki okvir za listu → premjestite stavke između 2 okvira za listu.
Drugim rečima, Combobox kombinuje polje za unos teksta sa padajućom listom, tako da korisnici mogu da ukucaju za filtriranje i izaberu jednu opciju. Uz Multiselect, korisnici mogu odabrati mnoge opcije (često prikazane kao pilule ili čips). Listboxes prikazuju sve opcije liste vidljive prema zadanim postavkama, često sa pomicanjem. Korisno je kada korisnici trebaju odmah vidjeti sve dostupne izbore. Dual listbox (koji se naziva i lista za prijenos) je varijacija liste koja omogućava korisnicima da premještaju stavke između dva okvira s listom (lijevo ↔ desno), tipično za grupni odabir. Nikada ne skrivajte često korištene opcije Kao što je gore pomenuto, izbor prave komponente korisničkog interfejsa zavisi od 2 faktora: koliko je opcija liste dostupno i da li sve ove opcije moraju da budu vidljive podrazumevano. Sve liste mogu takođe imati strukture stabla, ugniježđenje i odabir grupe.
Postoji jedan princip kojeg se godinama pridržavam za bilo koju komponentu korisničkog sučelja: nikada ne sakrivajte često korištene opcije. Ako se korisnici često oslanjaju na određeni odabir, vrlo je malo vrijedno skrivati ga od njih. Mogli bismo ga ili učiniti unaprijed odabranim, ili (ako postoje samo 2-3 često korištene opcije) ih prikazati kao čipove ili dugmad, a zatim prikazati ostatak liste u interakciji. Općenito, dobra je ideja uvijek prikazivati popularne opcije - čak i ako bi to moglo zatrpati korisničko sučelje. Kako odabrati koji? Nije svakoj listi potreban kompleksan metod odabira. Za liste s manje od 5 stavki, jednostavni radio dugmad ili potvrdni okviri obično najbolje funkcioniraju. Ali ako korisnici treba da biraju sa velike liste opcija (npr. 200+ stavki), kombinovani okvir + višestruki izbor su od pomoći zbog bržeg filtriranja (npr. odabir zemlje).
Listboxovi su korisni kada ljudi trebaju pristupiti mnogim opcijama odjednom, posebno ako također trebaju odabrati mnogo opcija sa te liste. Oni bi mogli biti od pomoći za često korištene filtere.
Dvostruki listbox se često zanemaruje i ignoriše. Ali može biti od velike pomoći za složene zadatke, npr. masovni odabir ili dodjeljivanje uloga, zadataka, odgovornosti. To je jedina komponenta korisničkog sučelja koja omogućava korisnicima da pregledaju svoju punu listu odabira rame uz rame s izvornom listom prije urezivanja (koja se naziva i "Lista za prijenos"). U stvari, dual listbox je često brži, precizniji i pristupačniji od prevlačenja i ispuštanja. Razmatranja upotrebljivosti Jedna važna napomena koju treba imati na umu je da svi tipovi lista moraju podržavati navigaciju tipkovnicom (npr. ↑/↓ tipke sa strelicama) radi pristupačnosti. Neki ljudi će se gotovo uvijek oslanjati na tastaturu za odabir opcija kada počnu kucati.
Osim toga:
Za liste sa 7+ opcija, razmislite o dodavanju funkcija „Odaberi sve“ i „Obriši sve“ kako biste pojednostavili interakciju korisnika. Za dugačke liste sa kombinovanim okvirom, izložite sve opcije korisnicima na klik/tap, jer u suprotnom možda nikada neće biti viđene, Najvažnije, nemojte prikazivati neinteraktivne elemente kao dugmad kako biste izbjegli zabunu — i nemojte prikazivati interaktivne elemente kao statičke oznake.
Zaključak: Nije sve padajući meni Imena su bitna. Vertikalna lista opcija se obično opisuje kao "padajući meni" - ali često je previše generička da bi imala smisla. “Padajući” nagoveštava da je lista podrazumevano skrivena. “Multiselect” podrazumijeva višestruki odabir (kvačicu za potvrdu) unutar liste. “Combobox” podrazumijeva unos teksta. A “Listbox” je jednostavno lista stavki koje se mogu odabrati, vidljivih u svakom trenutku. Cilj nije biti u skladu s gore navedenim definicijama radi toga. Ali radije da uskladite namjere — govorite istim jezikom kada odlučujete o, dizajniranju, izgradnji, a zatim korišćenju ovih komponenti korisničkog sučelja. Trebalo bi da radisvi – dizajneri, inženjeri i krajnji korisnici – sve dok statičke oznake ne izgledaju kao interaktivna dugmad, a radio dugmad ne djeluju kao potvrdni okviri. Upoznajte „Uzorci dizajna za AI interfejse“ Upoznajte obrasce dizajna za AI sučelja, Vitalijev novi video kurs s praktičnim primjerima iz stvarnih proizvoda — s UX obukom koja će se uskoro održati. Pređite na besplatni pregled. Upoznajte obrasce dizajna za AI interfejse, Vitalijev video kurs o dizajnu interfejsa i UX-u.
Video + UX trening Samo videoVideo + UX trening$ 450,00 $ 799,00
Nabavite video + UX trening 30 video lekcija (10 h) + UX trening uživo. 100 dana garancije povrata novca. Video samo 275,00$ 395,00$
Preuzmite video kurs 30 video lekcija (10h). Ažurira se svake godine. Dostupan i kao UX paket sa 3 video kursa.
Korisni resursi
Autocomplete: UX smjernice, Vitaly Friedman Combobox, eBay 👍 Combobox, Elastic Combobox, Elisa Combobox, od MongoDB 👍 Combobox, od Visa 👍 Combobox, od Watsona (Docplanner) Combobox, Wikimedia Combobox, Zendesk Multiselect (MongoDB Combobox Design Docs), od MongoDB 👍 Multiselect Lookup, Wikimedia Višestruki odabir Combo Box, Vaadin Multiselect, Visa Transfer (primjer Listboxa), od Ant Designa Listbox, od Hoppera List Box, Vaadin Listbox, od Visa Dual List Selector, Red Hat (PatternFly) Dual Listbox, Salesforce (Sistem Lightning Design) Transfer lista, od Mantine Dual Listbox, od Dashlite Značke protiv tableta protiv čipsa protiv oznaka, Vitaly Friedman Listboxes vs. padajuće liste, Anna Kaley (NN/g)
