Så hvad er forskellen mellem combobox, multiselect, listbox og dropdown? Selvom alle disse UI-komponenter kan se ens ud, tjener de forskellige formål. Valget kommer ofte ned til antallet af tilgængelige muligheder og deres synlighed. Lad os se, hvordan de adskiller sig, hvilket formål de tjener, og hvordan man vælger den rigtige - undgå misforståelser og forkerte forventninger undervejs.
Ikke alle listemønstre er ens Alle UI-komponenterne fremhævet ovenfor har præcis én ting til fælles: de understøtter brugernes interaktioner med lister. Det gør de dog lidt anderledes. Lad os tage et kig på hver, en efter en:
Dropdown → listen er skjult, indtil den udløses. Combobox → skriv for at filtrere + vælg 1 mulighed. Multiselect → skriv for at filtrere + vælg mange muligheder. Listeboks → alle listeindstillinger synlige som standard (+ rul). Dobbelt listeboks → flyt elementer mellem 2 listebokse.
Med andre ord kombinerer Combobox et tekstindtastningsfelt med en rulleliste, så brugere kan skrive for at filtrere og vælge en enkelt mulighed. Med Multiselect kan brugerne vælge mange muligheder (ofte vist som piller eller chips). Listebokse viser alle listeindstillinger, der er synlige som standard, ofte med rulning. Det er nyttigt, når brugere skal se alle tilgængelige valg med det samme. Dobbelt listeboks (også kaldet overførselsliste) er en variation af en listeboks, der giver brugerne mulighed for at flytte elementer mellem to listebokse (venstre ↔ højre), typisk til massevalg. Skjul aldrig ofte brugte muligheder Som nævnt ovenfor afhænger valget af den rigtige UI-komponent af 2 faktorer: hvor mange listemuligheder der er tilgængelige, og om alle disse muligheder skal være synlige som standard. Alle lister kan også have træstrukturer, indlejring og gruppevalg.
Der er et princip, som jeg har fulgt i årevis for enhver UI-komponent: skjul aldrig ofte brugte muligheder. Hvis brugere ofte stoler på et bestemt udvalg, er der meget lidt værdi i at skjule det for dem. Vi kunne enten gøre det forvalgt eller (hvis der kun er 2-3 hyppigt anvendte muligheder) vise dem som chips eller knapper og derefter vise resten af listen på interaktion. Generelt er det en god idé altid at vise populære muligheder - også selvom det kan rode i brugergrænsefladen. Hvordan vælger man hvilken? Ikke enhver liste behøver en kompleks udvælgelsesmetode. For lister med færre end 5 elementer fungerer simple alternativknapper eller afkrydsningsfelter normalt bedst. Men hvis brugere har brug for at vælge fra en stor liste af muligheder (f.eks. 200+ elementer), er combobox + multiselect nyttige på grund af den hurtigere filtrering (f.eks. landvalg).
Listbokse er nyttige, når folk skal have adgang til mange muligheder på én gang, især hvis de også skal vælge mange muligheder fra denne liste. De kan være nyttige til ofte brugte filtre.
Dobbelt listeboks overses og ignoreres ofte. Men det kan være meget nyttigt til komplekse opgaver, f.eks. masseudvælgelse eller tildeling af roller, opgaver, ansvar. Det er den eneste UI-komponent, der giver brugerne mulighed for at gennemgå deres fulde valgliste side om side med kildelisten, før de forpligter sig (også kaldet "Overførselsliste"). Faktisk er dobbelt listeboks ofte hurtigere, mere præcis og mere tilgængelig end træk-og-slip. Overvejelser om brugbarhed En vigtig note at huske på er, at alle listetyper skal understøtte tastaturnavigation (f.eks. ↑/↓ piletaster) for tilgængelighed. Nogle mennesker vil næsten altid stole på, at tastaturet vælger muligheder, når de begynder at skrive.
Ud over det:
For lister med 7+ muligheder kan du overveje at tilføje funktionerne "Vælg alle" og "Slet alle" for at strømline brugerinteraktion. For lange lister med en kombinationsboks, eksponer alle muligheder for brugere ved klik/tryk, da de ellers aldrig bliver set, Vigtigst af alt, vis ikke ikke-interaktive elementer som knapper for at undgå forvirring - og vis ikke interaktive elementer som statiske etiketter.
Afslutning: Ikke alt er en dropdown Navne betyder noget. En lodret liste over muligheder beskrives typisk som en "dropdown" - men ofte er den lidt for generisk til at være meningsfuld. "Dropdown" antyder, at listen er skjult som standard. "Multiselect" indebærer multi-selektion (afkrydsningsfelt) på en liste. "Combobox" betyder tekstinput. Og "Listbox" er simpelthen en liste over valgbare elementer, som er synlige til enhver tid. Målet er ikke at være i overensstemmelse med definitionerne ovenfor af hensyn til det. Men snarere for at afstemme intentioner - tal det samme sprog, når du beslutter dig for, designer, bygger og derefter bruger disse UI-komponenter. Det burde virke foralle - designere, ingeniører og slutbrugere - så længe statiske etiketter ikke ligner interaktive knapper, og radioknapper ikke fungerer som afkrydsningsfelter. Mød "Designmønstre til AI-grænseflader" Mød Design Patterns For AI Interfaces, Vitalys nye videokursus med praktiske eksempler fra virkelige produkter - med en live UX-træning, der snart finder sted. Hop til en gratis forhåndsvisning. Mød designmønstre til AI-grænseflader, Vitalys videokursus om interfacedesign og UX.
Video + UX-træning Kun videoVideo + UX-træning$ 450,00 $ 799,00 $
Få video + UX-træning 30 videolektioner (10 timer) + Live UX-træning. 100 dages pengene-tilbage-garanti. Video kun 275,00 $ 395,00 $
Få videokurset30 videolektioner (10 timer). Opdateres årligt. Fås også som en UX-pakke med 3 videokurser.
Nyttige ressourcer
Autofuldførelse: UX Guidelines, af Vitaly Friedman Combobox, fra eBay 👍 Combobox, fra Elastic Combobox, af Elisa Combobox, af MongoDB 👍 Combobox, fra Visa 👍 Combobox, af Watson (Docplanner) Combobox, af Wikimedia Combobox, fra Zendesk Multiselect (MongoDB Combobox Design Docs), af MongoDB 👍 Multiselect Lookup, af Wikimedia Multi-select Combo Box, fra Vaadin Multiselect, af Visa Transfer (Listbox eksempel), af Ant Design Listbox, af Hopper Listeboks, af Vaadin Listbox, af Visa Dual List Selector, af Red Hat (PatternFly) Dual Listbox, af Salesforce (Lightning Design System) Overførselsliste, af Mantine Dual Listbox, af Dashlite Badges vs. Pills vs. Chips vs. Tags, af Vitaly Friedman Listboxes vs. Dropdown Lists, af Anna Kaley (NN/g)
