Eine Checkliste für das Design von mobilen Eingabefeldern

Wenn Sie ein Eingabefeld für mobile Geräten gestalten, sollten Sie kontrollieren, ob es die Liste von 14 Usability-Voraussetzungen erfüllt.

 

by Raluca Budiu (deutsche Übersetzung) - 14.06.2015

 

Egal, ob Sie Websites, webbasierte Anwendungen (z.B. SaaS) oder native mobile Apps gestalten, einer der Grundbausteine ist das einfache Texteingabefeld: ein Kästchen, in das der Nutzer Text eingeben kann. Die Verwendungszwecke dieses Widgets sind umfangreich und nicht das Thema dieses Artikels. Beim Anwendungsdesign gibt es zahlreiche Probleme, die mit dem Workflow und anderen wichtigen Fragen zusammenhängen, welche ausschlaggebend für eine gute App-UX sind. (Mehr Informationen zu diesen Themen finden Sie in unserem ganztägigen Kurs über das App-Design (engl.))

In diesem Artikel konzentrieren wir uns auf die Grundlagen der Eingabefelder. Alle diese Probleme könnten banal erscheinen, weshalb sehr häufig gegen diese Usability-Richtlinien verstossen wird - vor allem in mobilen Nutzeroberflächen, auf denen sogar die kleinste Beeinträchtigung zu grossen Problemen führen kann, was die Verzögerung für den Nutzer und die Durchführung von Aufgaben in Ihrem Design betrifft.

So sollte ein Eingabefeld aussehen:

Hier ist eine Checkliste mit 14 Richtlinien, die für mobile Eingabefelder befolgt werden sollten:

Sollte das Feld überhaupt angezeigt werden	1. Ist dieses Feld absolut notwendig?
Beschreibung	2. Befindet sich das Label darüber? (nicht darin oder darunter) 3. Wird das Feld als Pflichtfeld (*) markiert oder ist es optional? 4. Haben Sie Platzhalter aus dem Feld entfernt?
Sichtbarkeit	5. Ist das Feld gross genug, damit so viele Feldwerte wie möglich sichtbar sind? 6. Ist das Feld in beiden Ausrichtungen (hoch und quer) sichtbar, während die Tastatur angezeigt wird?
Das Feld für den Nutzer ausfüllen	7. Haben Sie gute Standardwerte für dieses Feld? Steht ein Verlauf zur Verfügung? Häufig eingegebene Werte? 8. Können Sie Handyfunktionen (Kamera, GPS, Stimme, Kontakte) verwenden, um das Feld auszufüllen)? 9. Können Sie das Feld basierend auf anderen Informationen (z.B. Staat basierend auf der PLZ, Gutscheinfeld) für den Nutzer ausfüllen?
Eingabe	10. Unterstützen Sie Copy & Paste in das Feld? 11. Was ist die richtige Tastatur für dieses Feld? 12. Können Sie Vorschläge/automatische Vervollständigungen basierend auf den ersten eingegebenen Buchstaben anzeigen? Korrigieren Sie keine Namen, Adressen oder E-Mail Adressen automatisch. 13. Lassen Sie Rechtschreibfehler oder Abkürzungen zu? 14. Ermöglichen Sie es Nutzern, Eingaben in beliebigen Formaten zu tätigen (z.B. Telefonnummern, Kreditkarten) Sie können das Feld automatisch für den Nutzer formatieren.

Sehen Sie sich Ihr Design an und füllen Sie die Checkliste für jedes einzelne Eingabefeld aus. Ja, das bedeutet etwas Arbeit, es aber besser, selbst zu leiden, anstatt die Nutzer leiden zu lassen.

Idealerweise erreichen Sie 100% Checklisten-Compliance für 100% der Eingabefelder Ihrer Website oder App. Geringere Werte haben ein unterdurchschnittliches Nutzererlebnis zur Folge.

Nüchtern betrachtet, verfügen Sie wahrscheinlich nicht über ausreichende Ressourcen um 100% der UX-Bedürfnisse zu erfüllen. Versehen Sie in diesem Fall jene Felder, die am häufigsten verwendet werden oder am wichtigsten für die Aufgabenerledigung sind, mit einer höheren Priorität, um die höchstmögliche Punktzahl zu erreichen.

 

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.