Zurück

6 Tipps für nutzerfreundliche Online-Formulare in Onlineshops

So verbesserst du deine Conversion Rate – Tipps für Online-Formulare
Bild: © Austin Distel / Unsplash

Kaufabbrüche im Checkout – darum solltest du Online-Formulare optimieren

Der Checkout ist der kritischste Moment beim Online-Einkauf: Wird der Käufer den Bestellprozess bis zum Ende ausführen und auf den Kauf-Button klicken? Erfahrungsgemäß sind die Abbruchraten beim Onlineshopping hoch: Nur zwei bis drei von 100 Besuchern eines Shops kaufen im Schnitt tatsächlich ein. Gründe, warum Besucher den Einkauf abbrechen, gibt es jede Menge. Viele finden die Versandkosten zu hoch oder ihnen fehlt die bevorzugte Zahlart.

Bei einer weltweit durchgeführten Statista-Befragung von Onlineshoppern 2017 gaben 20 Prozent an, dass die Bestellung zu kompliziert sei. Jeder zehnte fand, dass die Bestellung zu lange dauerte. Für den Checkout bedeutet das: Alles, was ihn einfacher und schneller für die Kunden macht, ist von Vorteil. Das gilt vor allem für Online-Formulare.

Web-Formulare auszufüllen, empfinden die meisten Menschen als nervig oder anstrengend – gerade auf kleineren mobilen Bildschirmen. Deshalb können schlecht gemachte Formulare ein Grund sein, warum Shop-Besucher auf den letzten Metern den Kauf abbrechen. Wenn du diese sechs Tipps für Online-Formulare beachtest, erhöhst du die Usability im Checkout-Prozess, verringerst die Zahl der Kaufabbrüche und steigerst die Conversion-Rate.

#1 Achte auf eine übersichtliche Optik

Wenn Online-Formulare unübersichtlich oder zu lang sind, werden viele Nutzer abspringen. Usability-Experten empfehlen, auf ausreichende Abstände zwischen den Feldern zu achten. Das ist gut fürs Auge, weil es sich besser orientieren kann.

formular-optimierung-2
Beispiel für ein übersichtliches Online-Formular: Auf dieser Anmeldeseite bei Otto.de lenkt nichts den Blick ab, alles wirkt aufgeräumt.

#2 Denk daran: Weniger ist mehr

Aus Nutzersicht ist vor allem eines wichtig: Dass das ohnehin schon lästige Ausfüllen der Online-Formulare leicht ist und schnell geht. Deshalb sollten Shops auf alles Unnötige verzichten. Das bedeutet:

  • Eine klare Anordnung der Felder, am besten linksbündig, weil das auf mobilen Geräten leichter fürs Auge zu erfassen ist. Ein weiterer Vorzug: Die User müssen nicht nach rechts scrollen.
  • Möglichst wenig Ablenkung durch einen unruhigen Hintergrund, durch Rahmen oder die farbliche Gestaltung.
  • Zudem ist es ratsam, beim ersten Kundenkontakt nicht zu viele Informationen abzufragen. Das wirkt abschreckend. Reduziere deshalb die Zahl der Pflichtfelder auf das Nötigste.
formular-optimierung-3
C&A begrüßt Neukunden freundlich und präsentiert ein übersichtliches Online-Formular, das auch auf Smartphones gut aussieht.

#3 Sorge für eine klare und deutliche Benennung

Die klare und deutliche Benennung beginnt beim Web-Formular selbst. Durch Überschriften wie „Registrieren“ oder „In wenigen Schritten zum Kauf“ wird dem Besucher deutlich gemacht, was er gerade ausfüllt.

Auch die Felder selbst sollen präzise benannt sein, um eindeutige Hinweise zu geben, welche Information der Käufer an dieser Stelle eingeben soll. Zum Beispiel: Ist mit „Name“ nur der Nachname oder auch der Vorname gemeint? Oder beides in einem Feld?

#4 Baue eine Fortschrittsanzeige ein

Wir kennen die Funktion von Online-Umfragen: Eine Fortschrittsleiste zeigt an, wieviel des Wegs hinter beziehungsweise vor uns liegt. Das schafft Transparenz. Eine solche Fortschrittsanzeige hilft dem Nutzer auch beim Ausfüllen der Online-Formulare im Checkout-Prozess: Die Besucher müssen ein sehr langes Formular ausfüllen, für das sie nach unten scrollen müssen? Übersichtlicher ist es, die Datenabfrage in Einzelschritte aufzuteilen. So kann auch gut optisch hervorgehoben werden, an welcher Stelle sich der User gerade befindet.

Der Fortschritt kann mit unterschiedlichen Mitteln verdeutlicht werden, indem beispielsweise die Zahl der Schritte benannt wird („Schritt 2 von 5“), eine Farbleiste eingeblendet wird, die für den zurückgelegten Weg steht („60 Prozent geschafft“) oder indem die bereits erfolgreich bearbeiteten Einzelschritte farblich anders markiert werden.

formular-optimierung-4
Saturn visualisiert die zu durchlaufenden Schritte und markiert farblich, an welcher Stelle des Checkout-Prozesses sich der Kunde aktuell befindet.

#5 Nutze die Vorteile der Validierung

Eine Eingabevalidierung bedeutet, dass du deinem Kunden bestätigst, dass er die einzelnen Felder der Online-Formulare richtig ausgefüllt hat. Dazu erscheint sofort ein grünes Häkchen rechts neben dem Formularfeld, sobald das Feld korrekt bearbeitet wurde. Das hat zwei Vorteile: Der Kunde erhält eine Bestätigung und Bestärkung, dass er alles richtig macht. Das erhöht die Motivation, weitere Felder auszufüllen. Und: Wenn schon bei der Eingabe überprüft wird, ob sie valide ist, sinkt die Fehlerquote.

formular-optimierung-5
In den Feldern des Online-Formulars steht deutlich, welche Angabe an dieser Stelle benötigt wird. Darunter erklärt der Onlineshop, wozu diese Information benötigt wird. Ist ein Feld ausgefüllt, erscheint ein grüner Haken.

#6 Vertrauen stärken

Die Fragen „Was passiert mit meinen Daten?“, „Kann ich diesem Shop vertrauen?“ und „Wie sicher sind meine Daten?“ bewegen die Kundinnen und Kunden beim Online-Einkauf. Im Checkout können Shops vieles tun, um zu vermitteln, dass Kunden die richtige Entscheidung mit ihrem Kauf treffen. Mach deinem Kunden deutlich, dass dein Shop vertrauenswürdig ist und seine Daten sicher sind, zum Beispiel mit der Einblendung eines Gütesiegels für deinen Onlineshop und einem Hinweis, dass die Daten verschlüsselt übertragen werden.

formular-optimierung-6
Im Checkout listet der Onlineshop von OBI Vorteile auf und vermittelt mit einem Gütesiegel sowie dem Hinweis auf die verschlüsselte Datenübertragung, dass der Einkauf sicher ist.

Es gibt immer Potenzial, Online-Formulare zu optimieren – und es lohnt sich. So kannst du den Checkout nutzerfreundlicher gestalten, die Zahl der Kaufabbrüche reduzieren und langfristig die Conversion Rate steigern.

Katja Schulz
Diese Story teilen