morefire
MENÜ

11 Tipps für erfolgreiche Online-Formulare

Formulare dienen dazu, dass der Besucher eine Aktion ausführt (z.B. bestellt), Kontakt aufnimmt, oder als Zugang zu einem Webanbieter. Sie sind ein wichtiger Faktor, wenn es um Usability und Conversion geht, 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 und Farbe oder 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.

1. Weniger ist mehr!

Frage nur die notwendigsten Informationen ab. Wie im Beispiel von Amazon, wird im ersten Schritt nur nach der E-Mail-Adresse gefragt. Im nächsten Schritt können dann die wichtigen Informationen abgefragt werden. Verzichtet auch auf Formularfelder (z.B. Telefonnummer), die die nicht zwingend notwendig sind.

Amazon - Weniger ist mehr

2. Kontraststarke Formularfelder

Damit das Formular auch als solches erkannt werden kann, sollte es hervorgehoben werden. Ist der Websitehintergrund weiß, empfiehlt es sich, hinter den weißen Formularfeldern eine graue oder farbige Fläche zu hinterlegen. Die Felder sollten auch eine deutliche Kontur haben. Wird das Formular mit einem Pop-up ausgelöst, musst Du darauf achten, dass es sich gut von dem Hintergrund der Webseite abhebt.

Pinterest - Kontrastreiche Formularfelder

3. Klare Call-To-Action

Weiß der User, was er hier tut? Das Formular sollte eine klare Überschrift haben und ihn auffordern es  auszufüllen und abzuschicken. Der Button sollte eine auffällige Farbe und eine klare Handlungsaufforderung haben. In einem anderen Artikel von mir erfahrt Ihr, wie Ihr bessere Call-To-Actions erstellen könnt.

Facebook - Klare Call-To-Action

4. Labelbezeichnung/-position

Achtet darauf, dass die Felder eindeutig bezeichnet sind. Pflichtfelder sollten auch als solche zu erkennen sein und mit einem Hinweis verknüpft werden. Wo Ihr die Labels platziert, ist ganz Euch überlassen. Im besten Fall sollten sie über, links neben (rechtsbündig) oder in dem Formularfeld stehen. Auch eine Kombination aus links daneben/über und in dem Formularfeld ist möglich. So ist direkt klar, was in welches Feld einzutragen ist.

BILD - Labelbezeichnung

5. Fehlermeldungen

Es kann schnell passieren, dass ein Feld falsch oder gar nicht ausgefüllt wird. In diesem Fall sollte der User einen Hinweis bekommen, der ihn darauf hinweist. Dieser Hinweis sollte im besten Fall rot in unmittelbarer Nähe zum betroffenen Feld erscheinen. Nur so ist der der Fehler eindeutig zuzuordnen.

DAZN - Fehlermeldung

6. Positives Feedback

Ich denke, jeder mag positives Feedback. Warum also nicht schon für das richtige Ausfüllen des Formulars. Wird ein Feld korrekt ausgefüllt, kann dieser Schritt als “abgehakt” angezeigt werden. Das kann mit einem Haken neben dem Formularfeld passieren, oder einer roten Konturlinie des Formularfeldes.

Telekom - Positives Feedback

7. Passwort vergessen

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

Asana - Passwort vergessen

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.

Spotify - Benutzername speichern

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 einer dezenten Infobox, können Felder erklärt und Fragen beantwortet werden.

Telekom - Infoboxen

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 weiss er, wie lange der Prozess dauert. Vodafone löst es mit Icons und einer kurzen Beschreibung über dem Formular.

Vodafone - Schritt für Schritt zum Ziel

11. Social Login

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

Pinterest - Social Login

Fazit

Unter Berücksichtigung all dieser Faktoren können wir nicht nur dem User das Ausfüllen der Formulare vereinfachen, sondern auch eine höhere Conversion-Rate erzielen. Wir sollten dem User keine Steine in den Weg legen. Das Formular ist ein wichtiger Bestandteil bei der Generierung von Conversions und sollte daher stets optimiert werden.

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

Alexander Welk

Alex ist Grafikdesigner bei morefire. Er war von 2004 bis 2011 in der Print-Branche tätig und seit 2012 für morefiremedia im Online-Marketing. Sein Aufgabenbereich umfasst die Optimierung von Landing Pages, die Konzeption und Kreation von kompletten Webauftritten, bis hin zur Gestaltung von Produkten für den Print-Bereich.

4.75 / 5 (4 votes)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.