11 Tipps für erfolgreiche Online-Formulare

Formulare sind i.d.R. der Punkt einer jeden Website, an der Deine User zu Kunden werden. Nachdem Du ihn zuvor von Deinem Produkt oder Deiner Dienstleistung überzeugt hast, führt er an dieser Stelle eine Conversion- Aktion aus (z.B. Bestellung, Kontaktaufnahme oder Registrierung. Dein Formular ist also ein wichtiger Faktor für Deine Werbeziele. Um diese zu erreichen ist eine gute Usability unverzichtbar, schließlich wollen wir, dass der User sich problemlos einloggen, registrieren oder bestellen kann. 

Gutes Formular-Design sollte einfach und klar gehalten sein. Neben der Wahl von Schriftart, Farbe und Anzahl der Felder, sollten noch weitere Aspekte beachtet werden. Dabei spielt z. B. die Platzierung / Ausrichtung der Feldbezeichner (Labels) oder die Länge der Eingabefelder eine nicht unerhebliche Rolle.

Im Folgenden erklären wir Dir, wie Du Deine Formulare Nutzerfreundlich und Conversion-stark gestaltest.

Verbessere Deine Shop Performance mit UX!

Analyse der Customer Journey, Handlungsempfehlungen & mehr – Mit unserem UX-Audit erhältst Du einen detaillierten Überblick über Deinen Shop.

Unsere Expertinnen und Experten unterstützen Dich von Anfang bis Ende mit Empfehlungen, Antworten auf Deine Fragen und vielem mehr!

Jetzt UX-Audit anfragen

1. Weniger ist mehr!

Frage nur die notwendigsten Informationen ab –wie im Beispiel von Amazon: Im ersten Schritt wird lediglich nach der E-Mail-Adresse gefragt. Dies suggeriert, dass die Anmeldung schnell, einfach und unkompliziert erfolgt. Erst im nächsten Schritt werden weitere, wichtige Informationen abgefragt. 

Verzichte unbedingt auf Formularfelder, die die nicht zwingend notwendig sind (bspw. Geburtsdatum).

2. Kontraststarke Formularfelder

Damit Dein Formular auch direkt als solches erkannt werden kann, solltest du es deutlich hervorheben. Ist der Website-Hintergrund weiß, solltest Du hinter  weißen Formularfeldern eine graue oder farbige Fläche platzieren. Wird das Formular mit einem Pop-up ausgelöst, musst Du darauf achten, dass es sich gut von dem Hintergrund der Webseite abhebt.

Die einzelnen Formularfelder sollten eine deutliche Kontur haben. Mach es Deinen Usern möglichst einfach, das Formular zu erkennen und auszufüllen.

3. Klare Call-To-Action

Weiß Dein User, was er tun soll? Das Formular sollte eine klare Überschrift haben, die ihn explizit auffordert es auszufüllen und abzuschicken. Der Button sollte eine auffällige Farbe und eine klare Handlungsaufforderung haben. In diesem Artikel von mir erfährst Du, wie Du bessere Call-To-Actions erstellen kannst.

4. Labelbezeichnung/-position

Achte darauf, dass die Felder eindeutig bezeichnet sind. Pflichtfelder sollten auch als solche zu erkennen sein und mit einem entsprechenden Hinweis verknüpft werden. 

Bei der Platzierung der Labels solltest Du darauf achten, dass direkt klar wird, was in welches Feld einzutragen ist. Im besten Fall sollten sie also über, links neben (rechtsbündig) oder direkt in dem Formularfeld stehen. Auch eine Kombination aus links daneben/über und in dem Formularfeld ist möglich.

5. Fehlermeldungen

Es kann schnell passieren, dass ein Feld falsch oder gar nicht ausgefüllt wird. In diesem Fall solltest du Deinem User einen klar verständlichen Hinweis geben. Dieser Hinweis sollte im besten Fall rot in unmittelbarer Nähe zum betroffenen Feld erscheinen. Nur so kann er die Fehlermeldung eindeutig zuordnen.

6. Positives Feedback

eder mag positives Feedback – warum also nicht auch für das richtige Ausfüllen Deines Formulars. Wird ein Feld korrekt ausgefüllt, kann dieser Schritt als “abgehakt” angezeigt werden. Durch einen (grünen) Haken neben dem Formularfeld, gibst Du Deinem User ein positives Gefühl und bestärkst ihn dadurch subtil in seiner Conversion-Aktion.

Du möchtest wissen, wie Du mit Dringlichkeit, Exklusivität, Mehrwert, Relevanz und mehr Deine Call-to-Actions verbessern kannst? In diesem Video erfährst du es!

7. Passwort vergessen

Passwort vergessen und nicht notiert? Kein Problem. Die Möglichkeit sein Passwort neu anfordern zu können, sollte jedes Anmeldeformular besitzen.

8. Benutzername speichern

Diese Funktion ist ein wahrer Alltagshelfer. Wenn wir häufiger mit einem Tool arbeiten und dieses immer eine Anmeldung erfordert, darf die Funktion “Benutzer speichern” nicht fehlen.

9. Infoboxen

Erkläre, weshalb Du die Daten brauchst. Beim Ausfüllen des Formulars dürfen keine Fragen offen bleiben. Durch einen kleinen Infobutton oder eine dezenten Infobox, kannst Du Felder erklären, bei denen Deine User zunächst unsicher sein könnten, warum diese Information abgefragt wird.

10. Schritt-für-Schritt zum Ziel

Besonders wichtig bei einer Bestellung oder mehrstufigen Formularen ist es, dem User den Weg zum Ziel zu zeigen. So kann er direkt abschätzen, wie lange der Prozess in Etwa dauern wird und bekommt ein Gefühl von Transparenz und Kontrolle. Außerdem wird jeder abgeschlossene Schritt ein kleines Erfolgserlebnis für Deinen User darstellen. 

Vodafone löst dies mit Icons und einer kurzen Beschreibung über dem Formular.

11. Social Login

Mittlerweile immer häufiger zu sehen: Zusätzlich zur Anmeldung per E-Mail-Adresse, wird ein Facebook- oder Google-Anmelde-Button angeboten. Mit einem Klick auf einen der Buttons wird die Anmeldung oder Registrierung vereinfacht. Alle vom User freigegebenen Daten werden dabei direkt aus Facebook oder Google gezogen.

Fazit

Unter Berücksichtigung all dieser Faktoren kannst Du nicht nur dem User das Ausfüllen der Formulare vereinfachen, sondern auch eine höhere Conversion-Rate erzielen. Lege Deinen Website-Besuchern also keine Steine in den Weg, hinterfrage Deine Formulare kritisch und teste Dich durch! 

Hast Du schon Login-Formulare erstellt? Welche Daten fragst Du ab? Ich freue mich über Deine Erfahrung und Anmerkungen im Kommentarfeld!