Wenn ein Nutzer ein Formular öffnet, hat er sich bereits für etwas entschieden: ein Angebot anfordern, sich in eine Liste eintragen oder einen Kauf abschließen.
Dieser Schritt sollte ihn nicht umstimmen, doch ein einziges Feld zu viel, eine verwirrende Fehlermeldung oder ein Button, der nicht erklärt, warum er gesperrt ist, reicht aus, damit er die Sitzung abbricht.
Ein Formular, das UX-Best-Practices befolgt, wird von fast 8 von 10 Personen gleich beim ersten Versuch korrekt ausgefüllt; ohne diese Praktiken sind es 4 von 10. Der Unterschied liegt nicht darin, was abgefragt wird, sondern wie.
In diesem Artikel zeigen wir, was ein schlecht gestaltetes Formular kostet, was sich mit UX-Best-Practices ändert und welche häufigen Fehler Sie vor dem Livegang vermeiden sollten.
Wie viel Ihr Unternehmen durch ein schlecht gestaltetes Formular verliert
Nicht jedes Formular verliert beim Scheitern gleich viel. Ein Kontaktformular verliert Leads, ein Bestellformular verliert Umsatz, ein Newsletter-Formular verliert Adressen – die Auswirkung hängt stark vom Typ ab.
Im Durchschnitt wird ein Kontaktformular von etwas mehr als einem Drittel der Nutzer, die es beginnen, abgeschickt (37,9 %), ein Bestellformular von etwas mehr als der Hälfte (58,2 %) und ein Formular für Angebots- oder Demo-Anfragen von fast drei Vierteln (74,5 %).
Übertragen Sie das auf Ihren eigenen Funnel: Wie viele von 100 Personen, die im Checkout ankommen, schließen den Kauf ab? Die Differenz zu 100 % ist kein Geheimnis: Es sind Verkäufe, die fast sicher waren und unterwegs verloren gingen. Multiplizieren Sie das mit Ihrem durchschnittlichen Warenkorbwert, und Sie sehen, dass das Problem einen ganz konkreten Preis in Ihrer Gewinn- und Verlustrechnung hat.
Im B2B sieht es anders aus, die Frage ist aber dieselbe: Wie viele von 100 Unternehmen, die Ihr Angebotsformular auszufüllen beginnen, schicken es auch ab? Hier geht es nicht um einen Warenkorb von 50 €, sondern um Leads, die jeweils Tausende Euro wert sein können – schon der Verlust weniger davon wirkt sich direkt auf die Vertriebspipeline aus.
Deshalb lohnt es sich, jede Entscheidung im Formular zu überprüfen:
- Ist dieses Feld unverzichtbar, um die Bestellung zu verarbeiten?
- Sagt die Fehlermeldung, was zu tun ist, und nicht nur, dass etwas schiefgelaufen ist? Vermittelt das Kartenformular genug Vertrauen, um eine 16-stellige Nummer einzugeben?
- Verlangen Sie ein exaktes Angebot, bevor der Nutzer Ihnen vertraut?
- Zwingen Sie ihn, eine Telefonnummer anzugeben, obwohl er lieber per E-Mail beginnen würde?
- Ist klar, was nach dem Absenden passiert, oder verschwindet die Eingabe im Nichts, ohne Bestätigung?
Warum Formulare abgebrochen werden: Sicherheit, Länge und überflüssige Fragen
Der am häufigsten genannte Grund für den Abbruch ist weder der Preis noch das Produkt, sondern Misstrauen bei sensiblen Daten: Fast 3 von 10 Personen brechen aus Sicherheitsbedenken ab. Danach folgt die Länge des Formulars mit etwas mehr als 1 von 4 und schließlich Fragen, die mit dem Ziel des Nutzers nichts zu tun zu haben scheinen, mit 1 von 10.
Worauf es bei einem guten Formular ankommt
Sichtbare Labels und logische Gruppierung der Felder
Das Label (Beschriftung) gibt an, welche Information in welches Feld gehört, und sollte immer über dem Feld stehen – nie ersetzt durch einen Platzhalter (Beispieltext), der verschwindet, sobald der Nutzer zu tippen beginnt.
Verwandte Felder (Adresse, Zahlung, Kontakt) in visuellen Blöcken zu gruppieren, lässt ein Formular kürzer wirken, auch wenn es dieselben Felder hat – gestützt auf die Gestaltgesetze der visuellen Gruppierung.
Weniger Felder, weniger Reibung und mehr Conversions
Der durchschnittliche Checkout zeigt fast doppelt so viele Felder, wie zum Abschluss einer Bestellung tatsächlich nötig sind. Bei jedem aktiven Formular sollten Sie sich zuerst fragen, ob das Fehlen eines Feldes die Verarbeitung der Angaben oder die Lieferung der Bestellung verhindern würde.
Im richtigen Moment validieren, nicht zu früh
Die ideale Validierung erfolgt, wenn der Nutzer ein Feld fertig ausgefüllt hat, nicht während er noch tippt. Zu frühes Validieren frustriert: Meldet das E-Mail-Feld schon nach den ersten Buchstaben einen Fehler, warnt es vor einem Problem, bevor der Nutzer fertig geschrieben hat. Zum richtigen Zeitpunkt eingesetzt, senkt diese Art der Validierung die Fehler um bis zu 22 % und beschleunigt die Bearbeitungszeit deutlich.
Fortschritt bei langen oder mehrstufigen Formularen sichtbar machen
Hat ein Formular mehr als 8 bis 10 Felder, hilft es, es in Schritte zu unterteilen und einen klaren Indikator wie „Schritt 2 von 4“ anzuzeigen: So weiß der Nutzer, wie viel noch vor ihm liegt, und bricht nicht auf halbem Weg ab. Mehrere Schritte verbessern die Conversion nicht von selbst: Bei einem kurzen Formular können sie unnötige Reibung erzeugen, bei einem langen oder einem mit mehreren Entscheidungen machen sie es überschaubarer.
Einspaltiges Formular
Ein einspaltiges Formular wird im Durchschnitt 15 Sekunden schneller ausgefüllt als ein mehrspaltiges, weil der Nutzer sich nicht zwischen den Feldern visuell neu orientieren muss. Am Desktop können kurze, zusammengehörige Felder wie Ort und Postleitzahl in derselben Zeile stehen, ohne die Leserichtung zu stören.
Tipp: Formular richtig anbinden und messen
Auch wenn wir uns in diesem Artikel auf die Nutzererfahrung konzentrieren: Ein gut gestaltetes Formular nützt nichts, wenn die Daten nirgendwo ankommen oder nicht richtig gemessen werden. Wenn Ihr Shop auf PrestaShop läuft, hilft Ihnen das Google-Tag-Manager-Modul mit Google Analytics 4 (GA4) PRO dabei, die Ereignisse Ihres Shops zu erfassen.
Denken Sie daran: Design und Daten müssen immer zusammengehören. Vor der Veröffentlichung sollten Sie diese vier Punkte prüfen:
Formulartypen nach Aufbau
Einseitiges vs. mehrstufiges Formular
Ein einseitiges Formular funktioniert besser, wenn der Kauf oder die Registrierung einfach ist und es nicht zu viele Felder gibt: Der Nutzer überblickt alles auf einen Blick und schließt den Vorgang ohne Unterbrechung ab.
Ein mehrstufiges Formular ist dagegen sinnvoll, wenn mehrere Entscheidungen oder unterschiedliche Informationsblöcke anstehen (persönliche Daten, Versand, Zahlung): Die Aufteilung lässt das Formular kürzer wirken, bringt aber eine visuelle Reibung mit, die nur gerechtfertigt ist, wenn der Inhalt es verlangt.
Spezifische vs. generische Fehlermeldungen
Eine spezifische Fehlermeldung benennt genau, was fehlt oder falsch ist, statt nur zu melden, dass etwas schiefgelaufen ist. Gibt es für das Problem eine Alternative, etwa weil eine Angabe bereits im System existiert, bieten Sie diese direkt an (statt die Angabe einfach abzulehnen), um es mit konkreten Hinweisen zu lösen und den Abbruch des Formulars zu vermeiden.
Klarer Fortschrittsindikator
Bei langen oder in Schritte unterteilten Formularen hilft die Anzeige, an welcher Stelle der Nutzer sich befindet („Schritt 2 von 4“), den Abbruch auf halbem Weg zu verringern. Das Format kann variieren (Anzahl der Schritte, Prozentwert, Fortschrittsbalken), die Funktion bleibt gleich: Der Nutzer soll wissen, wie viel noch vor ihm liegt, bevor er ungeduldig wird.
Achtung: Mehr als vier Schritte sind nicht ratsam. Ab dann senkt jede weitere Seite die Wahrscheinlichkeit, dass der Nutzer das Formular abschließt.
Fehler, die den Abbruch bei jedem Formular in die Höhe treiben (und wie Sie sie auf Ihrer Website reduzieren)
Unnötige Informationen vor Abschluss der Aktion abfragen
Jedes zusätzliche Feld erhöht den Aufwand bis zum Abschluss. Bevor Sie es beibehalten, fragen Sie sich, ob sein Fehlen die Verarbeitung der Aktion verhindern würde: Eine zweite Telefonnummer, ein Geburtsdatum ohne Bezug zum Kauf oder eine Frage zu Werbepräferenzen lassen sich meist auf einen späteren Schritt verschieben, optional machen oder ganz streichen.
Unklare Fehlermeldungen
Eine Meldung wie „ungültige Angabe“ weist darauf hin, dass es ein Problem gibt, hilft aber nicht, es zu lösen. Der Kunde muss raten, welches Feld fehlerhaft ist und welches Format erwartet wird, obwohl die Meldung das Problem benennen und die Korrektur erklären sollte – immer direkt beim betreffenden Feld.
Deaktivierte Buttons ohne Erklärung
Ein gesperrter Button ohne jeden Hinweis lässt den Nutzer im Unklaren darüber, was noch fehlt. Den Button immer aktiv zu lassen und beim Versuch weiterzugehen die offenen Felder zu markieren, ist klarer als ein grauer Button ohne Kontext.
Ein Button, der alles löscht, was der Nutzer eingegeben hat
Buttons wie „Zurücksetzen“ oder „Formular löschen“ lösen kein reales Problem des Nutzers, bergen aber das Risiko, dass jemand durch einen versehentlichen Klick seine Arbeit verliert. Erhebt das Formular sensible Daten und möchte der Nutzer bewusst abbrechen, genügt ein Abbrechen-Button – stets mit deutlich geringerer visueller Gewichtung als der Absenden-Button.
Formular nicht barrierefrei und nicht per Tastatur bedienbar
Ein Formular sollte sich ohne Maus ausfüllen lassen, mit logischer Tabulatorreihenfolge und einem korrekt zugeordneten Label an jedem Feld. Fehler müssen außerdem für Screenreader ansagbar und mit dem jeweiligen Feld verknüpft sein, nicht nur farblich gekennzeichnet.
Checkliste zur Senkung der Abbruchrate Ihrer Formulare
Stellen Sie sich diese Schlüsselfragen, bevor Sie ein Formular auf Ihrer Website veröffentlichen:
- Ist jedes Feld für den Abschluss der Aktion unverzichtbar, oder kann es entfallen, verschoben oder als optional markiert werden?
- Bleiben die Labels sichtbar, während der Nutzer seine Angaben ausfüllt und prüft?
- Erscheinen Fehler direkt beim betroffenen Feld und erklären, wie sie zu beheben sind?
- Wurde das Formular auf einem echten Smartphone getestet, mit Autofill und der passenden Tastatur für jeden Datentyp?
- Lässt es sich vollständig per Tastatur ausfüllen, mit logischer Fokusreihenfolge?
- Ist der Fortschritt klar erkennbar, wenn das Formular in mehrere Schritte unterteilt ist?
- Wird gemessen, in welchen Feldern die meisten Fehler oder Abbrüche auftreten, um Verbesserungen zu priorisieren?
Denken Sie daran: Nichts davon erfordert einen kompletten Relaunch der Website. Meist genügt es, das Formular Feld für Feld durchzugehen: was abgefragt wird, wann ein Fehler erscheint und wie lange der Nutzer bis zum Ende braucht.
Wenn Sie nicht wissen, wo Sie anfangen sollen: Bei Línea Gráfica analysieren wir Ihre Website im Rahmen unserer Conversion-Optimierung (CRO) und sagen Ihnen genau, was Ihre Conversions bremst.
Quellen
FormStory — Form Abandonment Statistics: https://formstory.io/learn/form-abandonment-statistics/
FinancesOnline — 109 Online Form Abandonment Statistics: https://financesonline.com/form-abandonment-statistics/
Nielsen Norman Group — Website Forms Usability: Top 10 Recommendations: https://www.nngroup.com/articles/web-form-design/
Feathery — 150 Online Form Statistics: https://www.feathery.io/blog/online-form-statistics
Marketing4ecommerce — Los 5 mejores checkouts del eCommerce español (auf Spanisch): https://marketing4ecommerce.net/formularios-de-checkout-y-registro-de-5-grandes-ecommerces/
uiFromMars — Diseño de formularios: por qué el 67% los abandona (y cómo evitarlo) (auf Spanisch): https://uifrommars.com/diseno-formularios-reducir-abandono/
CXL — Form Design Principles: 13 Empirically Backed Best Practices: https://cxl.com/blog/form-design-best-practices/
WPForms — 101 Unbelievable Online Form Statistics & Facts: https://wpforms.com/online-form-statistics-facts/
Stripe — Proceso de compra de una página vs. de varios pasos (auf Spanisch): https://stripe.com/mx/resources/more/one-page-checkout-vs-multistep-checkout
Shopify — Pago en una página (auf Spanisch): https://www.shopify.com/es/blog/pago-en-una-pagina
