Benutzerfreundliche Formulare – Usability Formulare

Fast jede Webseite beinhaltet Formulare (Kontaktformular, Registrierung, Bestellung etc.). Deshalb ist es wichtig diese Benutzerfreundlich und Komfortabel zu gestalten. Schließlich soll der User es einfach haben, das Formular auszufüllen. Gerade bei einer Registrierung oder Bestellung sollte man auf viele Sachen achten, um nicht doch noch wichtige Kunden oder Mitglieder zu verlieren.

Wir haben eine Checkliste mit den wichtigsten Punkten für Benutzerfreundliche Formulare zusammengestellt. Diese Punkte sollte zum großen Teil eingehalten werden, um das beste Ergebnis zu erzielen.

1. nur notwendige Daten verlangen – weniger ist mehr

Es sollten nur die Daten verlangt werden, welche für weitere Schritte notwendig sind. Warum sollte der User bei einer Kontaktaufnahme zum Beispiel seine Adresse angeben, wenn er nur eine Information möchte. Deshalb wirklich nur benötige Daten abfragen, vor allem in der Zeit des Datenschutzes. Für eine Registrierung sollten Username und Passwort reichen.

2. Pflichtfelder deutlich kennzeichnen

Für den User muss sofort erkenntlich sein, welche Felder er ausfüllen muss und welche nicht. Meistens werden diese Felder mit einem Sternchen(*) gekennzeichnet, aber so erkennt sie kaum ein User. Entweder man unterteilt Sie in verschiedene Bereiche, erstellt einen Rahmen oder markiert Sie gesondert und auffallend.

3. Fehler deutlich kennzeichnen

Wenn Pflichtfelder nicht ausgefüllt sind oder es eine falsche Eingabe gibt, sollte dem User die Fehler visuell und in Textform angezeigt werden. Man kann z.Bsp. dem Input-Feld einen Roten Rahmen geben und dahinter schreiben was genau falsch ist.

4. strukturierte Gestaltung

Das Formular sollte eine klare Struktur haben und mit wichtigen HTML-Tags (fieldset, label, legend) versehen werden. Bei längeren Formularen kann man zusammengehörige Felder auf mehrere Seiten verteilen oder zumindest in verschiedene Bereiche aufteilen.

5. aussagekräftige Label/Bezeichnungen

Die Bezeichnung der Felder sollte man kurz und aussagekräftig sein. Der User sollte nicht groß überlegen müssen, was er nun in das Input-Feld schreibt. Eine lange Beschreibung kann man z.Bsp. mit einem Hover-Effekt über ein Bild mit Fragezeichen darstellen.

6. herstellen der eingegebene Daten

Im Fehlerfall ist es oft so, dass alle eingegeben Daten wieder verschwunden sind und man diese erneut eingeben muss. Viele User werden das Formular aber kein 2. Mal ausfüllen. Deswegen sollten allen Daten wieder in den richtigen Feldern ausgegeben werden.

7. Button zum Abbrechen

Der User fühlt sich sicherer, wenn er auch die Möglichkeit hat, den Vorgang (Bestellung etc.) abzubrechen. Deshalb sollte auch ein Reset-Button eingebaut werden. Dieser muss natürlich nicht so auffällig wie der Sende-Button sein.

8. Platz für die Eingabe

Die Felder sollten so groß gestaltet sein, dass der User mind. 30 Zeichen eingeben kann. Einige Besucher können nämlich verunsichert sein, wenn Sie nicht mehr Ihre ganzen eingegeben Daten sehen, weil das Feld zu klein ist. Deshalb die Größe der Felder lieber großzügig verteilen.

9. Richtige Feldtypen benutzen

Dem User sollten, wenn möglich, alle Eingaben vorgegeben werden. Z.Bsp. kann man bei der Anrede „Herr“ und „Frau“ vorgeben oder auch „Ja“ und „Nein“ beim akzeptieren der AGB. Wenn die Eingabe für ein bestimmtes Feld mehrzeilig ist oder mehr als 100 Zeichen hat, sollte dafür auch ein textarea-Feld verwendet werden.

10. Bestätigung nach Versand

Nach dem verschicken des Formulars sollten dem User eine Meldung ausgegeben werden, wie es nun weiter geht. Ein kleiner Text vielleicht sogar mit einem Bild sollte reichen.

Sauber, strukturiert und einfach müssen die Formulare gestaltet sein. Der User soll nicht lange überlegen müssen, was er eingibt. Wer sich an diese Punkte der Benutzerfreundlichkeit hält, wird sicher die Quote der abgeschickten Kontaktaufnahme, Registrierung und Bestellungen erhöhen.