Leadgenerierung User Experience

Webformulare gestalten: Tipps & Fallstricke

Webformular gestalten

Bist Du nicht auch schon oft an Webformularen beinahe verzeifelt? Doofe Frage, ich weiß. 😉 Wohl jeder User musste sich schon mit wirren Fehlermeldungen herumschlagen und Formulare 3x ausfüllen, bis das Absenden endlich möglich war.

Webformulare sind der kritische Punkt bei der Umwandlung anonymer Websitebesucher zu Marketing Leads. Hapert es hier, sieht es schlecht aus mit der Konversionsrate. Wenn User schlichtweg an dem Kontakt-, Registrierungs- oder Newsletter-Anmeldeformular scheitern, könnt Ihr Euch die in Werbung investierten Ressourcen schenken. Du möchtest Webformulare gestalten, welche der User sofort versteht? In unserem Beitrag geben wir Dir Tipps und zeigen einige 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!
webformulare gestalten
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 zur Technik
webformulare gestalten
Quelle: Uxdesign.cc

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.
webformulare gestalten

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.

    Webformulare gestalten

    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.

    webformulare gestalten
    Quelle: VentureHarbour

    7. Gebe verständliche Fehlermeldungen aus!

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

    Unser Tipp

    Erspart Euch großen Programmieraufwand und setzt 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:

    webformulare gestalten

    Ü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 zentrale Bestandteile 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 Buyer Personas. Verstehen sie das Formular? Was könnte zu einem Missverständnis führen?
    Das Ziel muss sein, dass User ohne Zögern den Arbeitsschritt des Ausfüllens bewerkstelligen können.

    Ebenfalls interessant
    HTML5 Banner erstellen
    HTML5-Banner erstellen: Vier Wege zum interaktiven Banner
    Web Push Nachrichten
    Mit Web Push Nachrichten zu signifikant mehr Traffic

    Bitte kommentieren

    Ihr Kommentar*

    Ihr Name*
    Ihre Website