• Startseite
  • UX Leistungen und Services
  • Über mich
  • Blog
  • Kontakt
Youitive
  • Startseite
  • UX Leistungen und Services
  • Über mich
  • Blog
  • Kontakt

Konzepten

  • Home
  • Blog
  • Konzepten
  • UI Patterns: Freitext- oder Auswahlfeld? Es geht auch beides!

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
Option 1
Option 2
Option 3

Der Hybrid.zip

Tag:Interaction Design, Konzept, Patterns, Usabililty, User Experience, UX

  • Teilen:
author avatar
Björn Frieling

Previous post

Sehr gute Usability durch 7 Prinzipien einfach erlangen
23. März 2019

Next post

Was kann ein UX Konzepter von ToDo – Listen lernen
28. März 2019

You may also like

Das Bild zeigt einige Bilder welche auf einem Tisch gelegt wurden. Diese sind wie in dem Gesellschaftsspiel Memory angeordnet. Normalerweise können Menschen sich 7±2 dieser Bilder merken.
Usability Richtlinie: Die 7 ± 2 Regel
25 Juli, 2021
Titelbild zum Thema Dark UX - Es zeigt die dunkle silhoutte eines Mannes
Dark UX und Dark Patterns
23 Mai, 2021
Das Bild zeigt die Startseite von https://www.youitive.de wie sie ein Farbenblinder wahrnehmen würde
12 Tipps für Barrierefreiheit in deinem Konzept
29 November, 2020

Search

Kategorien

  • Agile
  • Allgemein
  • Konzepten
  • Nutzungskontextanalyse
  • Strategie
  • User Research

Neuste Artikel

Das Bild zeigt einige Bilder welche auf einem Tisch gelegt wurden. Diese sind wie in dem Gesellschaftsspiel Memory angeordnet. Normalerweise können Menschen sich 7±2 dieser Bilder merken.
Usability Richtlinie: Die 7 ± 2 Regel
25Jul2021

Was ist die 7 ± 2 Regel? Bei der 7 ± 2 Regel spricht man bei User Experience und Usability davon, dass deinem Nutzer nur 7 Items ± 2 gleichzeitig präsentiert werden sollten. Diese Regel findet vor allem häufig Anwendung …

Die Abbildung zeigt einen Standardaufbau der Priorisierungsmatrix mit den 4 Quadranten und deren Beudeutung. Alle Funktionen welche rechts oben sind, sollte höhere priorisiert werden. Links oben und rechts unten werden Funktionen eingetragen, welche dann vielleicht später umgesetzt werden sollten. Funktionen welche links unten stehen, sollte nicht umgesetzt werden.
Priorisierungsmatrix – Im Team UX Entscheidungen treffen
26Jun2021

Eine Priorisierungsmatrix hilft dir und deinem Team UX Entscheidungen für neue Funktionen zu treffen. In agilen Teams ist die Priorisierung meist Aufgabe des Product Owners, allerdings kannst du ihn dabei gut unterstützen. Sollte dein Team nicht konstant von außen priorisiert …

Titelbild zum Thema Dark UX - Es zeigt die dunkle silhoutte eines Mannes
Dark UX und Dark Patterns
23Mai2021

Was ist Dark UX - Definition Unter Dark UX versteht man, das Ausnutzen bestimmter Patterns und Richtlinien, um aktiv die Kunden- und Nutzerentscheidung zu sabotieren. Dabei verwendest du für dein Interaktionsdesign die gleichen Prinzipien, Gesetze, Richtlinien und Inidikatoren wie bei …

UX Online Kurs

Du willst mehr über UX lernen? Dann kannst du über folgenden Link an meinem Online Kurs teilnehmen.

Zum Udemy Kurs

  • AGB
  • Impressum
  • Datenschutzerklärung

+49 176 848 592 65
info@youitive.de

Wir nutzen Cookies um dein Nutzererlebnis zu steigern. Bitte klicke auf 'Akzeptieren' um den vollen Funktionsumfang der Website zu nutzen. Ohne Cookies kann es zu Funktionseinschränkungen (längere Ladezeiten kommen).
Akzeptieren Ablehnen

Weitere Informationen
Datenschutz

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
immer aktiv
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SPEICHERN & AKZEPTIEREN