UI Patterns: Freitext- oder Auswahlfeld? Es geht auch beides!
- Autor Björn Frieling
- Kategorien Konzepten
- Date 23. März 2019
Gute Usability in Formularen ist oft schwer zu erlangen. In Formularen kommt es ab und an zu der Situation, dass der Nutzer entweder etwas frei eingeben soll (Freitextfeld) oder er aus einer begrenzten Auswahl eine Option auswählen muss. Für eine begrenzte Auswahl nutzen wir oft Dropdown Menüs oder eine Gruppe von Radio Buttons. Der Vorteil einer begrenzten Auswahl ist meist, dass sie zu einer besseren Usability führt.
Eingabemöglichkeiten
Variante Radio Buttons:
Bitte wählen Sie eine Option aus
Variante Dropdownfeld:
Wenn wir die Auswahl nicht eingrenzen können, dann verlangen wir von dem Nutzer eine Freitext-Eingabe. Das Problem bei diesen Eingaben ist oft, dass der Nutzer zunächst verunsichert reagiert, da er nicht genau weiß, welche Eingabe von ihm erwartet werden. Um dem entgegenzuwirken, unterstützen wir den User oft mit prägnanten Labels, Placeholdern und einer guten Validierung des Feldes. Wir versuchen die 7 Dialogprinzipien der Usability anzuwenden und passen beispielsweise die Länge des Feldes an den zu erwarteten Wert an.
Auch wenn alle Daten korrekt eingetragen wurden, können weitere Nachteile bei Freitext-Eingaben entstehen. Die Eingaben können oft nicht automatisiert weiterverarbeitet werden. Auch die Datenqualität leidet des Öfteren unter Freitext-Eingaben.
In den meisten Fällen weißt du als UX Professional bereits, welche Daten du vom Nutzer benötigst. Du möchtest dem User zum einen Vorschläge zur Eingabe unterbreiten, ihm trotz allem aber die Möglichkeit lassen einen alternativen Wert einzutragen? Dann gibt es dafür verschiedene Lösungen.
Eine häufig verwendete Möglichkeit ist die Option "Sonstiges" anzubieten. Dies lässt sich sowohl via Radio Buttons als auch über ein Dropdownfeld abbilden. Wenn der Nutzer diese Option wählt, kann ein weiteres Freitextfeld freigeschalten werden (vorher inaktiv). Dort kann der User dann seinen sonstigen Wert eintragen.
Bitte wählen Sie eine Option aus
Der Hybrid
Es gibt eine Alternative zur obigen Lösung - ein Hybrid aus Freitextfeld mit Autosuggest Funktion bzw. konkreten Auswahlmöglichkeiten.
Sobald der Nutzer das Freitextfeld fokussiert, öffnet sich darunter ein Dropdown in Form einer Vorschlagsliste an Optionen. Der Vorteil ist, dass der Nutzer konkrete Beispiele erhält und er sich somit ein besseres Bild machen kann, welche Eingabe konkret von ihm erwartet wird.
Ihm ist es zum einen selbst überlassen, ob er losgelöst von der Vorschlagsliste eine alternative Eingabe in das Freitextfeld eintippen möchte. Zum anderen kann er aber auch einen Eintrag aus der Vorschlagliste auswählen. Dazu muss er diesen nur anklicken. Der User wird also in seiner Eingabe unterstützt. Die erhöhte Effizienz verbessert auch die Usability. Rechtschreibfehler werden vermieden und die Datenqualität wird erhöht.
Aber probier es doch einfach selbst mal aus. Wir haben für dich einen kleinen Prototypen vorbereitet und stellen dir das Pattern als Axure Library zur Verfügung.
Demonstration und Axure Library
x
You may also like
Usability Richtlinie: Die 7 ± 2 Regel
Dark UX und Dark Patterns
