Online-Formular: Grundlagen zur optimalen Gestaltung von Formularen!

In diesem Beitrag erfährst du einiges über die Gestaltung von Formularen. Denn gerade zur Weihnachtszeit, in der vermehrt online gekauft, bestellt und gebucht wird, ist es umso wichtiger dem potentiellen Kunden das Ausfüllen der abzufragenden Daten und dem Versenden dieser, so einfach wie möglich zu gestalten.

Die Umsetzung muss daher, im Sinne eines erfolgreichen Abschlusses, im besonderen Einklang mit der Gestaltung eines Formulars sein. Daher habe ich eine Liste erstellt, die dabei behilflich sein kann, User erfolgreich durch das Ausfüllen eines Buchungs-, Bestellungs- oder Registrierungs-Formulars zu führen:

Gruppiere umfangreiche Formulare in entsprechende Fieldsets (bspw. für Anschrift, Bankdaten, Kontaktdaten). Das macht den Umgang mit den Formularen wesentlich übersichtlicher und einfacher für die User.
Verwende den legend-Tag zur Kennzeichnung der Überschrift des entsprechenden Fieldsets.
Frage nur die wirklich nötigen Daten ab und halte die Anzahl der Pflichtfelder so gering wie möglich. Allein der Anblick von zu umfangreichen Formularen, wirkt auf viele User abschreckend. Weniger ist also auch hier mehr!
Verwende aussagekräftige Bezeichnungen für die Label! Ein Label „Name“ mit zwei dahinterstehenden Eingabefeldern, ist nicht für jeden User eindeutig. Schon gar nicht wenn dieses Formular in mehreren Sprachen anwendbar sein soll. Folge: Der User überlegt, wird unsicher und bricht den Vorgang mit hoher Wahrscheinlichkeit eher ab.
Verwende möglichst kurze Bezeichnungen für die Label! Denke bei der Gestaltung vorausschauend an die möglichen „Grenzen des Formular-Layouts“. Passt es auch noch, wenn der User bspw. in älteren IE-Versionen die Schrift skaliert? Bleibt das Layout auch in englischer Sprache noch in dem vorgesehen Layout-Rahmen?
Achte auf die Ausrichtung zwischen Label und dem entsprechenden Formularelement. Die Abstände dürfen im Sinne einer leicht verständlichen Usability, nicht zu groß sein.
Gib dem User innerhalb der Eingabe- und Textfelder genügend Platz, um seine Daten eintragen zu können. Vor allem bei Namen, Anschriften oder Eingabefeldern für E-Mail-Adressen! Zu kleine Eingabefelder, hinterlassen unsichere User, die sich nicht mehr sicher sind, ob sie die Daten jetzt hier eintragen können oder nicht. Folge: Die Abbruchrate steigt!
Beschreibe am Anfang eines Formulars das Zeichen, mit dem Pflichtfelder markiert werden (bspw. dem oftmals eingesetzten Sternchen *). Am Ende eines Formulars ist diese Information bspw. für Screenreader-User alles andere als sinnvoll und hilfreich.
Markiere nach einem fehlerhaften Versenden der Formulardaten, die entsprechend Formularelemente. Am besten rot! Auch wenn „rot“ aktuell, von einigen eher mit dem Weihnachtsmann in Verbindung gebracht wird, ist es immer noch die Signalfarbe überhaupt!
Gib bei Fehlermeldungen zusätzliche Informationen in Form eines korrekt ausgefüllten Beispiels an bspw. in einem Tooltip). Das gibt dem User zusätzliche Sicherheit im Umgang mit den Daten!
Gib dem User die Möglichkeit den Kauf- oder Buchungsvorgang mittels eines Buttons beenden zu können (bspw. „Abbrechen“). Das gibt ihm Sicherheit in Bezug auf seine privaten Daten.
Der Button zum Versenden der Formulardaten, sollte idealerweise visuell auffälliger umgesetzt werden, als der Abbrechen-Button. Positioniere diesen Button immer rechts! Denn in den meisten Formularen wird dieser Button, rechts positioniert. Die meisten User sind nämlich daran gewöhnt. Wenn der Button zum „Bestellen“, links anstatt rechts positioniert ist und der Button zum „Abbrechen“ des Bestellvorganges rechts anstatt links, dann brauchst du dich über steigende Abbruchraten nicht zu wundern.
Stelle den Usern nach erfolgreichem Versenden der Formulardaten die Information mit dem Bestellvorgang „erfolgreich“ gewesen zu sein, auch visuell zur Verfügung. Bspw. „Vielen Dank, ihre Daten wurden erfolgreich versendet…“. Das gibt dem User zusätzlich Sicherheit und er muss sich nicht fragen, ob der Buchungs- oder Bestellvorgang erfolgreich war.
Gib dem potentiellen Kunden außerhalb des Formulars die Möglichkeit, sich mit dir in Verbindung setzen zu können. Bspw. anhand einer Telefonnummer, bei der man sich bezüglich inhaltlicher und fachlicher Dinge melden kann. Das schafft Vertrauen beim potentiellen Kunden und die Wahrscheinlichkeit eines Abbruchs dieses Buchungs- oder Bestellvorganges, wird somit geringer.