Formulare, die abschicken: UX-Muster, Validierung, Fehlermeldungen.
Formulare, die abschicken: UX, Validierung, Barrierefreiheit
Ein Formular ist der häufigste Konversionspunkt im Web. Und einer der häufigsten Frustrationspunkte.
Warum Formulare so oft scheitern
Zu viele Felder. Schlechte Fehlermeldungen ("Eingabe ungültig" – was denn jetzt genau?). Formular verschwindet nach dem Absenden ohne Feedback. Auf Mobile nicht benutzbar. Kein Auto-Fill-Support.
All das passiert, weil Formulare oft als technisches Element behandelt werden, nicht als UX-Element.
Wie viele Felder sind zu viele?
Als Faustregel: Jedes zusätzliche Pflichtfeld senkt die Conversion. Ob ein Feld wirklich Pflicht ist oder ob man auch ohne auskommt – das sollte aktiv hinterfragt werden.
Für Lead-Formulare: Name, E-Mail, vielleicht Telefon. Alles weitere holt ihr beim ersten Gespräch.
Inline Validation richtig einsetzen
Fehler beim Abschicken zu zeigen ist zu spät und frustriert. Aber Fehler beim Tippen zu zeigen ist zu früh. Der goldene Mittelweg: Validierung on Blur (wenn das Feld verlassen wird). Und wenn ein Fehler angezeigt wird: erklären, was falsch ist – und wie's richtig geht.
Fehlermeldungen, die wirklich helfen
"Bitte gültige E-Mail eingeben" → besser als "Eingabe ungültig".
Noch besser: "Das sieht nicht nach einer E-Mail-Adresse aus – fehlt vielleicht das @-Zeichen?" – menschlich, hilfreich, nicht bevormundend.
Barrierefreiheit bei Formularen
Labels mit Feldern verknüpfen (nicht nur visuell danebenstehen). Fehlermeldungen über aria-describedby mit dem Feld verbinden. Error Summary am Formularanfang nach Submission. Tab-Reihenfolge korrekt.
Checkliste Formulare
Anzahl Pflichtfelder auf Minimum reduziert
Labels korrekt mit Feldern verknüpft (for/id oder aria)
Inline Validation on Blur (nicht on Keyup oder on Submit)
Fehlermeldungen erklärend und spezifisch
autocomplete-Attribute für gängige Felder gesetzt
Erfolgs-Feedback nach Absenden deutlich
Mobile-Test auf echten Geräten durchgeführt
Formular-UX im Projekt verbessern?
markom.digital überarbeitet Formulare unter UX-, Conversion- und Barrierefreiheits-Gesichtspunkten.
