Webformular-Design: Felder, Fehler und Conversion-Rate
Je weniger Reibung ein Formular erzeugt, desto häufiger wird es ausgefüllt. Wie Feldanzahl, Validierungszeitpunkt und Fehlertext die Conversion prägen.
rabbitclip-TeamVeröffentlicht: 4 Min. Lesezeit
Kurz gesagt
Drei Dinge beeinflussen, wie oft ein Formular ausgefüllt wird, mehr als alles andere: die Anzahl der Felder, wann und wie Fehlermeldungen erscheinen, und wie eindeutig der Absenden-Button ist. Werden diese drei Punkte falsch angegangen, rettet auch das schönste Design das Formular nicht; der Besucher bricht auf halbem Weg ab.
Zu den von Google veröffentlichten Empfehlungen für Formularfelder gehört die korrekte Nutzung von Autocomplete-Attributen; sie lassen den Browser gespeicherte Angaben automatisch im richtigen Feld einsetzen und verringern so, wie viel ein Besucher von Hand eintippen muss (web.dev, Sign-in form best practices).
Im Folgenden geht es um vier Bausteine eines Formulars: Feldanzahl, Validierungszeitpunkt, Formulierung der Fehlermeldung und mobile Umsetzung.
Wie viele Felder sind wirklich nötig
Jedes zusätzliche Feld ist ein Reibungspunkt, der die Wahrscheinlichkeit erhöht, dass ein Besucher das Formular abbricht. Bei einer Anfrage für eine Dienstleistung reichen Name, Telefonnummer und eine kurze Beschreibung meist aus; Adresse, Berufsbezeichnung oder Budget lassen sich später in einem Folgegespräch klären, nicht schon beim ersten Kontakt.
Manche Branchen sind die Ausnahme; fehlende Angaben verlangsamen dort die Arbeit. Das Buchungsformular eines Autovermieters kann eine Anfrage ohne Datum und Fahrzeugtyp nicht bearbeiten; hier zählt nicht die geringste, sondern die richtige Anzahl an Feldern.
Wann Validierung angezeigt werden sollte
Ist ein Feld fehlerhaft, sollte der Besucher das in dem Moment sehen, in dem er das Feld verlässt, nicht erst nach dem Absenden. Ein E-Mail-Feld, das ein falsches Format sofort meldet, ist deutlich weniger anstrengend als zehn Fehler, die alle auf einmal nach dem Absenden erscheinen.
Aber eine Warnung bei jedem Tastendruck ist genauso störend; sieht ein Besucher schon «ungültig», bevor er das Wort überhaupt fertig getippt hat, wirkt das Formular unnötig streng. Der richtige Moment ist, wenn das Feld den Fokus verliert.
Wie eine Fehlermeldung formuliert wird
Eine allgemeine Meldung wie «ungültige Eingabe» sagt dem Besucher nicht, was zu tun ist. Eine konkrete Meldung wie «die E-Mail-Adresse braucht ein @-Zeichen» verhindert, dass derselbe Fehler erneut passiert.
Ändert sich das Telefonnummernformat bei einem Vereinsanmeldeformular je nach Land, sollte die Fehlermeldung das erwartete Format an einem Beispiel zeigen; eine Angabe wie «Format: 0176 12345678» erspart dem Besucher das Raten.
Wie ein Formular für Mobilgeräte aufgebaut wird
Die meisten Formulare werden heute vom Smartphone aus ausgefüllt; deshalb verdienen Feldgröße, Tastaturtyp und Touch-Fläche eigene Aufmerksamkeit. Ein Telefonfeld sollte die Zifferntastatur öffnen, ein E-Mail-Feld eine Tastatur mit gut erreichbarem @-Zeichen; solche Details summieren sich und machen ein Formular spürbar leichter ausfüllbar.
- Feldanzahl bleibt auf das beschränkt, was der erste Kontakt wirklich braucht
- Validierung läuft beim Verlassen des Feldes, nicht bei jedem Tastendruck
- Fehlermeldungen benennen konkret, was zu korrigieren ist
- Passender Tastaturtyp und ausreichend große Touch-Flächen auf Mobilgeräten
- Was nach dem Absenden passiert (Dank, E-Mail, Rückruf) wird klar mitgeteilt
Wohin die Formulardaten tatsächlich gehen
Wo die Daten nach dem Absenden landen, gehört ebenso zum Design wie das Aussehen. Eine Anfrage, die direkt in ein CRM fällt, wird schneller bearbeitet als eine, die im Postfach verschwindet; ohne diese Verbindung kann selbst ein gut gestaltetes Formular am Ende zu einer Anfrage werden, die im Team leise untergeht.
Ebenso wichtig wie das Ziel der Daten ist, wer sie in welcher Zeit beantwortet; ein Unternehmen, das nach einer Formularanfrage drei Tage lang nicht reagiert, hinterlässt denselben Eindruck wie eines, das gar kein Formular anbietet.
Wann ein mehrstufiges Formular sich lohnt
Ein langes Formular auf einer einzigen Seite kann abschreckend wirken; es in zwei oder drei Schritte mit Fortschrittsanzeige zu teilen, kann die Abschlussrate steigern. Ein kurzes Formular mit nur wenigen Feldern in Schritte zu zerlegen, bewirkt dagegen das Gegenteil, es fügt nur unnötige Klicks hinzu.
Bei einer Bestellung für ein digitales Produkt fühlt sich jeder Schritt leichter an, wenn zuerst die Produktwahl, dann die Rechnungsdaten, dann die Zahlung getrennt abgefragt werden; das lohnt sich aber erst, sobald ein Formular über fünf oder sechs Felder hinausgeht.
Spam und Bot-Einsendungen verringern
Kurz nach dem Livegang kann ein Formular Bot-Einsendungen erhalten; ein verstecktes Feld, das nur ein Bot ausfüllt (Honeypot), filtert den Großteil des Spams heraus, ohne dass ein echter Besucher einen zusätzlichen Schritt bemerkt.
Erhält das Kontaktformular einer Anwaltskanzlei jede Woche Dutzende sinnlose Einsendungen, liegt das meist nicht am fehlenden Captcha, sondern daran, dass gar kein grundlegender Bot-Schutz eingerichtet ist; ein Honeypot-Feld und eine Rate-Begrenzung reichen in den meisten Fällen aus.
Ein sichtbares Captcha wird nur ergänzt, wenn diese Maßnahmen nicht ausreichen, als letztes Mittel; denn jedes Captcha ist auch für einen echten Besucher ein zusätzlicher Reibungspunkt.
Der Erfolg eines Formulars kommt nicht von seiner Optik, sondern davon, wie viel Reibung es abbaut. rabbitclip betrachtet Formulare nicht nur als Gestaltungsfrage, sondern zusammen mit Feldanzahl, Validierung und Datenfluss; Ihr aktuelles Formular lässt sich gemeinsam durchgehen.
Häufige Fragen
Wie viele Felder sollte ein Formular haben?
So viele wie der erste Kontakt wirklich braucht; meist reichen Name, eine Kontaktmöglichkeit und eine kurze Beschreibung.
Wann sollten Fehlermeldungen erscheinen?
Sobald der Besucher das Feld verlässt, nicht bei jedem Tastendruck; so zeigt sich der Fehler früh, ohne das Formular streng wirken zu lassen.
Warum ist Autocomplete wichtig?
Es lässt den Browser gespeicherte Angaben ins richtige Feld einsetzen und verringert, wie viel von Hand getippt werden muss.
Was sollte nach dem Absenden passieren?
Eine klare Dankesmeldung oder ein nächster Schritt; Unklarheit führt sonst zu einer doppelten Einsendung.
Ist ein mehrstufiges Formular immer besser?
Nein, das hilft nur bei langen Formularen; ein kurzes Formular in Schritte zu teilen, fügt nur unnötige Reibung hinzu.
