Formulardesign

Hallo!

Als frisches Teammitglied von Liechtenecker beschäftige ich mich in meinem ersten Blogeintrag mit einem (auf den ersten Blick) trockenen Thema: Dem Design von Formularen.
Täglich sind wir im Internet mit vielen unterschiedlichen Typen von Formularen konfrontiert: Dabei reicht die Spanne von Loginformularen, über die Registrierung bei Websites bis hin zu hochkomplexen und mehrstufigen Formularen, z.B. für das Finanzamt. Wie man den Prozess des Ausfüllens für die User einfacher und vor allem frustfreier gestalten kann, werde ich im Folgenden beschreiben.

Validierung, Validierung, Validierung

Über Jahren dominierte das Thema der Formularvalidierung alle Artikel über Usability bei Formularen auf Webseiten. Im Laufe der Jahre sind immer ausgereiftere Methoden und Frameworks entwickelt worden, um die Validierung für den User so einfach und nachvollziehbar wie möglich zu machen.
Trotz des großen Interesses und der Vielzahl an Artikeln über diesen Aspekt, gehört die Validierung von Usereingaben immer noch zu den schwierigsten, aber gleichzeitig auch wichtigsten Aspekten, bei der Gestaltung eines guten Formulars.
Dazu zählen zunächst die grundlegenden Anforderungen. Der Benutzer sollte seine Daten nur einmal eingeben müssen und Fehlermeldungen sollten aussagekräftig und klar formuliert werden. In diesen Punkten hat sich in den letzten Jahren mit Sicherheit am meisten getan. Zusätzlich zu solch offensichtlichen Punkten sollten aber auch alle Entscheidungen, die der User getroffen hat, berücksichtigt werden. Dazu zählen vor allem die Auswahlmöglichkeiten bezüglich Newslettern, AGB oder sonstigen Daten, die per Checkbox abgefragt werden. Nichts kann den User mehr nerven (und gegebenenfalls den Prozess des Ausfüllens abbrechen lassen), als Wünsche nach einem Fehler, immer und immer wieder eingeben zu müssen.

Eingabe

Bild

Selten gibt es im Internet Formulare, die nicht eines oder mehrere optionale Felder haben. Besonders beliebt ist hierbei die Telefonnummer. Beim Design von Formularen sollte man sich aber stets fragen: Benötige ich überhaupt optionale Angaben oder wäre es besser, diese gleich ganz wegzulassen. Dies ist natürlich vor allem von der Branche abhängig – denn was macht z.B. ein Forum mit meiner Telefonnummer?
Die Reduzierung auf die wichtigsten Angaben hat für beide Seiten Vorteile: Der User muss kein unendlich langes Formular ausfüllen und ist motivierter, den Prozess abzuschließen. Auf der anderen Seite können sich die Betreiber der Website durch weniger Kunden, die das Ausfüllen im Prozess abbrechen, über mehr Kunden und Daten freuen.
Neben Eingabefeldern sieht man häufig Anweisungen für den User, wie er die eingegebene Information zu formatieren hat, also z.B. bei Telefonnummern die Aufforderung, die Nummer in bestimmtes Format zu bringen.
Das Ausfüllen des Formulars sollte für den User aber ein Prozess sein, der ohne Hürden (sind sie auch noch so klein) zu bewältigen sind. Gutes Formulardesign ist dadurch erkennbar, dass der User nicht dazu genötigt wird, seine Daten in Formate zu bringen, die dem Designer des Formulars vorschweben. Viel besser wäre es, die Daten nachträglich und ohne Zutun des Users zu formatieren (Leerzeichen und Sonderzeichen entfernen, …) um sie dann einheitlich in der Datenbank abzuspeichern.
Textlabels vertikal, links oder rechts ausgerichtet?
Folgende Grafik bereitet die Möglichkeiten bei der Ausrichtung von Textlabels von Formularfeldern visuell auf.

Als Faustregel gilt: für kurze Formulare mit wenig Feldern kann das Textlabel vertikal angeordnet werden, das erhöht die Geschwindigkeit beim Ausfüllen und sieht übersichtlich aus.
Bei längeren Formularen scheidet diese Variante durch den enorm gesteigerten, vertikalen Platzbedarf jedoch aus. Dann fällt die Entscheidung zwischen rechts- oder linksausgerichteten Textlabels. Linksausgerichtete Labels sind für den User schneller lesbar und wirken geordneter, nach rechts ausgerichtete Labels erhöhen den Zusammenhang zwischen Label und Eingabefeld.

Abschnitte

Wichtig ist, das Formular nicht zu lang werden zu lassen sondern an gegebenen Stellen abzutrennen und ein “Mehr-Schritt-System” daraus zu machen. Gute Beispiele hierfür sind vor allem Webshops mit dem üblichen Ablauf Warenkorb > Daten > Zahlung > Zusammenfassung.
Dabei ist es wichtig, dem Benutzer jederzeit Feedback darüber zu geben, in welchem Schritt des Prozesses er sich befindet und welche Schritte noch vor ihm liegen.
Rechnet der User z.B. seine Bestellung nochmals überprüfen zu können, bevor er diese Abschickt, das Formular aber einerseits keine Information darüber gibt, wo im Prozess er sich befindet und andererseits auch keine Seite mit Zusammenfassung existiert, birgt das enormes Frustpotential.

Sekundäre Buttons

Bild

Häufig trifft man neben den essentiellen Primärbuttons am Ende eines Formulars auch auf Sekundärbuttons, die es dem User z.B. ermöglichen sollen, das Formular mit einem Klick zurückzusetzen oder den Prozess abzubrechen.
Da dies zwar durchaus nützliche Funktionen sein können aber vom Benutzer nicht ausgeführt und vor allem nicht unabsichtlich ausgelöst werden sollten muss darauf geachtet werden, auch das Verhältnis zwischen Primärbutton und Sekundärbutton in der grafischen Aufbereitung widerzuspiegeln.

Abschluss

Ein kurze Zusammenfassung ergibt also: Das Ausfüllen eines Formulars sollte für den User so schnell und einfach wie möglich gehen. Dabei sollte der User auf Fehler bei seinen Eingaben hingewiesen werden und vor allem zu nichts gezwungen werden. Große Formulare sollten in kleinere Teile heruntergebrochen werden, der User sollte aber generell immer über seinen Fortschritt beim Ausfüllen informiert werden. Frustrierende Fallen (unabsichtliches Rücksetzen des Formulars) sollten nach Möglichkeit abgeschwächt werden.
Generell gilt lieber mehr Zeit in die Entwicklung eines Formulars zu stecken als im späteren Verlauf Kunden zu verlieren, die durch ein Problem in der Usability abgeschreckt worden sind.
Ich hoffe ich konnte mit diesem Blogbeitrag einige Aspekte des Formulardesigns aufgreifen und behandeln und freue mich schon auf meinen nächsten Beitrag!