Webstandard & Webdesign - CSS, HTML

 

Grundlagen der Gestaltung von Formularen

Dieser Artikel greift wieder einmal das bei einigen unbeliebte Thema der Gestaltung von Formularen auf. 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 haben wir eine Liste mit 14 Punkten erstellt, die dabei behilflich sein kann, User erfolgreich durch das Ausfüllen eines Buchungs-, Bestellungs- oder Registrierungs-Formulars zu führen.

Grundlagen der Gestaltung von Formularen

• Gruppiert umfangreiche Formulare in entsprechende Fieldsets ( bspw. fü Anschrift, Bankdaten, Kontakdaten ). Das macht den Umgang mit den Formularen wesentlich übersichtlicher und einfacher für die User.
• Verwendet den legend-Tag zur Kennzeichnung der Überschrift des entsprechenden Fieldsets.
• Fragt nur die wirklich nötigen Daten ab und haltet 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!
• Verwendet 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.
• Verwendet möglichst kurze Bezeichnungen für die Label! Denkt 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?
• Achtet 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!
• Beschreibt 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.
• Markiert 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. Positioniert diesen Button immer rechts! Denn in den meisten Formularen wird dieser Button, rechts positioniert. Die Meisten User sind daran gewöhnt. Wenn der Button zum "Bestellen", links anstatt rechts positioniert ist und der Button zum "Abbrechen" des Bestellvorganges rechts anstatt links, dann braucht ihr euch öber steigende Abbruchraten nicht zu wundern.
• Stellt 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 Euch 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.

Es muss nicht dem Zufall überlassen werden, ob jemand in einem Online-Shop das Zeil seiner Begierde bestellt oder den wohlverdienten Urlaub bucht. Anhand der oben aufgeführten Liste ist zu erkennen, dass eben auch in der oftmals ungeliebten Gestaltung von Formularen, manchmal nur wirklich Kleinigkeiten den Unterschied zwischen Erfolg und Mißerfolg ausmachen. Wer mehr über Tipps und Tricks im Umgang mit Formularen und der Gestaltung dieser via CSS erfahren möchte, wird im Buch "CSS-Design. Die Tutorials für Einsteiger" fündig.