#
UX/UI Design

Eingabefelder: Usability Checkliste

Usability in Formularen: Egal, ob Website, webbasierte Anwendung oder native App. In fast jedem Funnel steht vor der Conversion das Formular, mit dem Eingabefeld als zentralem Element. Das Feld für Texteingabe mag einfach wirken, doch für gute Usability gibt es einiges zu beachten. Besonders bei der mobilen Bedienung mit ihren besonderen Einschränkungen. Denn machst du es deinen Nutzern hier unnötig schwer, verlierst du potentielle Kunden. Hier findest du eine Checkliste mit 14 Fragen, die du für die Usability und UX von Eingabefeldern beachten solltest.
25/2/2021
Alexander Pelz

Usability Checkliste für Eingabefelder

Nutzen

1. Ist dieses Feld unbedingt erforderlich?

Je weniger Felder, desto einfacher für deine Nutzer.

  • Nur ein Feld für Name statt zwei für Vor- und Nachname.
  • Weglassen von Eingabefelder für Firma oder eine zusätzliche Adresszeile.

Beschreibung

2. Steht die Beschriftung darüber? (Nicht innerhalb, nicht unterhalb)

Steht das Label  darüber und ist es verständlich beschrieben?

3. Ist das Feld als erforderlich (*) oder optional gekennzeichnet?

Eine gut sichtbare Kennzeichnung hilft deinen Nutzern, sich auf das Wesentliche zu konzentrieren. Nichts ist schlimmer als Formularwände, bei denen man Pflichtfelder raten muss.

4. Sind alle Platzhaltertexte innerhalb des Feldes entfernt?

Platzhaltertexte können mit bereits ausgefüllten Feldern verwechselt werden. Zudem verschwinden diese bei der Eingabe.  Beschriftungen und wichtige Hinweise sollten außerhalb des Formularfeldes platziert sein, nicht als Platzhaltertext.

Bei der Nielsen Norman Group gibt es einen guten Artikel dazu.

Sichtbarkeit

5. Ist das Feld groß genug für die meisten möglichen Eingaben?

Hat das entsprechende Feld genügend Breite, um z.B. die meisten Namen oder E-Mail-Adressen vollständig anzuzeigen? Bei Feldern wie Postleitzahl oder Kreditkartennummer kannst du die Zeichenanzahl entsprechend begrenzen.

6. Ist das Feld im Hoch und Querformat sichtbar, wenn die Tastatur angezeigt wird?

Achte darauf, dass eine Tastatur nicht das Eingabefeld verdeckt. Es ist wichtig, dass deine Nutzer gleichzeitig schreiben und kontrollieren können.

Einfaches/Automatisches ausfüllen

7. Kannst du Auto-Fill für dieses Feld verwenden?

Lass deine Nutzer Felder automatisch ausfüllen. Zum Beispiel mit im Browser gespeicherten Adressdaten. Das spart Zeit und Nerven.

8. Können Telefonfunktionen (Kamera, GPS, Sprache, Kontakte)  werden?

Einfaches Beispiel ist die Abfrage des Standortes über das Gerät.

9. Kann das Feld basierend auf anderen Informationen berechnet werden?

Hast du die Postleitzahl, kannst du das Bundesland automatisch belegen.

Eingabe

10. Wird „Copy & Paste“ vom Feld unterstützt?

Besonders wichtig bei Zahlenreihen, die man lieber kopiert als manuell eingibt. Zum Beispiel einer IBAN.

11. Was ist die richtige Tastatur für dieses Feld?

In einem Feld für Zahlen sollte sich beim Endgerät auch sofort das entsprechende Ziffernfeld einblenden.

12. Können Vorschläge/Autovervollständigung basierend auf den ersten getippten Buchstaben gemacht werden?

Funktioniert besonders gut bei Feldern wie Land. Für Felder wie Namen, Adressen und E-Mail-Adressen darf natürlich keine automatische Korrektur stattfinden.

13. Sollen Tippfehler oder Abkürzungen erlaubt werden?

Versuche, Felder so gut wie möglich auf Tippfehler zu prüfen. Bei einer E-Mail-Adresse z.B. die Richtigkeit nach ISO-Norm prüfen.
„Erlaubte Zeichen/Ziffern“ @ „Erlaubte Zeichen/Ziffern“ . „Erlaubte Zeichen/Ziffern“

14. Wird die Eingabe in einem beliebigen Format erlaubt?

Besonders bei Daten in festen Formaten, wie z.B. bei Kreditkartendaten, empfiehlt es sich, die Eingaben automatisch zu formatieren.

Fazit

Jedes Eingabefeld anhand der Checkliste durchzugehen ist Arbeit. Aber besser, du „leidest“, als deine Nutzer.

Im Idealfall kannst du 100% der Checkliste für alle Eingabefelder auf deiner Website oder App erreichen. Alles andere bedeutet Abstriche bei der Usability und damit bei der User Experience.

Sind nicht genügend Ressourcen vorhanden, um alles umzusetzen: Sei pragmatisch und priorisiere. Felder, die häufig verwendet werden und unverzichtbare Felder für die Aufgabenerfüllung erhalten die höchste Punktzahl.

Quelle:
https://www.nngroup.com/articles/mobile-input-checklist/

Auch interessant:

Leadgenerierung: Grundlagen für eine bessere User-Experience (UX)

Usability: 10 Prinzipien für Interaktions-Design

Laws of UX – Richtlinien für User Experience Design

Teilen ist toll.
Zurück
Alexander Pelz
Senior UX Designer
Alexander Pelz ist UX-Designer mit über 10 Jahren Erfahrung im Bereich User Experience, Interface- und Interaction Design. Er legt besonderen Wert auf Barrierefreiheit, Designsysteme und Usability.
Ihr wollt mit unserer Expertise nach vorne streben?
JETZT KONTAKTIEREN
Weitere interessante Artikel