Gute Online-Formulare gestalten (Teil 2)

Wie versprochen, die nächsten 5 Tipps zur Verbesserung der Nutzungsfreundlichkeit. So können weitere Klippen der Formulargestaltung umschifft werden.

6.  Stülpen Sie die Innensicht sowie die Expertensprache der Unternehmung nicht nach aussen.
Vermeiden Sie Fachausdrücke des dargestellten Unternehmensbereichs. Falls nicht anders möglich, so versehen Sie den Begriff mit einer Information in Form eines Info-Icons mit dazu passendem Tooltipp. Schreiben Sie Informationen, deren Suche den Eingabefluss ausbremst, unterhalb des Labels oder unterhalb des Eingabefeldes.

Abbildung 1: www.axa-winterthur.ch Schadensmeldungsformular mit Tooltipp.

7. Achtung – Gestaltgesetze! Auf den ersten Blick werden die Labels und die Eingabefelder des untenstehenden Formulars als zwei voneinander visuell unabhängige „Blöcke“ empfunden. Die Erklärung liegt in den beiden wichtigsten Gestaltgesetzen: Dem Gesetz der Nähe und dem Gesetz der Ähnlichkeit. Problem: die Eingabefelder sehen gleich aus und haben kaum Abstand. Es ist für den Nutzer aufwändig, die Labels den Eingabefeldern zuzuordnen. Der Nutzer muss sich konzentrieren und hat einen erhöhten Cognitive Load (Kognitive Belastung). Das muss nicht sein. 

Abbildung2

Abbildung 2: www.zurrose.ch Registrierungsformular zur Bestellung.

Das Label und das dazugehörige Eingabefeld sind mühsam zusammen zu bringen.Am besten ordnet man die Labels näher zu den Eingabefeldern und erhöht allenfalls den vertikalen Abstand.

Abbildung 3

Abbildung 3: Optimierungsvorschlag: Zusammenrücken der Labels zu den Eingabefelder. Zudem wurde die Länge der Eingabefelder der Länge des Inhalts angepasst.

Abbildung 4
Abbildung 4: Optimierungsvorschlag: Die einzelnen Zeilen jeweils abwechselnd farblich hinterlegen.

8. Zeige dem Nutzer, wie er seine Daten (Geburtsdaten, Telefonnummern etc.) eingeben soll. Vermeide Überraschungen und werde nicht kreativ.
Abbildung 5

 

 

Abbildung 5: www.axa-winterthur.ch Vorgaben bspw. innerhalb des Eingabefeldes darstellen. Achtung: Bei weniger bekannten Eingaben, sollte die Eingabeform neben dem Label stehen.

9. Uups – Falscheingabe. Klar kommunizieren, wo eine Fehleingabe gemacht wurde und diesen Ort kenntlich machen.

Abbidlung 6

Abbildung 6: www.helsana.ch Meldung alleine reicht nicht aus. Vorteilhaft wäre, wenn man die zu korrigierende Zeile auch gleich kennzeichnet. Beispielsweise rot markiert, hinterlegt oder beschriftet.

Abbildung 7

Abbildung 7: www.ricardo.ch Bei der Neuregistrierung wird während der Eingabe und nach der Validierung direkt neben dem Eingabefeld die Fehlermeldung positioniert.

10. Und nun hat sich der Nutzer durchgewurstelt durch all die Formulare. Bitte belohnen sie ihn und sagen mindestens, was nun mit den eingegebenen Daten als nächstes geschieht. Beispiel einer Dankesmeldung: “Vielen Dank für Ihre Bestellung. Ihre Bestellbestätigung erhalten Sie per Email.”

Abbildung 8

Abbildung 8: www.axa-winterthur.ch Schöner, transparenter Abschluss eines Online-Formulars. Der Nutzer kann die Zusammenfassung gleich herunterladen und wird informiert, was er zu tun hat.

Hier geht’s zum 1. Teil: Gute Online-Formulare gestalten (Teil 1)

Iris Müller

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.