Så hva er forskjellen mellom kombinasjonsboks, multivalg, listeboks og rullegardin? Selv om alle disse UI-komponentene kan virke like, tjener de forskjellige formål. Valget kommer ofte ned på antall tilgjengelige alternativer og deres synlighet. La oss se hvordan de er forskjellige, hvilket formål de tjener, og hvordan du velger den rette - unngå misforståelser og feil forventninger underveis.
Ikke alle listemønstre er like Alle UI-komponentene som er fremhevet ovenfor har nøyaktig én ting til felles: de støtter brukernes interaksjoner med lister. Imidlertid gjør de det litt annerledes. La oss ta en titt på hver, en etter en:
Rullegardin → liste er skjult til den utløses. Combobox → skriv for å filtrere + velg 1 alternativ. Multivelg → skriv for å filtrere + velg mange alternativer. Listeboks → alle listealternativer synlige som standard (+ rull). Dobbel listeboks → flytt elementer mellom 2 listebokser.
Med andre ord kombinerer Combobox et tekstinntastingsfelt med en rullegardinliste, slik at brukere kan skrive for å filtrere og velge ett enkelt alternativ. Med Multiselect kan brukere velge mange alternativer (ofte vist som piller eller chips). Listebokser viser alle listealternativer som er synlige som standard, ofte med rulling. Det er nyttig når brukere trenger å se alle tilgjengelige valg umiddelbart. Dobbel listeboks (også kalt overføringsliste) er en variant av en listeboks som lar brukere flytte elementer mellom to listebokser (venstre ↔ høyre), vanligvis for massevalg. Skjul aldri ofte brukte alternativer Som nevnt ovenfor avhenger valget av riktig UI-komponent av to faktorer: hvor mange listealternativer som er tilgjengelige, og om alle disse alternativene må være synlige som standard. Alle lister kan også ha trestrukturer, hekking og gruppevalg.
Det er ett prinsipp som jeg har fulgt i årevis for enhver UI-komponent: aldri skjul ofte brukte alternativer. Hvis brukere ofte stoler på et bestemt utvalg, er det svært liten verdi å skjule det for dem. Vi kan enten gjøre det forhåndsvalgt, eller (hvis det bare er 2–3 ofte brukte alternativer) vise dem som sjetonger eller knapper, og deretter vise resten av listen på interaksjon. Generelt er det en god idé å alltid vise populære alternativer - selv om det kan rote brukergrensesnittet. Hvordan velge hvilken? Ikke alle lister trenger en kompleks utvelgelsesmetode. For lister med færre enn 5 elementer fungerer enkle alternativknapper eller avmerkingsbokser vanligvis best. Men hvis brukere trenger å velge fra en stor liste med alternativer (f.eks. 200+ elementer), er combobox + multiselect nyttig på grunn av den raskere filtreringen (f.eks. landvalg).
Listebokser er nyttige når folk trenger tilgang til mange alternativer samtidig, spesielt hvis de også trenger å velge mange alternativer fra den listen. De kan være nyttige for ofte brukte filtre.
Dobbel listeboks blir ofte oversett og ignorert. Men det kan være svært nyttig for komplekse oppgaver, for eksempel masseutvelgelse, eller tildeling av roller, oppgaver, ansvar. Det er den eneste UI-komponenten som lar brukere se gjennom hele utvalgslisten side ved side med kildelisten før de forplikter seg (også kalt "Overføringsliste"). Faktisk er dobbel listeboks ofte raskere, mer nøyaktig og mer tilgjengelig enn dra-og-slipp. Brukbarhetshensyn En viktig merknad å huske på er at alle listetyper må støtte tastaturnavigasjon (f.eks. ↑/↓ piltaster) for tilgjengelighet. Noen mennesker vil nesten alltid stole på tastaturet for å velge alternativer når de begynner å skrive.
Utover det:
For lister med 7+ alternativer, bør du vurdere å legge til funksjonene "Velg alle" og "Slett alle" for å strømlinjeforme brukerinteraksjonen. For lange lister med en kombinasjonsboks, eksponer alle alternativer for brukere ved klikk/trykk, da de ellers kanskje aldri blir sett, Viktigst, ikke vis ikke-interaktive elementer som knapper for å unngå forvirring – og ikke vis interaktive elementer som statiske etiketter.
Avslutning: Ikke alt er en dropdown Navn betyr noe. En vertikal liste over alternativer beskrives vanligvis som en "dropdown" - men ofte er den litt for generisk til å være meningsfull. "Dropdown" antyder at listen er skjult som standard. "Multiselect" innebærer flervalg (avmerkingsboks) i en liste. "Combobox" innebærer tekstinntasting. Og "Listbox" er ganske enkelt en liste over valgbare elementer, synlige til enhver tid. Målet er ikke å være i samsvar med definisjonene ovenfor for det. Men heller for å samordne intensjoner - snakk det samme språket når du bestemmer deg for, designer, bygger og bruker disse UI-komponentene. Det skal fungere foralle – designere, ingeniører og sluttbrukere – så lenge statiske etiketter ikke ser ut som interaktive knapper, og alternativknapper ikke fungerer som avmerkingsbokser. Møt "Designmønstre for AI-grensesnitt" Møt Design Patterns For AI Interfaces, Vitalys nye videokurs med praktiske eksempler fra virkelige produkter – med en live UX-trening snart. Hopp til en gratis forhåndsvisning. Møt Design Patterns For AI Interfaces, Vitalys videokurs om grensesnittdesign og UX.
Video + UX-trening Kun videoVideo + UX-trening$ 450,00 $ 799,00
Få video + UX Training30 videotimer (10 timer) + Live UX Training.100 dagers pengene-tilbake-garanti. Video kun $ 275,00 $ 395,00
Få videokurset 30 videotimer (10 timer). Oppdateres årlig. Også tilgjengelig som en UX-pakke med 3 videokurs.
Nyttige ressurser
Autofullføring: UX Guidelines, av Vitaly Friedman Combobox, fra eBay 👍 Combobox, fra Elastic Combobox, av Elisa Combobox, av MongoDB 👍 Combobox, fra Visa 👍 Combobox, av Watson (Docplanner) Combobox, av Wikimedia Combobox, av Zendesk Multiselect (MongoDB Combobox Design Docs), av MongoDB 👍 Multiselect Lookup, av Wikimedia Multi-select Combo Box, av Vaadin Multiselect, av Visa Transfer (Listbox eksempel), av Ant Design Listbox, av Hopper Listeboks, av Vaadin Listbox, av Visa Dual List Selector, av Red Hat (PatternFly) Dual Listbox, av Salesforce (Lightning Design System) Overføringsliste, av Mantine Dual Listbox, av Dashlite Merker vs. Pills vs. Chips vs. Tags, av Vitaly Friedman Listebokser vs. rullegardinlister, av Anna Kaley (NN/g)
