Was ist also der Unterschied zwischen Combobox, Multiselect, Listbox und Dropdown? Obwohl alle diese UI-Komponenten ähnlich erscheinen mögen, dienen sie unterschiedlichen Zwecken. Die Wahl hängt oft von der Anzahl der verfügbaren Optionen und ihrer Sichtbarkeit ab. Sehen wir uns an, wie sie sich unterscheiden, welchen Zweck sie erfüllen und wie man die richtige auswählt – und dabei Missverständnisse und falsche Erwartungen vermeidet.
Nicht alle Listenmuster sind gleich Alle oben hervorgehobenen UI-Komponenten haben genau eines gemeinsam: Sie unterstützen die Interaktion der Benutzer mit Listen. Allerdings tun sie dies etwas anders. Schauen wir uns jeden einzeln an:
Dropdown → Liste ist ausgeblendet, bis sie ausgelöst wird. Kombinationsfeld → Zum Filtern eingeben + 1 Option auswählen. Mehrfachauswahl → Zum Filtern eingeben + viele Optionen auswählen. Listbox → alle Listenoptionen standardmäßig sichtbar (+ Scrollen). Doppelte Listbox → Elemente zwischen zwei Listboxen verschieben.
Mit anderen Worten: Combobox kombiniert ein Texteingabefeld mit einer Dropdown-Liste, sodass Benutzer zum Filtern eine einzelne Option eingeben und auswählen können. Mit Multiselect können Benutzer viele Optionen auswählen (oft als Pillen oder Chips angezeigt). Listboxen zeigen alle standardmäßig sichtbaren Listenoptionen an, oft mit Scrollfunktion. Dies ist hilfreich, wenn Benutzer alle verfügbaren Optionen sofort sehen müssen. Duale Listbox (auch Transferliste genannt) ist eine Variante einer Listbox, die es Benutzern ermöglicht, Elemente zwischen zwei Listboxen (links ↔ rechts) zu verschieben, typischerweise zur Massenauswahl. Verstecken Sie niemals häufig verwendete Optionen Wie oben erwähnt, hängt die Wahl der richtigen UI-Komponente von zwei Faktoren ab: wie viele Listenoptionen verfügbar sind und ob alle diese Optionen standardmäßig sichtbar sein müssen. Alle Listen könnten auch Baumstrukturen, Verschachtelungen und Gruppenauswahl haben.
Es gibt einen Grundsatz, den ich seit Jahren bei allen UI-Komponenten verfolge: Häufig verwendete Optionen niemals ausblenden. Wenn sich Benutzer häufig auf eine bestimmte Auswahl verlassen, ist es kaum sinnvoll, diese vor ihnen zu verbergen. Wir könnten es entweder als Vorauswahl festlegen oder (wenn es nur zwei bis drei häufig verwendete Optionen gibt) sie als Chips oder Schaltflächen anzeigen und dann den Rest der Liste bei Interaktion anzeigen. Im Allgemeinen ist es eine gute Idee, beliebte Optionen immer anzuzeigen – auch wenn dies die Benutzeroberfläche unübersichtlich machen könnte. Wie wählt man welche aus? Nicht jede Liste benötigt eine komplexe Auswahlmethode. Bei Listen mit weniger als 5 Elementen funktionieren normalerweise einfache Optionsfelder oder Kontrollkästchen am besten. Wenn Benutzer jedoch aus einer großen Liste von Optionen auswählen müssen (z. B. mehr als 200 Elemente), sind Combobox und Mehrfachauswahl aufgrund der schnelleren Filterung (z. B. Länderauswahl) hilfreich.
Listenfelder sind hilfreich, wenn Benutzer auf viele Optionen gleichzeitig zugreifen müssen, insbesondere wenn sie auch viele Optionen aus dieser Liste auswählen müssen. Sie könnten für häufig verwendete Filter hilfreich sein.
Duale Listboxen werden oft übersehen und ignoriert. Es kann jedoch bei komplexen Aufgaben sehr hilfreich sein, z. B. bei der Massenauswahl oder der Zuweisung von Rollen, Aufgaben und Verantwortlichkeiten. Es ist die einzige UI-Komponente, die es Benutzern ermöglicht, vor dem Festschreiben ihre vollständige Auswahlliste neben der Quellliste zu überprüfen (auch „Übertragungsliste“ genannt). Tatsächlich ist eine duale Listbox oft schneller, genauer und zugänglicher als Drag-and-Drop. Überlegungen zur Benutzerfreundlichkeit Ein wichtiger Hinweis, den Sie beachten sollten, ist, dass alle Listentypen für die Barrierefreiheit die Tastaturnavigation (z. B. ↑/↓-Pfeiltasten) unterstützen müssen. Manche Leute verlassen sich fast immer auf die Tastatur, um Optionen auszuwählen, sobald sie mit dem Tippen beginnen.
Darüber hinaus:
Erwägen Sie bei Listen mit mehr als 7 Optionen das Hinzufügen der Funktionen „Alle auswählen“ und „Alle löschen“, um die Benutzerinteraktion zu optimieren. Stellen Sie bei längeren Listen mit einer Kombinationsbox den Benutzern alle Optionen per Klick/Tippen zur Verfügung, da sie sonst möglicherweise nie angezeigt werden. Am wichtigsten ist, dass Sie nicht interaktive Elemente nicht als Schaltflächen anzeigen, um Verwirrung zu vermeiden – und interaktive Elemente nicht als statische Beschriftungen anzeigen.
Zusammenfassung: Nicht alles ist ein Dropdown Namen sind wichtig. Eine vertikale Liste von Optionen wird normalerweise als „Dropdown“ beschrieben – oft ist sie jedoch etwas zu allgemein, um aussagekräftig zu sein. „Dropdown“ weist darauf hin, dass die Liste standardmäßig ausgeblendet ist. „Multiselect“ impliziert eine Mehrfachauswahl (Checkbox) innerhalb einer Liste. „Combobox“ impliziert die Texteingabe. Und „Listbox“ ist einfach eine Liste auswählbarer Elemente, die jederzeit sichtbar ist. Das Ziel besteht nicht darin, nur um der Sache willen mit den oben genannten Definitionen übereinzustimmen. Sondern um die Absichten in Einklang zu bringen – sprechen Sie die gleiche Sprache, wenn Sie sich für diese UI-Komponenten entscheiden, sie entwerfen, erstellen und dann verwenden. Es sollte funktionierenJeder – Designer, Ingenieure und Endbenutzer – solange statische Beschriftungen nicht wie interaktive Schaltflächen aussehen und Optionsfelder nicht wie Kontrollkästchen funktionieren. Lernen Sie „Entwurfsmuster für KI-Schnittstellen“ kennen Lernen Sie Design Patterns For AI Interfaces kennen, den neuen Videokurs von Vitaly mit praktischen Beispielen aus realen Produkten – in Kürze findet auch eine Live-UX-Schulung statt. Springen Sie zu einer kostenlosen Vorschau. Lernen Sie Design Patterns For AI Interfaces kennen, Vitalys Videokurs zu Interface-Design und UX.
Video + UX-SchulungNur VideoVideo + UX-Schulung450,00 $ 799,00 $
Holen Sie sich Video + UX-Schulung. 30 Video-Lektionen (10 Stunden) + Live-UX-Schulung. 100 Tage Geld-zurück-Garantie. Nur Video275,00 $395,00 $
Holen Sie sich den Videokurs30 Videolektionen (10h). Jährlich aktualisiert. Auch als UX-Bundle mit 3 Videokursen erhältlich.
Nützliche Ressourcen
Autovervollständigung: UX-Richtlinien, von Vitaly Friedman Combobox, von eBay 👍 Combobox von Elastic Combobox, von Elisa Combobox, von MongoDB 👍 Combobox, von Visa 👍 Combobox, von Watson (Docplanner) Combobox, von Wikimedia Combobox von Zendesk Multiselect (MongoDB Combobox Design Docs), von MongoDB 👍 Multiselect-Suche von Wikimedia Mehrfachauswahl-Kombinationsfeld von Vaadin Mehrfachauswahl per Visa Übertragung (Listbox-Beispiel) von Ant Design Listbox, von Hopper Listenfeld, von Vaadin Listbox, von Visa Dual List Selector, von Red Hat (PatternFly) Dual Listbox, von Salesforce (Lightning Design System) Transferliste, von Mantine Dual Listbox von Dashlite Abzeichen vs. Pillen vs. Chips vs. Tags, von Vitaly Friedman Listboxen vs. Dropdown-Listen, von Anna Kaley (NN/g)
