Dakle, koja je razlika između kombiniranog okvira, višestrukog odabira, okvira s popisom i padajućeg izbornika? Iako se sve ove komponente korisničkog sučelja mogu činiti 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 onaj pravi — usput izbjegavajući nesporazume i pogrešna očekivanja.
Nisu svi obrasci popisa isti Sve gore istaknute komponente korisničkog sučelja imaju točno jednu zajedničku stvar: podržavaju interakcije korisnika s popisima. Međutim, oni to čine malo drugačije. Pogledajmo svaki, jedan po jedan:
Padajući → popis je skriven dok se ne pokrene. Kombinirani okvir → upišite za filtriranje + odaberite 1 opciju. Višestruki odabir → tip za filtriranje + odabir mnogih opcija. Okvir s popisom → sve opcije popisa vidljive prema zadanim postavkama (+ pomicanje). Dvostruki popisni okvir → premještanje stavki između 2 popisna okvira.
Drugim riječima, Combobox kombinira polje za unos teksta s padajućim popisom, tako da korisnici mogu tipkati za filtriranje i odabrati jednu opciju. Uz Multiselect, korisnici mogu odabrati mnoge opcije (često prikazane kao tablete ili čips). Popisni okviri prikazuju sve opcije popisa vidljive prema zadanim postavkama, često s pomicanjem. Korisno je kada korisnici moraju odmah vidjeti sve dostupne mogućnosti. Dvostruki okvir s popisom (također nazvan popis za prijenos) je varijacija okvira s popisom koji korisnicima omogućuje premještanje stavki između dva okvira s popisom (lijevo ↔ desno), obično za skupni odabir. Nikad ne skrivaj često korištene opcije Kao što je gore spomenuto, izbor prave komponente korisničkog sučelja ovisi o 2 čimbenika: koliko je opcija popisa dostupno i trebaju li sve te opcije biti vidljive prema zadanim postavkama. Svi popisi također mogu imati strukturu stabla, gniježđenje i grupni odabir.
Postoji jedno načelo kojeg se godinama pridržavam za bilo koju komponentu korisničkog sučelja: nikad ne skrivaj često korištene opcije. Ako se korisnici često oslanjaju na određeni odabir, vrlo je malo vrijedno skrivati ga od njih. Mogli bismo ga učiniti unaprijed odabranim ili (ako postoje samo 2-3 često korištene opcije) prikazati ih kao čipove ili gumbe, a zatim prikazati ostatak popisa u interakciji. Općenito, dobra je ideja uvijek prikazati popularne opcije - čak i ako bi to moglo zatrpati korisničko sučelje. Kako odabrati koji? Nije za svaki popis potrebna složena metoda odabira. Za popise s manje od 5 stavki, jednostavni radio gumbi ili potvrdni okviri obično najbolje funkcioniraju. Ali ako korisnici trebaju odabrati s velikog popisa opcija (npr. 200+ stavki), kombinirani okvir + višestruki odabir korisni su zbog bržeg filtriranja (npr. odabir zemlje).
Okviri s popisima korisni su kada ljudi trebaju pristupiti mnogim opcijama odjednom, posebno ako trebaju odabrati i mnoge opcije s tog popisa. Mogli bi biti od pomoći za često korištene filtre.
Dvostruki popisni okvir često se zanemaruje i zanemaruje. Ali može biti od velike pomoći za složene zadatke, npr. skupni odabir ili dodjeljivanje uloga, zadataka, odgovornosti. To je jedina komponenta korisničkog sučelja koja korisnicima omogućuje da pregledaju svoj puni popis odabira usporedno s izvornim popisom prije obvezivanja (također se naziva "Popis prijenosa"). Zapravo, okvir s dvostrukim popisom često je brži, točniji i pristupačniji od povlačenja i ispuštanja. Razmatranja upotrebljivosti Jedna važna napomena koju treba imati na umu je da sve vrste popisa moraju podržavati navigaciju tipkovnicom (npr. tipke sa strelicama ↑/↓) radi pristupačnosti. Neki ljudi će se gotovo uvijek oslanjati na tipkovnicu za odabir opcija nakon što počnu tipkati.
Osim toga:
Za popise sa 7+ opcija razmislite o dodavanju funkcija "Odaberi sve" i "Izbriši sve" kako biste pojednostavili interakciju korisnika. Za dugačke popise s kombiniranim okvirom, izložite sve opcije korisnicima na klik/dodir jer inače možda nikada neće biti prikazane, Što je najvažnije, ne prikazujte neinteraktivne elemente kao gumbe kako biste izbjegli zabunu — i ne prikazujte interaktivne elemente kao statične oznake.
Zaključak: Nije sve padajući izbornik Imena su važna. Okomiti popis opcija obično se opisuje kao "padajući" - ali često je previše generičan da bi imao smisla. "Padajući" nagovještava da je popis prema zadanim postavkama skriven. "Višestruki odabir" podrazumijeva višestruki odabir (potvrdni okvir) unutar popisa. “Combobox” podrazumijeva unos teksta. A "Listbox" je jednostavno popis stavki koje je moguće odabrati, vidljiv u svakom trenutku. Cilj nije biti dosljedan s gornjim definicijama radi samog sebe. Radije da uskladimo namjere - govorimo istim jezikom kada odlučujemo o, projektiramo, gradimo i zatim koristimo ove komponente korisničkog sučelja. Trebalo bi raditi zasvi - dizajneri, inženjeri i krajnji korisnici - sve dok statične oznake ne izgledaju kao interaktivni gumbi, a radio gumbi ne ponašaju se kao potvrdni okviri. Upoznajte “Uzorke dizajna za AI sučelja” Upoznajte Design Patterns For AI Interfaces, Vitalyjev novi videotečaj s praktičnim primjerima iz proizvoda iz stvarnog života — s UX obukom uživo koja će se održati uskoro. Prijeđite na besplatni pregled. Upoznajte obrasce dizajna za AI sučelja, Vitalyjev video tečaj o dizajnu sučelja i korisničkom sučelju.
Video + UX obuka Samo video Video + UX obuka $ 450,00 $ 799,00
Nabavite video + UX obuku30 video lekcija (10h) + UX obuku uživo. 100 dana garancije povrata novca. Samo video 275,00 $ 395,00 $
Nabavite videotečaj30 video lekcija (10h). Ažurira se svake godine. Dostupno i kao UX paket s 3 video tečaja.
Korisni resursi
Automatsko dovršavanje: UX smjernice, autor Vitaly Friedman Combobox, eBay 👍 Combobox, Elastic Combobox, Elisa Combobox, MongoDB 👍 Combobox, Visa 👍 Combobox, Watson (Docplanner) Combobox, Wikimedia Combobox, Zendesk Multiselect (MongoDB Combobox Design Docs), MongoDB 👍 Višestruki odabir, Wikimedija Kombinirani okvir s višestrukim odabirom, Vaadin Multiselect, Visa Prijenos (primjer Listbox), Ant Design Listbox, autor Hopper List Box, Vaadin Listbox, Visa Dual List Selector, Red Hat (PatternFly) Dual Listbox, Salesforce (Lightning Design System) Popis transfera, Mantine Dual Listbox, Dashlite Značke vs. Tablete vs. Čips vs. Etikete, autor Vitaly Friedman Okviri s popisima nasuprot padajućih popisa, Anna Kaley (NN/g)
