Webformular erstellen: Tipps & Fallstricke

Wann bist Du zuletzt an einem Webformular verzeifelt? Nicht nur Senioren verzweifeln regelmäßig an wirren Fehlermeldungen und Captcha-Abfragen. Worauf kommt es bei der Erstellung eines Webformulars also an?

Ein kritische Punkt bei der Umwandlung anonymer Websitebesucher in Neukunden ist oft ein Formular. Sei es in einem Shop oder bei der Registrierung für einen Newsletter. Hapert es hier, ist der Besucher unter Umständen für immer verloren. 

Du möchtest Webformulare gestalten, welche der User sofort versteht? In unserem Beitrag geben wir Dir Tipps und beschreiben übliche Fallstricke.

Ein kurzer Rückblick in Sachen Usability

Laut ISO-Norm DIN EN ISO 9241, 11 wird die Usability (Gebrauchstauglichkeit) folgendermaßen definiert: Usability ist das Ausmaß, in dem ein Produkt durch bestimmte Nutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen.

Die üblichen Schwächen von Webformularen

Bei fehlerhaften Eingaben muss das Formular komplett neu ausgefüllt werden

Jeder hat es bereits erlebt – jeder war bereits frustriert: Man gibt sich viel Mühe beim Ausfüllen eines Formulars und zack – alles weg! Nur weil man einen kleinen Fehler gemacht hat und nach Drücken des Absende-Buttons das Formular neu geladen wurde. Beim nächsten Ausfüllen steigt der Angstpegel, das Gleiche könnte noch einmal passieren. Merkt sich Dein Formular bereits gemachte Eingaben trotz Fehlermeldung?

Manchmal möchte der User seine Eingabe nochmals überprüfen oder korrigieren. Doch oft ist es gar nicht möglich, dorthin zurück zu gelangen. Integriere einen Zurück-Button in das Formular!

beispiel-webformular

Quelle: Seokratie

Unübersichtliche und viel zu lange Drop-Down-Listen

Hast Du auch schon mal eine Dropdown-Liste mit allen 194 anerkannten Staaten der Erde aufgeklappt – und solltest darin Deine Nationalität selektieren? Dabei unwissend, welche Schreibweise verwendet wird? Richtig ist, dass Dropdown-Listen maximal 10 bis 20 Einträge umfassen sollten – sonst verliert der Anwender schlicht und einfach den Überblick.

Die Alternative sind Autocomplete-Felder, welche während der Eingabe des Anwenders Zeichenketten vorschlägt. Google hat diese Technik bereits zum State of the Art gemacht. Mehr Informationen hier.

Beispiel-webformular-ux

Quelle: NextUX

Es wird eine kryptische Captcha-Eingabe verlangt

Seit vielen Jahren verbreitet und nach wie vor nervig sind unlesbare Captcha-Felder oder Rechenaufgaben, die Bestandteil eines Formulars sind. Damit soll sichergestellt werden, dass nur Menschen und keine Programme (Bots) Formulareingaben absenden.

Dabei sind sie in der Regel überflüssig, da gut programmierte Formulare kein attraktives Angriffsziel von Bots sind – und weil gut programmierte Bots im Nu Captcha-Felder knacken können.

bot-blockade

Als Alternative empfiehlt sich der Einsatz von Honeypots und/oder fail2ban. Mehr zu den Techniken findest Du bei DevGrow und Wikipedia.

Webformulare gestalten: 8 Tipps für Dich

1. Weniger ist mehr

Man kann es nicht oft genug wiederholen: Frage nur Felder ab, die wirklich wichtig sind. Jedes einzelne Feld, sei es optional oder obligatorisch, wirkt wie ein Filter. Ein Filter ist nicht per se schlecht, jedoch ungünstig, wenn interessante potenzielle Kunden herausgefiltert werden.

2. Best Practice zählt!

Achtet beim Aufbau und der Beschriftung des Formulars auf gängige Praxis. So auch bei der Reihenfolge der Felder. Schaut Euch im Zweifel einfach ein paar Formulare Eurer Wettbewerber an.

3. Erlaube Autofill bzw. Autocomplete!

Um das Ausfüllen von Formularen bequemer zu machen, unterstützen gängige Browser zwei HTML5-Features:

  • Autofill sorgt dafür, dass sich der Browser die vom User erfassten Eingaben merkt um dann zukünftig Formulare mit quasi einem Klick ausfüllen zu können. Das Problem: Der User verlässt sich allzu oft darauf, dass die Daten korrekt sind.
  • Autocomplete funktioniert ähnlich. Hier kann der User jedoch beim Ausfüllen entscheiden, welchen Wert er in das Feld einfügen möchte. Fehlerhafte Eingaben sind somit eher unwahrscheinlich.

Anders als Autocomplete lässt sich das Autofill-Feature leider nicht deaktivieren, zumindest nicht in Chrome. Die Gefahr, fehlerhafte Daten zu erhalten, bleibt also. Nutzt am besten eindeutige Attribute aus der WHATWG-Spezifikation.

4. Nutze responsive Darstellung!

Webformulare hinken in Bezug auf responsiver Darstellung oft hinterher. Dabei ist die Nutzung von Formularen in mobilen Endgeräten meistens ein Graus. Achte also darauf, dass Eure Formulare auch auf Tablet und Smartphone dem User Freude bereiten.

5. Führe den User durch das Formular!

Hat ein Formular mehrere Felder, so verliert ein User schon mal die Orientierung. Daher sollte das Formular stets das aktuell in Bearbeitung befindliche Feld hervorheben. Dazu gehört neben dem obligatorischen der Kursor auch eine optische Hervorhebung.

web-formular-beispiel

6. Verwende Icons zur Visualisierung von Optionen

Grafiken helfen dabei, den Inhalt von Optionen schneller und unmissverständlicher zu erfassen. Nutze daher Icons zur Beschreibung jeder Option.

webformular-mit-icons

7. Gebe verständliche Fehlermeldungen aus!

Allgegenwärtig sind im Netz Formulare, aus deren Fehlermeldungen man nicht schlau wird.

Unser Tipp

Erspare Dir großen Programmieraufwand und setze stattdessen das Attribut „required“ in Eure Pflichtfelder ein. Alle gängigen Browser unterstützen es und sorgen für eine zuverlässige Fehlermeldung in diesem Stil:

webformular-feld-validierung

Über Lokalisierung musst Du Dir keine Gedanken machen. Der Text erscheint automatisch in der Browsersprache. Einziger Wermutstropfen: Die Implementierung individueller Texte und Farben ist relativ aufwendig.

8. Beachte die Erwartungskonformität!

Nach dem Absenden des Formulars wünscht sich der User weder Rätsel noch Überraschungen. Gib ihm daher Klarheit, dass die Aktion erfolgreich ausgeführt wurde und erläutere ihm die folgenden Schritte. Achte darauf, dass der User nach dem Absenden des Formulars weitere Informationen oder zumindest Eure Social Media-Kanäle aufrufen kann.

Viele weitere Tipps zum Thema Formular-Design findest Du auf der Seite von
VentureHarbour.

Fazit

Formulare sind ein kritischer Punkt im Conversion Funnel. Dennoch schwächeln sie oft im Hinblick auf Usability. Die Folge: Miserable Konversionsraten.

Du möchtest bessere Webformulare gestalten? Dann orientiere Dich an Deinen User Personas. Das Ziel muss sein, dass sie intuitiv jeden einzelnen Schritt der Kontaktaufnahme ausführen können.

Über den Autor

Über den Autor

Frank Rix ist seit über 20 Jahren im Digitalmarketing unterwegs. Schon vor seinem Studium der Wirtschaftsinformatik beriet er Unternehmen wie Otto, Toyota Europe und Lufthansa.

Ergänzende Artikel

Du möchtest Lead-Magnete auf Deiner Website intelligent ausspielen? Dann ist VERTUS das Richtige für Dich.

Share This Post

Share on linkedin
Share on twitter
Share on facebook
Share on whatsapp
Share on email