Online Formulare gestalten und optimieren für mehr Conversions

16 Tipps für intuitiv-überzeugende Formulare

Jedes Unternehmen im Online Marketing hat das Ziel, so viele Besucher wie möglich in Kunden umzuwandeln. Dafür gibt es viele Stellschrauben, die zur Optimierung der Conversionrate dienen. Eine wichtige und oft vernachlässigte Optimierung sind nutzerfreundliche Formulare.

Aus diesem Grund möchte ich in diesem Artikel einige Tipps zusammentragen, wie Formulare auf einer erfolgreichen Webseite funktionieren müssen, um so wenig Nutzer wie möglich zu verlieren. Denn häufiger als man denkt, scheitert die Conversion an schlechten Formularen.

Formulare sind ein Teil der User Experience. Ein kompliziertes und überfrachtetes Formular führt dazu, dass sich der Nutzer beim Ausfüllen nicht wohlfühlt. Der Nutzen hinter dem Aufwand muss in einem angemessenen Verhältnis stehen.

Das optimale Web Formular –  Meine Tipps für dich

Du möchtest ein Online Formulare gestalten und optimieren für mehr Conversions und suchst nach passenden Beispielen wie du dein Kontaktformular oder andere Formulare anpassen kannst?

Dann habe ich 16 Tipps wie Du du bei deinem Formular eine bessere Eintragungsraten erzielen kannst.

Tipp Nr. 1 Halte dein Formular einfach!

Der Tipp klingt im ersten Moment logisch. Selbstverständlich: Frage keine unnötigen Informationen ab. Aber auch wenn du gewisse Daten abfragen musst und es sich nicht vermeiden lässt, sollte dein Web Formular trotzdem so einfach wie nur möglich aussehen.

Alles, was irgendwie kompliziert aussieht oder extrem lang ist, wird vom Nutzer als Belastung angesehen. Nehmen wir beispielsweise an, dass der Nutzer 20 Felder ausfüllen muss, dann unterteile diese in viermal fünf Felder, sodass der Nutzer nicht gleich zu Beginn erschlagen wird.

Verzichte auf sämtliche visuelle Effekte. Halte das Formular so übersichtlich wie möglich. Das heißt keine Schattierungen, Rahmen oder unnötige Linien und stattdessen viel Freiraum zwischen den Feldern. Auch neben dem Formular sollten so wenig Bilder und andere ablenkende Effekte wie möglich auftauchen.

Beachte dabei auch das responsive Design. Die Formularfelder müssen problemlos auf jedem Gerät abgebildet werden, ohne zusätzlichen Aufwand herum zu scrollen.

Das vermutlich einfachste Formular der Welt: Twitter verlangt zur ersten Anmeldung nur einen Benutzernamen und entweder eine Telefonnummer oder eine E-Mail. Das wars.

Tipp Nr. 2 Gib dem Formular einen Titel

Der Nutzer deiner Seite sollte in jedem Moment wissen, was er gerade eigentlich ausfüllt. Gib deinem Formular also einen einfach verständlichen Namen. „Jetzt kostenlos registrieren!“ gibt dem Nutzer zusätzlich Sicherheit, dass er sich nicht doch zufällig in irgendein kostenpflichtiges Programm einträgt.

Der Titel sollte jedoch immer höchst präzise sein und keinen Raum für Verwirrungen entstehen lassen!

Präzise sollte nicht nur der Titel sein. Jedes Feld sollte ein exaktes Label erhalten. Meinst du mit „Name“ beispielsweise nun den Vornamen oder den Nachnamen und ist mit Adresse nun die Straße oder der Ort gemeint?

Beispiel: Schau dir hier nochmal das Beispiel von Tipp Nr.1 an: Twitters nutzt den simplen Titel „Konto erstellen.“

Tipp Nr. 3 Marktforschung minimieren

Natürlich holen wir uns gern Informationen von unserer Zielgruppe, um diese besser kennenzulernen. In einem Formular können diese Fragen aber dazu führen, dass Nutzer direkt abspringen.

Verzichte in Formularen auf alle Daten, die nicht zwingend nötig sind. In einem Formular für einen Newsletter benötigst du nicht mehr als eine E-Mail-Adresse. Du kannst zu einem späteren Zeitpunkt immer noch zusätzliche Informationen einholen.

Ein Formular für einen Newsletter. Vielleicht hätte man sich hier sogar noch das Feld „Anrede“ sparen können.

Tipp Nr. 4 Hebe Pflichtfelder hervor

Für die maximale Conversion solltest du Nicht-Pflichtangaben sowieso vermeiden. Wenn du nun doch Angaben aufnimmst, die nicht zwingend nötig sind, dann kennzeichne deutlich, welche Angaben notwendig sind.

Dazu hat sich das Sternchen * als Standard etabliert. Weise in deinem Formular deutlich daraufhin, dass das Symbol die Pflichtfelder markiert.

Auch das Anmeldeformular der Deutschen Kreditbank markiert Pflichtfelder. Allerdings ganz unten, sehr klein und ausgegraut, was ich nicht für die ideale Lösung halte.

Tipp Nr. 5 Achte auf die richtige Reihenfolge der Daten

Jeder potentielle Kunde hat eine Gefühl für die richtige Logik bezüglich der Angaben. Es macht beispielsweise keinen Sinn die Adressdaten abzufragen bevor nicht geklärt wurde, welchen Bedarf der Kunde hat.

Halte dich an die entsprechende Reihenfolge: Kläre als erstes den Bedarf des Kunden. Was will er kaufen? Und frage als zweites nach der Lieferadresse.

Als Beispiel nehmen wir einen Online-Shop, für den der Kunde sich registrieren soll. Es ist nicht nötig, bei der Registration bereits nach der Adresse zu fragen. Diese Angaben kann der Kunde immer noch tätigen nachdem er sich für ein Angebot entschieden hat.

Tipp Nr. 6 Position des Labels

Tests, welche die Augenbewegung überprüfen, haben ergeben, was die perfekte Position für das Label des jeweiligen Felds ist. (Ein Label ist die Bezeichnung des jeweiligen Felds)

Es gibt zwei ideale Lösungen:

• Links neben dem Feld, aber rechtsbündig
• Oberhalb des Eingabefelds

Beide Varianten minimieren den Aufwand für den Nutzer zu erkennen, welche Angabe gemacht werden muss.

Sowohl bei den Beispielen von Tipp Nr.1, Nr.3 und Nr.4 siehst du die typische Positionierung direkt oberhalb des Eingabefelds. Google macht es anders und schreibt die Labels direkt ins Eingabefeld:

Tipp Nr. 7 Unterteile das Formular visuell sinnvoll

Lange Web Formulare brauchen visuelle Unterstützung. Der Nutzer sollte so schnell es geht verstehen, welche Angaben von ihm gefordert werden. Fasse also die Daten in sinnvolle Gruppen zusammen und hebe diese zum Beispiel farblich voneinander ab.

Nicht nur in Gruppen lässt sich ein Formular sinnvoll unterteilen. Es macht auch Sinn, dass das Formular auf mehrere Seiten aufgeteilt wird.

Auch Amazon markiert für den Kunden visuell, wo er gerade im Kaufprozess steht und unterteilt den Kaufprozess auf sieben Seiten.

Tipp Nr. 8 Transparenz schaffen

Ein weiterer Tipp für lange Formulare ist es, dem Nutzer bei jedem Schritt zu zeigen, wie viel er noch vor sich hat.

Um ihn nicht zu überfordern, habe ich dir bereits geraten, dass du das Formular auf mehrere Seiten verteilen kannst. Zeige ihm wie weit es noch bis zum Ziel ist:
Schritt 2 von 7 – 30% Geschafft!

Das Umfrage-Formular von Eurofins zeigt dem Nutzer die ganze Zeit an, wie weit er ist mit der Seitenanzahl und einem Balken, der sich während des Ausfüllens immer weiter anfüllt.

Tipp Nr. 9 Markiere Felder für den Nutzer

Eine weitere Unterstützung für den Besucher ist es, wenn du die Eingaben mithilfe von Farben und Tipps unterstützt. Eine falsche Eingabe kann sofort rot markiert werden und ein Tipp eingeblendet werden. Der Tipp könnte beispielsweise heißen: „Dies ist keine gültige Postleitzahl.“

Auch positives Feedback ist gut, zum Beispiel in Form von grünen Haken an den Feldern. Dieses Feedback steigert nachweislich die Conversionrate von Formularen.

Twitter erkennt bei der Anmeldung direkt, ob es sich um eine gültige Telefonnummer handelt oder nicht und weist den Nutzer darauf hin:

Tipp Nr. 10 Erste Hemmschwelle überwinden

Das Sprichwort „Aller Anfang ist schwer.“ beinhaltet eine psychologische Wahrheit. Menschen fällt es einfacher anzufangen, wenn der Beginn leicht ist. Auch das kannst du dir bei Formularen zunutze machen, indem du zunächst die einfachsten Daten wie Vorname, Name, Geburtstag und ähnliches abfragst und erst zum Schluss die schwierigen Fragen.

Sobald man nämlich Arbeit investiert hat, will man die Aufgabe auch beenden. Kämen die harten Fragen zuerst, würde dies zu viel mehr Abbrüchen führen.

Das eben bereits gezeigte Beispiel der Umfrage bei Eurofins beginnt auf den ersten Seiten extrem leicht:

Auf späteren Seiten wird es zunehmend komplexer:

Dein Formular sollte eins nicht tun und zwar neue Fragen aufzuwerfen. Die gesamte Conversion ist zerstört, wenn der Nutzer an einer Stelle des Formulars plötzlich vor einer Frage steht, die er sich nicht beantworten kann.

Achte darauf, dass du Fachbegriffe oder Abkürzungen vermeidest oder diese dem Nutzer direkt erklärst. Viele Nutzer brechen ein Formular ab, wenn sie nicht zu 100% sicher sind, was ein einer Stelle gemeint ist.

Tipp Nr. 12 Responsives Design – Mobilgeräte

In der heutigen Zeit ist es Pflicht eine Webseite so zu designen, dass diese für alle Geräte die optimale User Experience garantiert. Auch bei Formularen ist das zu beachten. Jeder stand schon einmal vor einem Formular auf dem Handy, dass nahezu unbedienbar war. Erst ewig hinauszoomen, dann wieder hinaus, ewig runterscrollen und das Formular dann doch abbrechen.

Solltest du Fragen zu Responsivem Design haben, kannst du dich gern bei mir melden. Ich habe schon mehrere hundert Webseiten responsiv gestaltet und stehe auch dir gern dafür zur Verfügung.

Tipp Nr. 13 Vorauswahl treffen

Bestimmte Eingaben, die einfach häufig sind, sollten bereits ausgewählt sein. Beispielsweise kann man in der Länder-Liste bereits ‚Deutschland‘ vorausgewählt eingetragen haben, sodass ein Nutzer nicht erst bis D in der Liste scrollen muss, um dort Deutschland auszuwählen.

Die Deutsche Kreditbank geht natürlich auch von einem deutschen Kunden aus und füllt Staatsangehörigkeit, Telefonvorwahl und Landesadresse automatisch aus.

Tipp Nr. 14 Wiederhole Bonus-Angebote

Falls du durch einen bestimmten Bonus, ein Rabatt oder irgendeine andere Aktion auf dein Produkt aufmerksam gemacht hast, dann vergiss nicht dieses Feature auch im Formular zu wiederholen. Wenn ein Kunde wirklich nur wegen dem Rabatt zugeschlagen hat, fragt er sich, ob dieser auch wirklich eingehalten wird.

Der Kunde sollte dieses Rabatt also während des gesamten Kaufprozesses sehen können und nicht verunsichert werden, ob er nicht vielleicht doch etwas Falsches angeklickt hat.

Amazon zeigt im Bezahlformular nochmal ausdrücklich, dass der Versand gratis ist.

Tipp Nr. 15 Nutze Plugins zur Optimierung

Wenn es darum geht dein Formular auf die maximale Conversionrate zu trimmen, kann ich dir nur eins empfehlen: Nutze ein Plugin. Lead-Revolution ist ein WordPress-Plugin, welches ich von ganzem Herzen empfehlen kann.

Ich habe damit bis zu 30% mehr Anfragen generiert. Es lassen sich so Formulare mit Gamification erstellen. Darüber hinaus bietet eine einfache Erstellung durch Drag & Drop und kann designtechnisch benutzerdefiniert angepasst werden. Das Plugin bieten zudem mehrere Feldabhängigkeiten, viele Auswahlmöglichkeiten und Google Ads Conversion Tracking.

Lead-Revolution funktioniert außerdem auf mobilen Geräten mit ansprechendem Responsiven Design, verbesserten Ladezeiten, bietet DSGVO Konformität und andere kombinierbare Themes & Plugins und periodische Updates.

Das ideale Tool für perfekt konvertierende Formulare:
https://lead-revolution.com

Tipp Nr. 16 Social Media Verknüpfung

Jede Erleichterung, die wir dem Besucher zur Verfügung stellen, erhöht die Conversionrate des Formulars. Komfort erhöht die User Experience. Daher lohnt es sich, das Formular wenn es möglich ist, mit den sozialen Netzwerken zu verknüpfen. Wenn der Nutzer sich mit seinen Facebook-Daten oder dem Google-Konto anmelden kann und sich so eine zusätzliche Registration erspart, ist das ein exzellenter Pluspunkt für das Formular.

Die Registration auf Instagram lässt sich mit einem Facebook-Konto überspringen.

Fazit zu Online Formulare gestalten und optimieren

Mit Sicherheit war das noch lang nicht alles rundum die Optimierung von Formularen. Wie du aber siehst gibt es einiges zu bedenken und ich hoffe, ich konnte dir mit diesen Tipps schon mal eine gute Grundlage liefern. Zum Schluss einer meiner Leitsätze bei der Optimierung von Webseiten: Sei selbst der Kunde. Wie ermögliche ich mir selbst, wenn ich der Kunde wäre, das optimale Erlebnis.

Und noch etwas: Ändere nicht zu viel auf einmal.

Wenn du bereits einen funktionierenden Funnel hast, teste zunächst immer nur einzelne Änderungen auf ihre Wirkung und optimiere dann weiter, sodass du verifizierbare Daten sammelst, was klappt und was nicht klappt. Viel Erfolg!