Dus wat is het verschil tussen combobox, multiselect, listbox en dropdown? Hoewel al deze UI-componenten op elkaar lijken, dienen ze verschillende doeleinden. De keuze komt vaak neer op het aantal beschikbare opties en hun zichtbaarheid. Laten we eens kijken hoe ze van elkaar verschillen, welk doel ze dienen en hoe je de juiste kunt kiezen – waarbij je gaandeweg misverstanden en verkeerde verwachtingen vermijdt.
Niet alle lijstpatronen zijn hetzelfde Alle hierboven gemarkeerde UI-componenten hebben precies één ding gemeen: ze ondersteunen de interacties van gebruikers met lijsten. Ze doen dat echter net iets anders. Laten we ze allemaal een voor een bekijken:
Dropdown → lijst is verborgen totdat deze wordt geactiveerd. Combobox → type om te filteren + selecteer 1 optie. Multiselect → typ om te filteren + selecteer veel opties. Keuzelijst → alle lijstopties zijn standaard zichtbaar (+ scrollen). Dubbele keuzelijst → verplaats items tussen 2 keuzelijsten.
Met andere woorden, Combobox combineert een tekstinvoerveld met een vervolgkeuzelijst, zodat gebruikers kunnen typen om te filteren en één enkele optie kunnen selecteren. Met Multiselect kunnen gebruikers veel opties selecteren (vaak weergegeven als pillen of chips). Keuzelijsten geven standaard alle lijstopties weer die zichtbaar zijn, vaak met scrollen. Het is handig als gebruikers alle beschikbare keuzes onmiddellijk moeten zien. Dubbele keuzelijst (ook wel overdrachtslijst genoemd) is een variant van een keuzelijst waarmee gebruikers items tussen twee keuzelijsten kunnen verplaatsen (links ↔ rechts), meestal voor bulkselectie. Verberg nooit veelgebruikte opties Zoals hierboven vermeld, hangt de keuze van de juiste UI-component af van 2 factoren: hoeveel lijstopties er beschikbaar zijn, en of al deze opties standaard zichtbaar moeten zijn. Alle lijsten kunnen ook boomstructuren, nesting en groepsselectie bevatten.
Er is één principe dat ik al jaren volg voor elk UI-onderdeel: verberg nooit veelgebruikte opties. Als gebruikers vaak op een bepaalde selectie vertrouwen, heeft het weinig zin om deze voor hen te verbergen. We kunnen het vooraf geselecteerd maken, of (als er maar 2 à 3 veelgebruikte opties zijn) ze weergeven als fiches of knoppen, en vervolgens de rest van de lijst op interactie tonen. Over het algemeen is het een goed idee om altijd populaire opties weer te geven, zelfs als dit de gebruikersinterface onoverzichtelijk maakt. Hoe kies je welke? Niet elke lijst heeft een complexe selectiemethode nodig. Voor lijsten met minder dan vijf items werken eenvoudige keuzerondjes of selectievakjes meestal het beste. Maar als gebruikers moeten kiezen uit een grote lijst met opties (bijvoorbeeld meer dan 200 items), zijn combobox + multiselect handig vanwege het snellere filteren (bijvoorbeeld landselectie).
Keuzelijsten zijn handig wanneer mensen toegang moeten hebben tot veel opties tegelijk, vooral als ze ook veel opties uit die lijst moeten kiezen. Ze kunnen nuttig zijn voor veelgebruikte filters.
Dubbele keuzelijsten worden vaak over het hoofd gezien en genegeerd. Maar het kan zeer nuttig zijn voor complexe taken, bijvoorbeeld bulkselectie of het toewijzen van rollen, taken en verantwoordelijkheden. Het is de enige UI-component waarmee gebruikers hun volledige selectielijst naast de bronlijst kunnen bekijken voordat ze een commit maken (ook wel 'Overdrachtslijst' genoemd). In feite is een dubbele keuzelijst vaak sneller, nauwkeuriger en toegankelijker dan slepen en neerzetten. Overwegingen voor bruikbaarheid Een belangrijke opmerking om in gedachten te houden is dat alle lijsttypen toetsenbordnavigatie (bijvoorbeeld de pijltjestoetsen ↑/↓) moeten ondersteunen voor toegankelijkheid. Sommige mensen vertrouwen bijna altijd op het toetsenbord om opties te selecteren zodra ze beginnen te typen.
Verder:
Voor lijsten met meer dan zeven opties kunt u overwegen de functionaliteiten “Alles selecteren” en “Alles wissen” toe te voegen om de gebruikersinteractie te stroomlijnen. Voor lange lijsten met een combobox stelt u alle opties beschikbaar aan gebruikers door te klikken/tikken, omdat ze anders misschien nooit worden gezien. Het belangrijkste is dat u niet-interactieve elementen niet als knoppen weergeeft om verwarring te voorkomen, en dat u interactieve elementen ook niet als statische labels weergeeft.
Afronding: niet alles is een vervolgkeuzelijst Namen zijn belangrijk. Een verticale lijst met opties wordt doorgaans omschreven als een ‘vervolgkeuzelijst’, maar vaak is deze een beetje te algemeen om zinvol te zijn. “Dropdown” geeft aan dat de lijst standaard verborgen is. “Multiselect” impliceert meervoudige selectie (selectievakje) binnen een lijst. “Combobox” impliceert tekstinvoer. En “Listbox” is eenvoudigweg een lijst met selecteerbare items, die altijd zichtbaar is. Het doel is niet om omwille van het feit consistent te zijn met de bovenstaande definities. Maar liever om de bedoelingen op elkaar af te stemmen: spreek dezelfde taal bij het beslissen over, het ontwerpen, bouwen en vervolgens gebruiken van deze UI-componenten. Het zou voor moeten werkeniedereen (ontwerpers, ingenieurs en eindgebruikers) zolang statische labels er niet uitzien als interactieve knoppen en keuzerondjes niet als selectievakjes fungeren. Maak kennis met “Ontwerppatronen voor AI-interfaces” Maak kennis met Design Patterns For AI Interfaces, de nieuwe videocursus van Vitaly met praktische voorbeelden van producten uit de praktijk – en binnenkort vindt er een live UX-training plaats. Ga naar een gratis voorbeeld. Maak kennis met Design Patterns For AI Interfaces, Vitaly's videocursus over interface-ontwerp en UX.
Video + UX-trainingAlleen videoVideo + UX-training$ 450,00 $ 799,00
Ontvang video + UX-training30 videolessen (10 uur) + live UX-training. 100 dagen geld-terug-garantie. Alleen video$ 275,00$ 395,00
Ontvang de videocursus30 videolessen (10 uur). Jaarlijks bijgewerkt. Ook verkrijgbaar als UX-bundel met 3 videocursussen.
Nuttige bronnen
Automatisch aanvullen: UX-richtlijnen, door Vitaly Friedman Combobox, van eBay 👍 Combobox, van Elastic Combobox, van Elisa Combobox, van MongoDB 👍 Combobox, van Visa 👍 Combobox, door Watson (Docplanner) Combobox, door Wikimedia Combobox, van Zendesk Multiselect (MongoDB Combobox Design Docs), door MongoDB 👍 Multiselect opzoeken, door Wikimedia Multi-select Combo Box, van Vaadin Multiselect, van Visa Overdracht (Listbox-voorbeeld), door Ant Design Lijstbox, van Hopper Lijstbox, door Vaadin Lijstbox, van Visa Dubbele lijstkiezer, door Red Hat (PatternFly) Dubbele keuzelijst, door Salesforce (Lightning Design System) Overdrachtslijst, door Mantine Dubbele Listbox, van Dashlite Badges versus pillen versus chips versus tags, door Vitaly Friedman Keuzelijsten versus vervolgkeuzelijsten, door Anna Kaley (NN/g)
