Webformulare gestalten, die Leute wirklich ausfüllen

Stellen Sie sich jemanden vor, der in einer Ladentür steht, die Geldbörse in der Hand, bereit zum Kauf. Dann reicht ihm ein Angestellter ein Klemmbrett und sagt: „Füllen Sie das bitte zuerst aus.“ Drei Seiten. Obligatorischer zweiter Vorname. Eine Frage, wie sie von Ihnen gehört haben. Die meisten Leute würden das Klemmbrett weglegen und gehen. Doch genau das tut ein ungeschicktes Webformular einem Besucher, der bereit war zu handeln.

Formulare sind der Punkt, an dem Absicht zu Handlung wird: eine Anmeldung, eine Anfrage, eine Buchung, ein Kauf. Sie sind auch der Punkt, an dem diese Absicht still und leise verloren geht. In diesem Leitfaden werden wir untersuchen, warum Formulare Menschen verlieren, welche kleinen Designentscheidungen sie zurückgewinnen und eine einfache Checkliste, an der Sie jedes Formular messen können. Nichts davon ist technisch. Es geht hauptsächlich darum, die Zeit und Aufmerksamkeit Ihrer Besucher zu respektieren.

Warum Formulare der am meisten unterschätzte Teil einer Website sind

Sie können Monate für eine schöne Startseite aufwenden, überzeugende Texte schreiben und viel Traffic generieren und dennoch den Verkauf an der letzten Hürde verlieren. Das Formular ist diese Hürde. Es sitzt genau im Moment der höchsten Absicht, was jede Reibung teuer macht. Ein verwirrendes Layout oder eine unnötige Frage kann die gesamte vorherige Arbeit zunichtemachen.

Deshalb verdienen Formulare die gleiche Sorgfalt, die Sie Ihrem Hero-Bereich oder Ihren Landingpages widmen. Ein Formular ist keine Formalität, die am Ende angehängt wird. Es ist ein eigenständiges Konversionstool, und winzige Änderungen daran bewegen oft mehr als eine Neugestaltung des gesamten Umfelds.

Die goldene Regel: Weniger verlangen

Wenn Sie sich nur eine Sache merken, dann diese. Jedes Feld, das Sie hinzufügen, ist eine kleine Aufforderung zu Anstrengung, und Anstrengung ist genau das, was Menschen dazu bringt, abzubrechen. Der zuverlässigste Weg, die Abschlussrate zu erhöhen, ist das Löschen von Feldern, nicht deren Neugestaltung.

Gehen Sie Ihr Formular durch und hinterfragen Sie jedes Feld mit einer direkten Frage: Benötigen wir dies wirklich, um den nächsten Schritt zu machen? Eine Telefonnummer für die Anmeldung zu einem Newsletter besteht diesen Test fast nie. Ebenso wenig „Unternehmensgröße“ in einem einfachen Kontaktformular. Wenn Sie eine Information nur manchmal verwenden, benötigen Sie sie jetzt nicht; Sie können später danach fragen, sobald eine Beziehung besteht.

Pflichtfelder versus optionale Felder

Markieren Sie nur die wirklich wesentlichen Felder als Pflichtfelder und halten Sie diese Liste kurz. Einige Teams fügen optionale Felder hinzu „für den Fall, dass es nützlich ist“, aber jede zusätzliche Zeile auf der Seite erhöht immer noch das visuelle Gewicht und die Zögerlichkeit, selbst wenn sie nicht zwingend ist. Im Zweifelsfall lassen Sie es weg. Ein kürzeres Formular, das ausgefüllt wird, ist besser als ein ausführliches Formular, das abgebrochen wird.

Layout-Entscheidungen, die still und leise helfen

Sobald Sie die kürzest mögliche Reihe von Feldern haben, erledigt das Layout den Rest der Arbeit. Ziel ist es, dass sich das Formular mühelos, fast unsichtbar anfühlt. Ein paar zuverlässige Prinzipien bringen Sie die meiste Zeit dorthin.

Stapeln Sie die Felder in einer einzigen Spalte. Die Augen bewegen sich viel bequemer eine Seite nach unten, als sie Zickzack über sie hinweggehen, und eine einzelne Spalte macht den Pfad offensichtlich. Platzieren Sie jedes Etikett direkt über seinem Feld statt daneben, damit die Verbindung unverkennbar ist und das Formular auch auf einem Telefon ordentlich funktioniert. Großzügige Abstände helfen ebenfalls; beengte Formulare fühlen sich nach Arbeit an, und gut durchdachter Weißraum lässt sie leicht wirken.

Ein Hinweis zu Platzhaltern

Es ist verlockend, die Beschriftung als grauen Platzhaltertext in das Feld zu legen, um Platz zu sparen. Widerstehen Sie dem. Sobald jemand zu tippen beginnt, verschwindet dieser Hinweis, und die Person kann nicht mehr überprüfen, wonach das Feld gefragt hat. Auf halbem Weg durch ein längeres Formular vergessen die Leute es wirklich. Halten Sie die Beschriftungen immer sichtbar; der geringe Platz, den Sie sparen, ist die verursachte Verwirrung niemals wert.

Formulierung: Das Formular ist ein Gespräch

Jedes Wort in einem Formular ist Teil eines Gesprächs mit einer echten Person, die entscheidet, ob sie Ihnen vertraut. Kalte, systemartige Sprache („Daten eingeben“, „Ungültige Eingabe“) lässt den Austausch wie das Ausfüllen einer Steuererklärung wirken. Warme, einfache Sprache lässt es sich anfühlen wie das Gespräch mit einem hilfsbereiten Menschen.

Beschriftungen sollten kurz und menschlich sein: „Ihr Name“, „E-Mail“, „Wobei können wir Ihnen helfen?“ Wo ein Feld Zögern hervorrufen könnte, fügen Sie eine winzige beruhigende Zeile darunter hinzu. Neben einer Telefonnummer nimmt „Nur wenn Sie einen Rückruf wünschen“ die Sorge, dass Sie sie belästigen werden. Dies ist der gleiche freundliche Ton, der eine gute Kontaktseite zugänglich und nicht unternehmensartig wirken lässt.

Fehler: Freundlich abfangen

Nichts frustriert Menschen schneller, als ein Formular auszufüllen, auf den Button zu klicken und dann mit einer Wand aus rotem Text ohne Hinweis darauf, was schiefgelaufen ist, zurückgewiesen zu werden. Eine gute Fehlerbehandlung ist sanft und sofort.

Überprüfen Sie Felder, sobald die Person sie ausgefüllt hat, sodass eine falsch eingegebene E-Mail sofort markiert wird, wenn sie zum nächsten Feld wechselt, und nicht erst Minuten später beim Absenden. Wenn Sie ein Problem kennzeichnen, sagen Sie genau, was zu beheben ist und wie: „Dieser E-Mail fehlt ein @-Symbol“ ist besser als „Ungültige Eingabe“. Und löschen Sie niemals alles, was jemand eingegeben hat, wegen eines einzigen Fehlers. Eine Person dazu zu bringen, eine lange Nachricht erneut einzugeben, weil ein einziges Feld fehlerhaft war, ist ein schneller Weg, sie für immer zu verlieren.

Die Absende-Schaltfläche ist wichtiger, als Sie denken

Der Button ist das Letzte zwischen einem Besucher und einem ausgefüllten Formular, also geben Sie ihm echte Beachtung. Machen Sie ihn groß, kontrastreich und unübersehbar. Beschriften Sie ihn dann mit der Aktion, die er ausführt, nicht mit dem mechanischen Wort „Senden“. „Meine Anfrage senden“, „Mein Angebot erhalten“ oder „Meinen Anruf buchen“ sagen der Person genau, was als Nächstes passiert, und bekräftigen sanft den Wert dessen, was sie tun. Die Gestaltung dieser Schaltflächen ist ein eigenes Thema, das in unserem Leitfaden zum Call-to-Action-Button-Design behandelt wird.

Lange Formulare: In Schritte aufteilen

Manchmal benötigen Sie wirklich viele Informationen, zum Beispiel für eine detaillierte Angebotsanfrage oder eine mehrteilige Bewerbung. Zwanzig Felder auf einer endlosen Seite wirken abschreckend; die Leute sehen die Bildlaufleiste und verlieren den Mut. Die Lösung besteht darin, das Formular in einige kurze, logische Schritte mit einem einfachen Fortschrittsanzeiger oben aufzuteilen.

Jeder Schritt sollte sich wie eine kleine, erreichbare Aufgabe anfühlen. Gruppieren Sie zusammengehörige Fragen, z. B. Kontaktdaten in einem Schritt und Projektdetails im nächsten. Ein sichtbares „Schritt 2 von 3“ vermittelt ein Gefühl von Fortschritt und einer Ziellinie, was die Leute motiviert. Es ist der Unterschied zwischen einem Marathon und einer Reihe kurzer, überschaubarer Sprints.

Vertrauen, Barrierefreiheit und das Kleingedruckte

Menschen geben persönliche Daten nur dann preis, wenn sie sich sicher fühlen. Ein paar leise Signale machen einen echten Unterschied: eine kurze Notiz darüber, was Sie mit ihren Daten tun werden, ein erkennbares Sicherheitshinweis in der Nähe von Zahlungsfeldern und das Fehlen von allem, was sich wie eine Falle anfühlt. Wenn ein Formular viel mehr verlangt, als die Aufgabe zu rechtfertigen scheint, spüren die Menschen das und ziehen sich zurück.

Auch die Barrierefreiheit gehört hierher. Formulare müssen für Menschen funktionieren, die eine Tastatur anstelle einer Maus verwenden, und für diejenigen, die auf Screenreader angewiesen sind. Richtig verknüpfte Beschriftungen, klare Fokusrahmen und ausreichender Farbkontrast sind keine optionalen Nettigkeiten; sie entscheiden, ob ein Teil Ihres Publikums das Formular überhaupt nutzen kann. Unser Überblick über die Grundlagen der Web-Barrierefreiheit geht tiefer, und der Nutzen ist groß: Ein barrierefreies Formular ist einfach ein klareres Formular für alle.

Testen, beobachten und weiter optimieren

Kein Formular ist beim ersten Versuch perfekt. Die Teams mit den besten Formularen sind diejenigen, die beobachten, wie echte Menschen sie nutzen. Selbst informelle Beobachtungen, wie einen Freund zu bitten, Ihr Formular auszufüllen, während Sie schweigen, decken Probleme auf, die Sie längst nicht mehr bemerkt haben. Wo pausieren sie? Welches Feld lässt sie die Augen zusammenkneifen? Dieses Zögern ist Ihre To-Do-Liste.

Formulare sind auch einer der klarsten Bereiche, in denen kleine Änderungen über Ihre gesamte Website hinweg Wirkung zeigen. Ein Formular, das etwas besser konvertiert, speist jede Kampagne, die Sie durchführen, ähnlich wie die umfassenderen Prinzipien in was eine Website konvertierbar macht. Halten Sie das Formular kurz, die Formulierung menschlich, die Fehler freundlich und den Button klar, und Sie werden still und leise mehr Ihrer bestehenden Besucher in Anfragen und Kunden verwandeln. Wenn Sie eine zweite Meinung zu einem Formular wünschen, das nicht gut funktioniert, können Sie sich jederzeit melden.

Häufig gestellte Fragen

Referenzen

1. Baymard Institute. „Checkout-Optimierung: Formularfelder minimieren.“ baymard.com.
2. Nielsen Norman Group. „Website-Formulare Benutzerfreundlichkeit.“ nngroup.com.
3. W3C Web Accessibility Initiative. „Forms Tutorial.“ w3.org.