Top-Tipps zum Erstellen von Online-Formularen zur Verbesserung der Konversionsraten

Veröffentlicht: 2021-07-19

Online-Formulare können verschiedenen Zwecken dienen. Egal, ob Sie sich für einen Newsletter anmelden, ein Konto bei einer Website registrieren, einen Einkauf tätigen oder einfach nur eine Anfrage stellen, wir sind es jetzt gewohnt, die erforderlichen Informationen auszufüllen.

Eine schlechte Erfahrung mit einem Online-Formular kann jedoch dazu führen, dass Benutzer eine Aufgabe vollständig abbrechen und zu einer anderen Website wechseln.

Angesichts der ständig zunehmenden Nutzung mobiler Websites und der jüngsten Aktualisierung des mobilfreundlichen Ranking-Algorithmus von Google ist die Erstellung benutzerfreundlicher Formulare für mobile Geräte wichtiger denn je. Ich bin sicher, wir können uns alle darauf verlassen, dass wir extrem frustriert sind, wenn wir versuchen, ein Formular auf unserem Telefon auszufüllen, das auf diesem Gerät einfach nicht verwendet werden kann!

Hier sind unsere Top-Tipps zum Erstellen benutzerfreundlicher Online-Formulare sowohl für Desktop- als auch für Mobilgeräte, um zu vermeiden, dass Sie Ihre potenziellen Kunden bei der letzten Hürde des Konvertierungsprozesses verlieren:

1. Layout

Es mag offensichtlich erscheinen, aber ein sauberes und einfaches Layout für Ihr Online-Formular wird die Customer Journey so reibungslos wie möglich gestalten und mehr Menschen dazu ermutigen, alle Informationen auszufüllen. Vertikale Layouts, wie dieses Beispiel von House of Fraser, sind benutzerfreundlicher:

house-of-fraser-online-formular

Aber auch horizontale Layouts können funktionieren, wie in diesem Beispiel von Travel Republic:

Reise-Republik-Online-Formular

Der Schlüssel ist, es einfach zu halten und so wenige Felder wie möglich zu verwenden, um die benötigten Informationen zu erfassen.

Für mobile Nutzer ist dies besonders wichtig. Benutzer werden das Formular viel eher verlassen, wenn das Ausfüllen zu lange dauert.

Starbucks hat ein gutes Beispiel für ein sauberes, einfaches und vertikales Formular zum Erstellen eines Kontos auf seiner mobilen Website:

Starbucks-Online-Formular

Das Entfernen einer der normalen Navigationsoptionen aus Ihrem Online-Formular trägt auch dazu bei, es sauber und einfach zu halten. Fortnum und Mason haben beispielsweise ihr Menü oben auf der Seite entfernt und auf ihrer Seite mit den Checkout-Optionen durch ein "Secure Checkout"-Banner ersetzt:

fortnum-und-maurer-Online-Formular

Dies hält nicht nur das Formular sauber, sondern verhindert auch, dass Benutzer zu anderen Teilen der Website zurückkehren, wenn sie den Konvertierungsprozess gestartet haben. Eine Gast-Checkout-Option wird auch für E-Commerce-Websites empfohlen, wie Fortnum und Mason bereitgestellt haben. Benutzer zögern möglicherweise, alle ihre persönlichen Daten anzugeben, um ein Konto zu erstellen, wenn sie einen Schnellkauf tätigen.

2. Feldbeschriftungen und Eingabemethoden

Wichtig ist, dass die Pflichtfelder eindeutig beschriftet sind. Verwenden Sie deutlich erkennbare Beschriftungen, um Eingabefehler zu vermeiden, die dazu führen könnten, dass ein Benutzer das Formular verlässt. Fügen Sie ggf. eine Erläuterung des Feldes hinzu, um Verwechslungen zu vermeiden. Das OK Magazine hat ein Beispiel dafür im Feld „Bildschirmname“ auf seinem Online-Registrierungsformular:

ok-magazin-online-formular

Überlegen Sie sich die am besten geeignete Eingabemethode für jedes Feld. Es gibt verschiedene Arten:

  • Eingabefelder
  • Checkboxen
  • Tasten
  • Kalender
  • Dropdown-Menüs

In den meisten Fällen wird es wahrscheinlich offensichtlich sein, welche Methode am besten geeignet ist. Wenn es jedoch um mobile Formulare geht, sollten einige Methoden am besten vermieden werden. Zum Beispiel hat der WWF dieses Formular auf seiner mobilen Website, was für die Benutzer einige Probleme mit sich bringt:

wwf-Online-Formular

Die Ja/Nein-Tasten sind wohl zu klein, um sie einfach mit der Fingerspitze auszuwählen. Außerdem ist das Kontrollkästchen „Dies ist ein Geschenk“ im blauen Bereich fast vollständig verdeckt. Es wäre frustrierend, dieses Formular auf einem mobilen Gerät auszufüllen.

Expedia hingegen stellt sicher, dass die Kalendereingabemethode groß genug für mobile Geräte ist:

expedia-Online-Formular

3. Planen Sie den Prozess

Wenn Sie feststellen, dass Ihr Online-Formular zu lang wird, haben Sie keine Angst, es auf mehrere Seiten aufzuteilen, um es für die Benutzer aufzuschlüsseln. Der Schlüssel dabei besteht darin, die Erwartungen des Benutzers zu verwalten, indem der Prozess von Anfang an für ihn festgelegt wird.

Confused.com hat ein großartiges Beispiel dafür, wobei die verschiedenen Phasen oben auf der Seite klar nummeriert sind:

verwirrt.com-Online-Formular

Die Times-Website präsentiert die verschiedenen Schritte des Formulars in einem etwas anderen Format. Dies ist die erste Seite des Formulars, um sich für ein Online-Konto anzumelden:

the-times-online-Formular

Wenn wir nach unten scrollen, können wir die nächsten Schritte sehen:

the-times-online-form2

Wenn dem Nutzer von Anfang an die Länge des Formulars klar ist, kann er eine fundierte Entscheidung treffen, ob er genügend Zeit zum Ausfüllen hat oder später wiederkommen soll. Dies vermeidet ein Problem, das normalerweise mit längeren Formularen verbunden ist, bei dem Benutzer beginnen, das Formular auszufüllen, nur um von der Länge frustriert zu werden und die Aufgabe aufgeben.

4. Seien Sie hilfreich

Ähnlich wie im Beispiel des OK Magazine zuvor hat Barclaycard ein detaillierteres Beispiel dafür, wie genau erklärt wird, welche Informationen sie in ihrem Online-Banking-Anmeldeformular benötigen:

barclaycard-online-formular

Barclaycard erklärt nicht nur, welche Informationen benötigt werden, sondern gibt dem Benutzer auch Optionen hinsichtlich der Art der Informationen, die er eingeben kann. Dies wäre beispielsweise dann sinnvoll, wenn Sie sich nicht mehr an Ihren Benutzernamen oder Ihre ID-Nummer erinnern können, aber Ihre Karte dabei haben und stattdessen diese Nummer eingeben könnten.

Sie bieten auch 'Vergessen'-Optionen für beide Felder. Dies wird jetzt als Standard für Online-Anmeldeformulare erwartet, aber es ist erwähnenswert, da es sehr frustrierend sein kann, wenn diese Optionen nicht verfügbar sind.

Eine andere Möglichkeit, Ihren Benutzern hilfreich zu sein, besteht darin, ehrlich zu sein, was Sie mit den Informationen tun. Virgin Active macht dies auf ihrem Online-Anfrageformular:

jungfräulich-aktiv-online-formular

Virgins „Versprechen, Ihre Nummer nur für Rückrufe zu verwenden“, obwohl es nicht abdeckt, was sie mit Ihrer E-Mail-Adresse vorhaben, bietet dem Benutzer eine gewisse Beruhigung.

Helfen Sie Ihren Benutzern zu wissen, dass sie jedes Feld korrekt und fehlerfrei ausgefüllt haben, bevor Sie auf die Schaltfläche "Weiter" oder "Absenden" klicken, mit Symbolen, nachdem jedes Feld ausgefüllt ist. Sehr haben Sie ein Beispiel dafür auf ihrem Online-Anmeldeformular mit grünen Häkchen und roten Kreuzen:

Sehr-Online-Formular

Falls Fehler vorhanden sind, markieren Sie diese deutlich neben dem entsprechenden Feld, ggf. mit einer Erläuterung, was erforderlich ist. Auf diese Weise können Benutzer sicher sein, dass das Formular beim ersten Klick akzeptiert wird.

5. Immer testen!

Wenn Sie ein Online-Formular erstellen, testen Sie es immer selbst auf so vielen Geräten wie möglich, bevor Sie es starten. Füllen Sie das Formular auf so viele verschiedene Arten wie möglich aus, um sicherzustellen, dass alle Felder funktionieren.

Online-Formulare sind wertvolle Werkzeuge für Ihre Website. Egal, ob Sie Daten erfassen, einen Verkauf verarbeiten oder eine Anfrage erhalten möchten, Sie benötigen ein Formular, um die Konvertierung abzuschließen.

Zu diesem Zeitpunkt haben Sie die meiste harte Arbeit geleistet, um Besucher zum Kauf / zur Anmeldung / Registrierung usw. zu ermutigen. Achten Sie darauf, dass nichts so Einfaches wie ein Online-Formular dieser wichtigen Konvertierung im Wege steht!