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.
Bewerte diesen Artikel
3 Bewertung(en), durchschnittlich: 5,00 von 5
Loading...
Also auf den Abbrechen-Button kann man getrost verzichten. Warum schon soll jemand alle Eingaben löschen wollen? Und für den Fall, dass man auf eine andere Seite wechseln will, sollte man den Link aussagekräftig beschriften (z. B. Warenkatalog), aber sicher nicht „abbrechen“.
„Warum schon soll jemand alle Eingaben löschen wollen?“ Weil es sich während eines Buchungs- oder Bestellvorganges nicht gerade wenig User anders überlegen und eher noch nicht Buchen oder Bestellen wollen. Und die wollen ihre persönlichen Daten gelöscht wissen und sich am Ende nicht noch fragen müssen, haben die jetzt meine Daten oder nicht?
Vor allem ältere oder weniger erfahrene User im Umgang mit dem Medium, sind diesbezüglich oft unsicher. Eine klare „Ansage“, ist hier durchaus hilfreich als störend. Bei Buchungsabläufen, denen andere Übersichten vorausgehen, kann bzw. sollte man natürlich wie von dir beschrieben, den „Schritt zurück“ wählen und den Button aussagekräftig beschriften.
Kann es sein, dass bei der Beantwortung von Andreas seiner Äusserung die Problematik „Abbrechen-Button“ von zwei unterschiedlichen Formularen betrachtet wurde. Bei einfachen Kontaktformularen finde ich diesen Button auch überflüssig. Bei komplexeren Formularen sollte man Lösungen anbieten, um zum Beispiel bereits eingegebene Daten, die man behalten will, noch zwischengespeichert werden. Um diesen „Abbrechen-Button“ gibt es viele Meinungen und letztendlich muss sich der zuständige Designer entscheiden.
Natürlich ist der Aspekt des Abbrechens, nur bei umfangreichen Formularen nötig und nicht bei einem Kommentarformular.