Für die Optimierung von Online-Formularen gelten ein paar einfache, aber wichtige Regeln.
Formulare sind für deren Benutzer von Natur aus eine Hürde auf dem Weg zur Conversion. Bereits der Anblick kann Ablehnung und Frust hervorrufen. Um den ersten Eindruck und die User Experience angenehm und sogar zu einem Erfolgserlebnis werden zu lassen, sollte für eine Optimierung jedes Formular auf den Prüfstand gestellt werden.
Noch heute nutzen viele Unternehmen und Website-Betreiber altmodische und unübersichtliche Formulare, die sie um viele Conversions bringen.
Im Folgenden werden 15 Themen und zahlreiche Best Practices zur Optimierung vorgestellt.
Formulartypen
Formulare werden im Internet für die verschiedensten Zwecke verwendet. Hier ein paar Beispiele:
- Login, Registrierung
- Bestellung / Bezahlung
- Umfrage
- Spende
- Wettbewerb
- Interaktion auf Websites zur Nutzung von Online-Diensten
Die Motivation zur Nutzung unterscheidet sich je nach Anwendungsfall. Die Faktoren, die erfolgreiche Conversions begünstigen sind allerdings universeller. Im Folgenden werden wir diese genauer betrachten.
1. Key Facts
Jedes Formular bedarf einer Einleitung, die den Anreiz des Ausfüllens klar offen legt. Es gilt den Betrachter in kürzester Zeit zu überzeugen und die großen Fragen im Hinterkopf zu zerstreuen: Was habe ich davon? Welchen Anreiz habe ich um von meiner Rolle als Betrachter zu der eines interaktiven Nutzers zu werden? Also den deutlichen Nutzen aufzeigen, der die Mühe rechtfertigt. Je nach Bekanntheitsgrad des Anbieters variiert der Bedarf an Erklärungen. Daraus sollte man nicht schlussfolgern, dass sehr große Unternehmen getrost auf Erklärung verzichten. Auch diese können davon profitieren.
Beispiel: Facebook fasst die Einleitung in einem kompakten Dreizeiler und einer dazu passenden Visualisierung des Netzwerks zusammen.
[image type=“rounded“ float=“none“ src=“http://onlineconversion.de/wp-content/uploads/2019/06/einleitung-facebook-registrierung.jpg“ info=“none“ info_place=“top“ info_trigger=“hover“]
2. Anzahl der Felder
Wer kennt es nicht. Es öffnet sich eine Seite mit einem langen Formular und schon möchte man diese am liebsten gleich wieder verlassen. Hier zählt der erste Eindruck, ob der Aufwand den Nutzen rechtfertigt. Die durchschnittliche menschliche Aufmerksamkeitsspanne liegt mittlerweile nur noch bei ca. 8 Sekunden. Selbst ein Goldfisch liegt mit 9 Sekunden noch darüber.
Beispiel: Exemplarisches Registrierungsformular für einen E-Mail-Anbieter, welches von Länge und Struktur eine kognitive Hürde darstellt.
[image type=“none“ float=“none“ src=“https://onlineconversion.de/wp-content/uploads/2019/06/form-very-long.jpg“ alt=“Very Long Form“ info=“none“ info_place=“top“ info_trigger=“hover“]
Beispiel: Reduzierte Version des Formulars für einen E-Mail-Anbieter.
[image type=“none“ float=“none“ src=“https://onlineconversion.de/wp-content/uploads/2019/06/form-register-shorter.jpg“ alt=“Form Register Shorter“ info=“none“ info_place=“top“ info_trigger=“hover“]
Es gilt sich auf die nötigsten Abfragen zu beschränken, sämtliche Pflichtfelder zu überdenken und die bisweilen optionalen Felder nach Möglichkeit komplett zu entfernen.
Möchte man aus Betreibersicht möglichst viel über die Nutzer wissen, ist es abzuwägen, wie wichtig die einzelnen Details im Verhältnis zu dem Formularabschluss an sich sind. Ist der Erstkontakt hergestellt, lassen sich weitere Einzelheiten auch später in Erfahrung bringen.
Beispiel: Der Dienst AxureShare reduziert den Erstkontakt der Registrierung auf lediglich zwei Felder.
[image type=“rounded“ float=“none“ src=“https://onlineconversion.de/wp-content/uploads/2019/06/axure-registrierung.jpg“ info=“none“ info_place=“top“ info_trigger=“hover“]Welche Felder besondere Hürden darstellen, ist durch Tools wie etracker messbar. So lässt sich nachvollziehen, wie viele der Seitenbesucher das Formular benutzen, wie viele es davon abgeschlossen haben und welche Bearbeitungsdauer und Abbruchrate die Felder verzeichnen.
Info: etracker-Analyse der Abbruchraten
[image type=“rounded“ float=“none“ src=“https://onlineconversion.de/wp-content/uploads/2019/06/etracker-formularabbrueche.jpg“ info=“none“ info_place=“top“ info_trigger=“hover“]
Ist es nicht möglich auf bestimmte Felder zu verzichten, sollte erklärt werden, für welchen Zweck diese benötigt werden.
3. Layout
Ein klares Layout, welches dem natürlichem Lesefluss und einer gleichmäßigen Ausrichtung entspricht, verringert die kognitive Arbeit. Das Auge des Betrachters sucht automatisch einfach zu erfassende Strukturen, die dem natürlichen Lesefluss entsprechen. Man hat nur eine sehr kurze Zeitspanne bis die Betrachtung den Nutzer ermüdet. Eine erhöhte Zahl an Fixationen der Augen, wie sie durch Eyetracking erfasst werden können, strengen das menschliche Gehirn schnell an und es versucht die Arbeit tunlichst zu vermeiden. Es gibt verschiedene Möglichkeiten den Blick des Nutzers zu lenken und das Erfassen somit zu vereinfachen.
Beispiel: Formular mit unnötig vielen Fixationen, durch ungleichmäßige Ausrichtung der Felder.
[image type=“none“ float=“none“ src=“https://onlineconversion.de/wp-content/uploads/2019/06/Form-Ausrichtung.gif“ alt=“Formular ungleichmäßige Ausrichtung“ info=“none“ info_place=“top“ info_trigger=“hover“]
Längere Formulare werden durch das Aufteilen in mehrere thematisch passende Blöcke übersichtlicher. Es bietet sich an, diese auf mehrere Seiten verteilt und mit einer visuellen Prozessleiste darzustellen. Feedback über bereits erledigte Schritte gibt hier positive Bestärkung.
Beispiel: Mehrseitiges Formular mit Prozessvisualisierung und Feedback über den Fortschritt
[image type=“rounded“ float=“none“ src=“https://onlineconversion.de/wp-content/uploads/2019/06/form-mehrseitig.jpg“ info=“none“ info_place=“top“ info_trigger=“hover“]
Durch das anfängliche Investieren von Zeit und Arbeit mit leichteren / interessanteren Aufgaben (z.B. Kalkulator zum Berechnen einer Häuserdämmung), kann die Hemmschwelle für letzte größere Hürden, wie das Ausfüllen ausführlicher Kontakt- oder Zahlungsdaten sinken.
4. Nutzerführung
Als gute Führung der Augen, dient auch das Hervorheben aktiver Felder. Hier ist auch das Aktivieren des ersten Formularfeldes bei Betreten der Seite ein gutes Mittel, dem Betrachter zu zeigen, wo es los geht und durch den blinkenden Balken im Feld wird die Möglichkeit zur Texteingabe noch offensichtlicher.
Beispiel: Hier wird nicht nur das Feld hervorgehoben, sondern auch interaktiv durch eine Grafik auf das jeweilige Formularfeld gezeigt.
[image type=“rounded“ float=“none“ src=“https://onlineconversion.de/wp-content/uploads/2019/06/basecamp-register.jpg“ info=“none“ info_place=“top“ info_trigger=“hover“]
5. Kontrast
Ebenso wichtig wie Farben ist der Kontrast. Für eine möglichst stressfreie kognitive Verarbeitung ist die ausgewogene Abstufung der Farben für Formularfelder und Buttons unumgänglich. Umrandung, Füllung, Schrift und Abstände sollten in einem optimalen Verhältnis zueinander stehen.
Beispiel: Klarer Kontrast zur Verstärkung des logischen Verständnisses
[image type=“rounded“ float=“none“ src=“https://onlineconversion.de/wp-content/uploads/2019/06/google-form-contrast.jpg“ info=“none“ info_place=“top“ info_trigger=“hover“]
In Anbetracht der Tatsache, dass fast 10% der männlichen und knapp 1% der weiblichen Bevölkerung unter einer Farbsehstörung leiden oder sich dieser gar nicht bewusst sind, ist ein eindeutiger Kontrast um so wichtiger.
[button class=“mbn“ class=“navButton“ type=“flat“ block=“false“ size=“small“ href=“/blog/teil-2-web-formulare-optimieren-zahlreiche-best-practices-fuer-user-experience-conversions/“ title=“hier Klicken um Teil 2 zu lesen“ icon=“check-sign“ info=“tooltip“ info_place=“top“ info_trigger=“hover“ info_content=“hier Klicken um zu Teil 2 des Artikels zu gelangen“ shape=“square“ float=“right“]Weiter zu Teil 2 des Artikels [icon type=“chevron-right“][/button]