grafixx.at

Formulare stellen meistens eine große Hemmschwelle dar. Fast immer sind auch bei Formularen die höchsten Abbruchraten zu verzeichnen. Um dem entgegenzuwirken sollten Formulare zumindest schön Gestaltet sein, einwandfrei funktionieren und intuitiv bedienbar sein.

Das Thema mit der einwandfreien Funktion sollte natürlich selbstverständlich sein und viel mehr gibt es hierzu nicht zu sagen. Außer testen, testen, testen. Damit meine ich testen in verschiedenen Browsern, testen unterschiedlicher Benutzer und testen auf verschiedenen Endgeräten.

Gestaltung und intuitive Bedienung liegen dagegen oft nahe beieinander und überschneiden sich zum Teil. Bei der Gestaltung sollte ein guter Mittelweg zwischen “altmodisch” anmutenden Standardformularfeldern und “durch Styles so veränderten Feldern, dass man diese nicht mehr als Eingabefelder erkennen kann”, gefunden werden. Das heißt: Submit Buttons sollten immer als Buttons erkennbar bleiben, je nach Design und Zielgruppe kann das jetzt etwas konservativer oder auch modernern ausfallen. Besonders wichtig ist auch, dass Pflichtfelder eindeutig als solche gekennzeichnet werden. Dadurch können einige Besucher die nicht bereit sind sämtliche Informationen anzugeben, doch  noch zur Angabe der Pflichtfelder ermuntert werden.

Mehrseitige Formulare
Lange Formulare sollten auf jeden Fall vermieden werden. Falls  viele Informationen abgefragt werden müssen, sollten diese in kleinere appetitliche Happen aufgeteilt werden. Daher sollte sich das Formular über mehrere Seiten erstrecken. Hierbei ist wichtig, dass an jeder Stelle ersichtlich ist, wie viele Seiten noch ausgefüllt werden müssen. Also die klassische Funktion sie befinden sich in Schritt 2 von 5, wie man sie von den klassischen Kaufprozessen von Onlineshops kennt. Zusätzlich muss auch die Funktion des Seiten wechseln berücksichtigt werden. Will also der Benutzer von Schritt 3 auf Schritt 2 wechseln, muss dieses möglich sein. Selbstverständlich muss ich hier nicht erwähnen, dass die zuvor angegebenen Daten noch vorhanden sein müssen. ;-)

Hilfetexte anbieten
Werden komplexere Informationen abgefrabgt sollten Hilfetexte angeboten werden. Hier hat es sich eingebürgert ein kleines Hilfesymbol neben dem Formularfeld zu implementieren. Bei Mouseover wird dann ein entsprechender Hilfetext eingeblendet. Solche kleinen Helferlein steigern neben den Konvertions auch die Datenqualität und sollten daher unbedingt implementiert werden. Nebenbei wirkt es auch sehr seriös und steigert das Vertrauen das der Benutzer in eine Website hat.

Google Adwords Hilfe

Formularüberprüfung in Echtzeit

Sehr schön finde ich persönlich eine Überprüfung der Formularinhlate in Echtzeit. So, dass z.B. direkt nach der Eingabe das entsprechende Feld rot eingerahmt wird, wenn eine fehlerhafte Eingabe vorliegt. Zusätzlich muss natürlich auch noch die Ursache für den Fehler nebenbei erklärt werden. Oder ein weiteres Beispiel ist ein Counter der die aktuell verfügbaren Zeichen anzeigt.

Sehr schön wurde das unter anderem bei webnews.de realisiert. Hier wird direkt nach der Eingabe des Captcha Codes eine Meldung “Sie haben den korrekten Code eingegeben” eingeblendet. Dadurch entfällt das oftmals lästige rätseln ob denn das jetzt ein I oder ein l ist. Einfach ausprobieren und man weiß schon vor dem Absenden ob es richtig war oder nicht.

Captcha Feld

Allerdings wurde hier auf eine Barrierefreie Version verzichtet. Je nach Zielgruppe oder, für öffentliche Organisationen Verpflichtung, muss auch noch eine Barrierefreie Variante angeboten werden. Auf vielen Seiten wird so etwas mit einem Link “Lassen Sie sich den Code vorlesen” realisiert. Aber das erwähne ich hier nur der Vollständigkeit wegen.

Zusammenfassende Tipps zur Formulargestaltung:

• Bei Click auf die Bezeichnung eines Formularfeldes sollte der Fokus direkt auf das entsprechende Feld gelegt werden.
• Sinnvollen Tabindex festlegen: Überprüfen ob beim Betäigen der Tab Taste die Felder in der korrekten Reihenfolge aktiviert werden.
• Submit Button: Nach dem Absenden Button deaktivieren um dopplte Versendungen zu verhindern.
• Fehlermeldungen sollten aussagekräftig sein
• Lange Formulare sollten in mehrere Schritte unterteilt werden.
• Wird ein Fehler erst auf der Bestätigungsseite bemerkt, sollte der Benutzer mit einer eindeutigen Fehlermeldung zum ausgefüllten Formular zurückgeleitet werden. Es kommt immer wieder vor, dass in solchen Feldern sämtliche Eingaben des Benutzers gelöscht werden. Genau das muss verhindert werden.
• Bei Komplexen Informationen sollten Hilfetexte angeboten werden.

Ähnnliche Beiträge:

1. Umsatz steigern durch bessere Bestellprozesse
2. Formularvalidierung in Echtzeit für zufrieden User
3. Transparenz und Umsatz in Online Shops steigern!