Nutzerfreundlichkeit von Websiteformularen: Top 10 Empfehlungen
Befolgen Sie diese fest etablierten - aber häufig ignorierten - Leitlinien, um sicherzustellen, dass die Nutzer Ihre Website-Formulare erfolgreich ausfüllen können.
by Kathryn Whitenton (deutsche Übersetzung) - 1. Mai 2016
Die amerikanische Verkehrssicherheitsbehörde (Transportation Security Administration - TSA) hilft Flugreisende zu schützen. Aber da die Verzögerungen oder das erzwungene Ausziehen in der Öffentlichkeit garantiert auch eine Menge Leute verärgert, würden Sie erwarten, dass die TSA eine beträchtliche Menge an Beschwerden erhält.
Als ich also zum ersten Mal das Beschwerdeformular der TSA sah, erschien der Design-Fehler so offensichtlich, dass ich mich fragte, ob es beabsichtigt sein könnte. Das Formular beinhaltet unten 2 Schaltflächen: Preview (Vorschau) und Clear Form (Formularinhalte löschen). Die Beschriftung Preview ist nicht ideal, da die meisten Nutzer eine Schaltfläche Submit (Absenden) oder zumindest Next (Weiter) erwarten würden. Aber das eigentliche Problem ist die Schaltfläche Clear Form, die in der Tat alle im Formular getätigten Eingaben löscht.
Absichtlich oder nicht, diese Anordnung vermindert zweifelslos die Anzahl der Beschwerden! Es verletzt allerdings auch eine Leitlinie für Formulardesign, die wir erstmalig vor über 15 Jahren verfasst haben: die Vermeidung des Reset Buttons in Webformularen.
Das Webformular von TSA enthält einen Button Clear Form, der Richtlinien zur Nutzerfreundlichkeit verletzt, die mehr als 15 Jahre alt sind. Um das Ganze noch schlimmer zu machen, ist der Button Clear Form dichter an den Eingabefeldern positioniert als der Button Preview, wodurch es noch wahrscheinlicher ist, dass Leute ihn aus Versehen anklicken (und verletzt die weitere Richtlinie zur Nähe zwischen Objekten und ihren Primäraktionen).
Ich habe vor kurzem festgestellt, dass das Design dieses Formulars nicht absichtlich schlecht war, da die TSA eigentlich ein zweites Beschwerdeformular hat, welches richtigerweise einen einzigen Button Submit unterhalb des Formulars nutzt. Da ein Formular der Richtlinie entspricht, scheint es wahrscheinlich, dass das schlechte Design der anderen Version nur zufälliger Natur ist.
Als Steuerzahler ist es beruhigend zu glauben, dass meine Regierungsbehörde nicht absichtlich schlechtes Design nutzt, um sich nicht meine Kommentare anhören zu müssen. Aber aus der UX-Perspektive ist es eine schmerzvolle Mahnung, dass trotz des Wirbels um und der Popularität von „UX“ in den vergangenen Jahren das grundsätzliche Verständnis für Nutzerfreundlichkeit oft immer noch fehlt. Selbst einfache Richtlinien, die fest etabliert sein sollten, sind oft unbekannt oder werden missachtet.
Umsichtiges Formulardesign hat einen erheblichen Einfluss auf die Geschwindigkeit, mit der Nutzer ein Formular verstehen und sorgfältig ausfüllen können.
Tatsächlich zeigt eine neue in CHI veröffentlichte Abhandlung von Seckler und ihren Kollegen, dass wenn Formulare grundlegenden Richtlinien zur Nutzerfreundlichkeit folgen, sich die Zeit des Ausfüllens signifikant verringert und Nutzer mit fast zweimal so hoher Wahrscheinlichkeit das Formular beim ersten Versuch fehlerfrei absenden (78% Erstversuch-Einsendungen bei Formularen im Einklang mit Richtlinien zur Nutzerfreundlichkeit gegenüber nur 42% bei Formularen, die diese missachten). Wenn Sie sich wundern, warum Ihr Konversionsprozess grosse Rückgänge auf Formularseiten hat, bietet diese Studie Ihnen vielleicht einen Anhaltspunkt: Nutzungsproblem mit Formularen schaden wirklich dem Geschäft.
Orientieren sich Ihre Websiteformulare an den besten Methoden der Benutzerfreundlichkeit?
Best Practices für das Design von Webformularen
Die beste Designlösung für jegliches Formular hängt von vielen Faktoren ab: der Länge des Formulars, dem Nutzungskontext und den erfassten Daten. Die von Ihnen zu nutzende genaue Implementierung kann unter bestimmten Umständen abweichen, aber das ist keine Entschuldigung, die Richtlinien komplett zu ignorieren. Nutzen Sie statt dessen diese Empfehlungen als Anfangspunkt und wenn Sie von diesen bewährten Erfolgsmethoden abweichen, vergewissern Sie sich, dass Sie hierfür einen guten Grund haben.
- Fassen Sie sich kurz. Der Mathematiker Blaise Pascal sagte bekanntermassen: „Ich habe dies länger gemacht als üblich, da ich nicht die Zeit hatte, es kürzer zu fassen.“ Dieser Grundsatz gilt für Webformulare ebenso wie für das Schreiben von Prosa. Das Entfernen unnötiger Felder erfordert mehr Zeit, aber der reduzierte Useraufwand und die erhöhte Erfüllungsrate entschädigen dafür. Entfernen Sie Felder, die Informationen abfordern, welche (a) anderweitig erlangt, (b) bequemer zu einem späteren Zeitpunkt erhoben oder (c) einfach weggelassen werden können. (Wir haben diese Technik kürzlich auf eines unserer eigenen Formulare angewandt und es von 6 Feldern auf nur 2 Felder reduziert.) Jedes Mal, wenn Sie ein Formular um ein Feld oder eine Frage kürzen, erhöhen Sie seine Konversionsrate - so einfach ist das Geschäftsszenario für diese Leitlinie.
- Gruppieren Sie visuell verwandte Bezeichnungen und Felder. Bezeichnungen sollten nahe bei den Feldern sein, die sie beschreiben (unmittelbar über dem Feld für kürzere Desktop- und Handyformulare oder neben dem Feld für extrem lange Desktopformulare). Vermeiden Sie mehrdeutige Abstände, wo Bezeichnungen abstandsgleich von mehreren Feldern sind und stellen Sie sicher, dass das Bezeichnungsmerkmal für Bildschirmnutzer eingefügt ist. Wenn Ihr Formular zwei unterschiedliche Themen abfragt, teilen Sie es in zwei separate Gruppen von Feldern (und kennzeichnen Sie die Gruppen für Bildschirmnutzer).
- Präsentieren Sie Felder in einem einspaltigen Layout. Mehrere Spalten unterbrechen die vertikale Dynamik beim Abfahren des Formulars. Bevor man den Nutzern abverlangt, sich visuell neu zu orientieren, halten Sie sie im Flow indem Sie an einer einzigen Spalte mit einer separaten Zeile für jedes Feld festhalten. (Ausnahmen von dieser Regel: kurze und/oder logisch zusammengehörige Felder wie z.B. Stadt, Bundesland und Postleitzahl können in derselben Zeile dargestellt werden.)
- Nutzen Sie eine logische Ablaufplanung. Bleiben Sie bei üblichen Abfolgen sowohl für Felder (z.B. Kreditkartennummer, Ablaufdatum, Sicherheitscode) als auch für die Werteauswahl (z.B. Standardversand, Eilversand, Expressversand). Ziehen Sie aber für Feldwerte auch die Nutzungshäufigkeit in Betracht und listen Sie die häufigsten Werte wenn möglich zuerst auf. Helfen Sie Tastaturnutzern indem Sie die Tab-Tastennavigation testen, um sicherzustellen, dass sie der richtigen Feldreihenfolge folgt.
Die Starbucks iPhone-App, die ein mobiles Formular beinhaltet, welches Ihnen erlaubt, Ihre Getränkebestellung an Ihre Wünsche anzupassen, verbirgt leider die Option „full Decaf“ rechts ausserhalb des Screens, was ein horizontales Scrollen erfordert. Wenn „full Decaf“ öfter ausgewählt wird als die anderen Optionen, dann sollte sie zuerst angezeigt werden. - Vermeiden Sie Platzhaltertext. Designer mögen Platzhaltertext, weil es visuelle Unordnung vermeidet. Allerdings verursacht Platzhaltertext viele Nutzungsprobleme und sollte am besten vermieden werden.
- Stimmen Sie Felder auf den Typ und die Grösse der Eingabe ab. Vermeiden Sie Drop-Down-Menüs, wenn es nur 2 oder 3 Optionen gibt, die auch als Optionsfelder dargestellt werden könnten (die nur eines einzigen Klicks oder Taps bedürfen). Textfelder sollten etwa die gleiche Grösse wie die erwartete Eingabe haben, denn sie sind extrem fehleranfällig, wenn Nutzer nicht ihren kompletten Eintrag sehen können. Für 2.130 kürzliche Teilnehmer an der UX Konferenz zum Beispiel bewegte sich der Wohnort der Nutzer zwischen 3 Zeichen (Leo, Indiana) und 22 Zeichen (San Pedro Garza Garcia, Mexico). 99,9 % der Städtenamen bestanden aus 19 Zeichen oder weniger, womit 19 Zeichen eine angemessene Breite für ein Stadt-Feld waren.
- Kennzeichnen Sie optionale und erforderliche Felder. Zunächst entfernen Sie so viele optionale Felder wie möglich (siehe oben angeführte erste Empfehlung). Wenn einige Felder wirklich notwendig sind, sich aber nur auf eine Teilmenge von Usern beziehen, lassen Sie die Nutzer dies nicht durch das Trial-and-Error-Prinzip herausfinden. Beschränken Sie das Formular auf nur 1 oder 2 optionale Felder und kennzeichnen Sie diese deutlich als optional.
- Erläutern Sie alle Erfordernisse der Eingabe oder Formatierung. Wenn ein Feld ein spezifisches Format oder Eingabeart erfordert, nennen Sie die exakten Anweisungen. Lassen Sie die Nutzer nicht Ihre unbekannten Kennwortanforderungen erraten. Das gleiche gilt für Syntaxregeln wie Interpunktion oder Leerzeichen für Telefonnummern oder Kreditkarten. (Obwohl Sie so weit wie möglich diese unbegründeten Formatierungsregeln beseitigen sollten: Tod den Klammern für Telefonnummer-Vorwahlen!)
Das Formular Reset Password (Kennwort zurücksetzen) von Netgear erläutert seine Kennwortanforderungen ... aber nur als eine Fehlermeldung nachdem Sie den Test nicht bestanden haben. Führen Sie Ihre Nutzer nicht mit geheimen Regeln aufs Glatteis. - Vermeiden Sie die Buttons Reset und Löschen. Das Risiko des versehentlichen Löschens wiegt schwerer als die unwahrscheinliche Notwendigkeit eines Neuanfangs in einem Webformular. Stellen Sie für Formulare, die extrem vertrauliche Eingaben wie finanzielle Informationen erheben, einen Button „Abbrechen“ zur Verfügung, um diejenigen Nutzer zu unterstützen, die das Formular verlassen und ihre Daten löschen möchten. Stellen Sie aber sicher, dass der Button Abbrechen visuell deutlich weniger hervorsticht als der Button Absenden, um versehentliche Klicks zu vermeiden.
- Stellen Sie gut sichtbare und konkrete Fehlermeldungen zur Verfügung. Fehler sollten durch eine Vielzahl von Hinweisen, nicht ausschliesslich durch Farbe, angezeigt werden: Konturieren Sie das Feld UND nutzen Sie roten Text UND eine kräftigere Schrift, um sicherzugehen, dass Nutzer diese entscheidende Information nicht übersehen. Dies ist nicht die Zeit, um subtil zu sein. Eine fehlerhafte Eingabe sollte bewahrt werden, damit Nutzer sie korrigieren können, verbunden mit einer konkreten Erklärung des Problems.
Schlussfolgerung
Die Nutzerfreundlichkeit von Webformularen ist mitnichten ein neues Thema. Es ist in Literaturhinweisen zur allgemeinen Usability behandelt worden (inkl. mehrerer NN/g Büchern über sowohl Richtlinien für Allgemeine Usability, Eyetracking-Untersuchungen als auch Mobile Usability). Viele der 114 UX-Richtlinien für E-Commerce-Warenkörbe sind spezifische Probleme im Formulardesign. Es gibt auch ganze Bücher speziell über Formulardesign und akademische Studien, welche die Effektivität der Einhaltung der Richtlinien darlegen.
Diese kurze Zusammenfassung soll nicht die gründliche Analyse in anderen Quellen ersetzen: Wenn Sie intensiv mit Formulardesign beschäftigt sind, lohnt es sich, die Feinheiten der optimalen Vorgehensweisen in verschiedenen Situationen zu verinnerlichen.
Allerdings haben viele schlechte Webformulare Probleme, die weder kompliziert noch komplex sind und durch eine einfache Erinnerung an das, was wir bereits wissen, hätten vermieden werden können. Schauen Sie sich die Formulare auf Ihrer Website an und stellen Sie sicher, dass sie diese wohlbekannten Fehler nicht machen. Wer weiss, vielleicht können Sie ja Ihre Konversionsrate verdoppeln.
Quellen:
Mirjam Seckler, Silvia Heinz, Javier A. Bargas-Avila, Klaus Opwis, und Alexandre N. Tuch. 2014. Design von verwertbaren Webformularen: empirische Auswertung von Richtlinien zur Verbesserung von Webformularen. Im Protokoll der SIGCHI Konferenz über menschliche Faktoren in Computersystemen (CHI ‘14). DOI=http://dx.doi.org/10.1145.2556288.2557265
© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.
Kommentare auf diesen Beitrag