Så vad är skillnaden mellan combobox, multiselect, listbox och dropdown? Även om alla dessa UI-komponenter kan se likadana ut, tjänar de olika syften. Valet beror ofta på antalet tillgängliga alternativ och deras synlighet. Låt oss se hur de skiljer sig åt, vilket syfte de tjänar och hur man väljer rätt – undvik missförstånd och felaktiga förväntningar på vägen.
Alla listmönster är inte desamma Alla UI-komponenter som markerats ovan har exakt en sak gemensamt: de stöder användarnas interaktioner med listor. Men de gör det lite annorlunda. Låt oss ta en titt på var och en, en efter en:
Dropdown → lista är dold tills den utlöses. Combobox → skriv för att filtrera + välj ett alternativ. Flerval → skriv för att filtrera + välj många alternativ. Listbox → alla listalternativ som är synliga som standard (+ bläddra). Dubbel listbox → flytta objekt mellan 2 listboxar.
Med andra ord kombinerar Combobox ett textinmatningsfält med en rullgardinslista, så att användare kan skriva för att filtrera och välja ett enda alternativ. Med Multiselect kan användare välja många alternativ (visas ofta som piller eller chips). Listboxar visar alla listalternativ som är synliga som standard, ofta med rullning. Det är användbart när användare behöver se alla tillgängliga val omedelbart. Dubbel listbox (även kallad överföringslista) är en variant av en listbox som tillåter användare att flytta objekt mellan två listboxar (vänster ↔ höger), vanligtvis för massval. Göm aldrig ofta använda alternativ Som nämnts ovan beror valet av rätt UI-komponent på två faktorer: hur många listalternativ som är tillgängliga och om alla dessa alternativ måste vara synliga som standard. Alla listor kan också ha trädstrukturer, kapsling och gruppval.
Det finns en princip som jag har följt i flera år för alla UI-komponenter: dölj aldrig ofta använda alternativ. Om användare ofta förlitar sig på ett visst urval, finns det väldigt lite värde i att dölja det för dem. Vi kan antingen göra det förvalt eller (om det bara finns 2–3 ofta använda alternativ) visa dem som marker eller knappar och sedan visa resten av listan på interaktion. I allmänhet är det en bra idé att alltid visa populära alternativ – även om det kan röra gränssnittet. Hur väljer man vilken? Inte varje lista behöver en komplex urvalsmetod. För listor med färre än 5 objekt fungerar enkla alternativknappar eller kryssrutor vanligtvis bäst. Men om användare behöver välja från en stor lista med alternativ (t.ex. 200+ objekt), är kombinationsrutan + multiselect till hjälp på grund av den snabbare filtreringen (t.ex. val av land).
Listboxar är användbara när människor behöver komma åt många alternativ samtidigt, särskilt om de behöver välja många alternativ från den listan också. De kan vara till hjälp för ofta använda filter.
Dubbel listbox förbises och ignoreras ofta. Men det kan vara till stor hjälp för komplexa uppgifter, t.ex. bulkval, eller tilldelning av roller, uppgifter, ansvar. Det är den enda användargränssnittskomponenten som gör att användare kan granska sin fullständiga urvalslista sida vid sida med källlistan innan de begår (även kallad "Överföringslista"). Faktum är att dubbel listbox ofta är snabbare, mer exakt och mer tillgänglig än dra-och-släpp. Användbarhetsöverväganden En viktig anmärkning att komma ihåg är att alla listtyper måste stödja tangentbordsnavigering (t.ex. ↑/↓ piltangenter) för tillgänglighet. Vissa människor kommer nästan alltid att lita på tangentbordet för att välja alternativ när de börjar skriva.
Utöver det:
För listor med 7+ alternativ, överväg att lägga till funktionerna "Markera alla" och "Rensa alla" för att effektivisera användarinteraktionen. För långa listor med en kombinationsruta, exponera alla alternativ för användare på klick/tryck, eftersom de annars kanske aldrig syns, Viktigast, visa inte icke-interaktiva element som knappar för att undvika förvirring – och visa inte interaktiva element som statiska etiketter.
Avslutning: Inte allt är en rullgardinsmeny Namn spelar roll. En vertikal lista med alternativ beskrivs vanligtvis som en "rullgardinsmeny" - men ofta är den lite för generisk för att vara meningsfull. "Rullgardinsmeny" antyder att listan är dold som standard. "Multiselect" innebär flerval (kryssruta) i en lista. "Combobox" innebär textinmatning. Och "Listbox" är helt enkelt en lista över valbara objekt, synliga hela tiden. Målet är inte att stämma överens med definitionerna ovan för sakens skull. Men snarare för att anpassa intentionerna - tala samma språk när du bestämmer dig för, designar, bygger och sedan använder dessa UI-komponenter. Det borde fungera föralla – designers, ingenjörer och slutanvändare – så länge statiska etiketter inte ser ut som interaktiva knappar och radioknappar inte fungerar som kryssrutor. Möt "Designmönster för AI-gränssnitt" Möt Design Patterns For AI Interfaces, Vitalys nya videokurs med praktiska exempel från verkliga produkter – med en live UX-utbildning som snart kommer att ske. Hoppa till en gratis förhandsvisning. Möt designmönster för AI-gränssnitt, Vitalys videokurs om gränssnittsdesign och UX.
Video + UX Training Endast videoVideo + UX Training $ 450,00 $ 799,00 $
Få Video + UX Training30 videolektioner (10 timmar) + Live UX Training.100 dagars pengarna-tillbaka-garanti. Video endast $ 275,00 $ 395,00
Få videokursen30 videolektioner (10h). Uppdateras årligen. Finns även som ett UX-paket med 3 videokurser.
Användbara resurser
Autocomplete: UX Guidelines, av Vitaly Friedman Combobox, från eBay 👍 Combobox, från Elastic Combobox, av Elisa Combobox, från MongoDB 👍 Combobox, från Visa 👍 Combobox, av Watson (Docplanner) Combobox, av Wikimedia Combobox, från Zendesk Multiselect (MongoDB Combobox Design Docs), av MongoDB 👍 Multiselect Lookup, av Wikimedia Multi-select Combo Box, av Vaadin Multiselect, från Visa Transfer (exempel på Listbox), av Ant Design Listbox, av Hopper Listbox, av Vaadin Listbox, från Visa Dual List Selector, av Red Hat (PatternFly) Dual Listbox, av Salesforce (Lightning Design System) Överföringslista, av Mantine Dual Listbox, av Dashlite Märken vs. Pills vs. Chips vs. Taggar, av Vitaly Friedman Listboxar kontra rullgardinslistor, av Anna Kaley (NN/g)
