So schreibst du hilfreiche Fehlermeldungen für Formulare
Eine Person gibt ihre E-Mail-Adresse ein, wechselt zum nächsten Feld und erhält einen hilfreichen Korrekturhinweis. Eine andere sieht fast denselben Satz noch während der Eingabe und fragt sich, was sie falsch gemacht hat. Die Wörter können identisch sein. Das Erlebnis ist es nicht.
Genau das macht Fehlermeldungen bei der Formularvalidierung überraschend schwierig. Ein freundlicherer Satz rettet keinen ungeduldigen Auslöser. Eine präzise Erklärung hilft nicht, wenn sie auf die falsche Antwort zeigt. Die eigentliche Arbeit besteht darin zu entscheiden, was das System weiß, wann es sich melden sollte und was die Person als Nächstes tun kann.
Dafür gibt es gute Erkenntnisse, aber kein einheitliches Muster für alle Situationen. E-Commerce-Forschung, Leitlinien für öffentliche Dienstleistungen und Experimente mit Registrierungsformularen gewichten Unterbrechungen und frühe Rückmeldungen unterschiedlich. Diesen Unterschied zu verstehen ist nützlicher, als vermeintlich perfekte Fehlermeldungen zu sammeln.
Was echte Nutzer über Validierung zeigen
In Edward Scotts Bericht vom Januar 2024 über Baymards Tests zur Inline-Validierung ließ eine Testperson bei L.L.Bean das @-Zeichen ihrer E-Mail-Adresse weg. Der Hinweis erschien nach dem Wechsel zum nächsten Feld; sie korrigierte die Eingabe innerhalb weniger Sekunden. Bei Etsy erhielt eine andere Testperson bereits beim Betreten eines unberührten Adressfelds eine Fehlermeldung. Sie empfand das als Zurechtweisung, bevor sie überhaupt geantwortet hatte. REI lieferte ein anderes Beispiel für die Fehlerbehebung: Die Meldung zum Kartensicherheitscode verschwand, als die fehlende dritte Ziffer ergänzt wurde.
Diese historischen Beobachtungen zeigen, warum „nutzt Inline-Validierung“ keine vollständige Beschreibung ist. Wann eine Meldung erscheint und wann sie verschwindet, kann ebenso wichtig sein wie ihr Wortlaut.
Für unsere Formularprüfungen würde ich daraus eine Frage ableiten: Reagiert die Meldung auf eine Handlung, die die Person selbst als abgeschlossen betrachtet? Ein Klick auf Weiter drückt diese Absicht klar aus. Das Verlassen eines Felds tut es manchmal. Den Cursor in ein leeres Feld zu setzen meist nicht. Die Oberfläche braucht einen Grund zur Unterbrechung, nicht bloß einen Wert, der gerade eine Regel verletzt.
Ein hilfreiches Gegenbeispiel liefert die Registrierungsformularstudie von Luke Wroblewski und Etre aus dem Jahr 2009. Zweiundzwanzig Teilnehmende probierten sechs Varianten aus. Gegenüber der Kontrollversion erzielte die beste Variante mit Inline-Validierung laut Bericht eine um 22 % höhere Erfolgsquote und eine um 42 % kürzere Bearbeitungszeit. Eine Person sagte sinngemäß: „Man möchte seine Fehler lieber schon unterwegs erfahren.“ Grüne Häkchen neben vertrauten Angaben sorgten allerdings auch für Verwirrung darüber, was das System tatsächlich geprüft hatte.
Die nützlichste Erkenntnis der Studie betrifft Unsicherheit: Wer einen verfügbaren Nutzernamen auswählt, braucht eine Information, die das System besitzt. Wer den eigenen Namen eingibt, braucht möglicherweise keine Bestätigung. Ich würde Rückmeldungen dort priorisieren, wo sie eine offene Frage klären, statt Zustimmungssymbole gleichmäßig über das Formular zu verteilen.
Warum GOV.UK einen anderen Zeitpunkt wählt
Das Validierungsmuster von GOV.UK empfiehlt, mit der Validierung zu warten, bis eine Person versucht, fortzufahren oder das Formular abzusenden, statt bereits beim Verlassen eines Felds zu validieren. Es rät außerdem dazu, eingegebene Antworten zu erhalten, oben eine Fehlerübersicht anzuzeigen, den Fokus dorthin zu bewegen und die Fehler neben den betreffenden Feldern zu benennen. Eine frühere Validierung braucht unterstützende Nutzerforschung.
Den Unterschied zu den E-Commerce-Beispielen sollte man nicht einebnen. Bei einem kurzen Schritt mit nur einer Frage bleibt eine Korrektur nach dem Absenden relativ lokal: Die Antwort steht noch direkt vor dir. In einem langen Checkout kann das fehlerhafte Feld beim Absenden längst weit zurückliegen.
Würde ich einen Workshop-Buchungsablauf prüfen, begänne ich mit der Struktur der Aufgabe. Auf einer Datumsseite mit einer einzigen Frage ist Weiter ein plausibler Zeitpunkt, eine nicht verfügbare Auswahl zu erklären. Enthält eine Seite dagegen Kontaktdaten, Angaben zur Barrierefreiheit, Platzanzahl und Rechnungsinformationen, kann die späte Meldung eine lange Suche zurück durch das Formular verursachen. Das rechtfertigt nicht automatisch Live-Validierung überall. Es macht gezielte frühzeitige Rückmeldungen aber zu einem sinnvollen Testkandidaten.
Außerdem sind Hilfestellung und Fehler nicht dasselbe. Eine Passwortcheckliste kann während der Eingabe Anforderungen erklären, ohne jede noch offene Anforderung als Fehlleistung darzustellen. Ein Datumshinweis kann den Buchungszeitraum erklären, bevor ein Wert vorliegt. Nützliche Hilfe muss nicht bis zum Absenden warten. Und frühe Hilfe muss nicht wie eine rote Warnung aussehen.
| Situation | Ausgangsvorschlag | Im Test beobachten |
|---|---|---|
| Eine Frage pro Schritt | Beim Klick auf Weiter validieren | Kann die Person die Antwort sofort finden und korrigieren? |
| Lange Seite mit vorhersehbaren Formatfehlern | Gezielte Rückmeldungen nach einer abgeschlossenen Antwort testen | Bedeutet das Verlassen eines Felds abgeschlossen oder nur vorübergehend pausiert? |
| Einen verfügbaren Nutzernamen wählen | Nach einer aussagekräftigen Eingabe die Verfügbarkeit prüfen | Sind Ladevorgang und veraltete Ergebnisse unterscheidbar? |
| Einen bestehenden Fehler korrigieren | Die betroffene Regel erneut prüfen | Verschwindet die Warnung, sobald ihre Ursache behoben ist? |
Halte fest, welche Felder welchen Auslöser verwenden. Sonst kann „Wir validieren inline“ drei verschiedene Verhaltensweisen verbergen, die drei verschiedene Personen umgesetzt haben.
Formuliere die Korrektur, die das System tatsächlich begründen kann
„Gib eine gültige E-Mail-Adresse ein“ ist oft das Ende eines Gesprächs, obwohl es der Anfang sein sollte. Was bedeutet hier gültig? Fehlend, falsch formatiert, nicht verfügbar und nicht verifiziert sind unterschiedliche Zustände. Werden sie gleichgesetzt, klingen Meldungen sicher, erklären aber nicht den nächsten Schritt.
In einem fiktiven Workshopformular könnte bei einem leeren Kontaktfeld stehen: „Gib eine E-Mail-Adresse für deine Buchungsbestätigung ein.“ Fehlt im eingegebenen Text das @-Zeichen, beschreibt „Gib eine E-Mail-Adresse mit @-Zeichen ein“ ein beobachtbares Problem. Keiner der Sätze beweist, dass das Postfach existiert oder der Person gehört. Dafür wäre eine eigene Verifizierung nötig.
Es ist verlockend, für jeden möglichen Tippfehler eine äußerst spezifische Meldung zu schreiben. Ich würde das nur tun, wenn die Validierungslogik diese Fehler zuverlässig unterscheiden kann. Die Behauptung, eine Domain sei falsch geschrieben, hilft nicht, wenn jemand eine unbekannte, aber legitime Domain nutzt. Ist das System unsicher, kann ein unverbindlicher Vorschlag besser sein als eine harte Ablehnung. Diesen Unterschied muss das Team vor der Textfreigabe klären.
Hier ist ein kleiner Meldungskatalog für unser Workshopbeispiel. Jede Zeile beginnt mit einer Bedingung, weil dasselbe Feld mehrere unterschiedliche Meldungen brauchen kann.
| Bekannte Bedingung | Vorgeschlagene Meldung | Behebung |
|---|---|---|
| Erforderliche E-Mail-Adresse fehlt | Gib eine E-Mail-Adresse für deine Buchungsbestätigung ein. | Fehlende Antwort ergänzen. |
| E-Mail-Adresse enthält kein @-Zeichen | Gib eine E-Mail-Adresse mit @-Zeichen ein. | Format korrigieren. |
| Vier Plätze angefragt, zwei verfügbar | Es sind nur 2 Plätze verfügbar. Wähle höchstens 2 Plätze oder einen anderen Termin. | Anzahl oder Termin ändern. |
| Buchungsergebnis lässt sich nicht bestätigen | Wir konnten deine Buchung nicht bestätigen. Prüfe ihren Status, bevor du es erneut versuchst. | Einen tatsächlich vorhandenen Weg zur Statusprüfung nutzen. |
Die letzte Zeile verlangt bewusst mehr vom Produkt als einen Satz. Eine Aufforderung zur Statusprüfung passt nur, wenn der Dienst dafür einen nutzbaren Weg anbietet. Fehlt er, braucht die Gestaltung einen anderen, mit Entwicklung und Support abgestimmten Ausweg. Der Text sollte diese fehlende Entscheidung sichtbar machen, statt sie mit „Bitte versuche es erneut“ zu verdecken.
Mache ein langes Formular nach einem Fehler navigierbar
Stell dir vor, du klickst am Ende einer Buchungsseite auf Weiter. Zwei Felder weit oben sind nun fehlerhaft, doch der sichtbare Bereich zeigt weiterhin den Button. Ein roter Rahmen irgendwo außerhalb der Ansicht reicht nicht. Die Person muss erkennen, dass die Aktion nicht erfolgreich war, und zu den betroffenen Antworten gelangen.
In unserem Workshopbeispiel kann eine Übersicht die Probleme mit Platzanzahl und Datum nennen. Jeder Eintrag verlinkt zum betreffenden Feld. Der lokale Hinweis bleibt während der Korrektur direkt neben der Antwort. Diese Wiederholung hat einen Zweck: Die Übersicht führt durch die Seite; die lokale Meldung hilft beim Bearbeiten. Unterschiedliche Formulierungen an beiden Stellen würden nur eine zusätzliche gedankliche Übersetzung verlangen.
Die Übersicht sollte zudem gezielt bleiben. Eine Kontaktadresse, die die relevanten Prüfungen bestanden hat, gehört nicht in die Fehlerliste. Ebenso wenig sollte das gesamte Formular geleert werden, um einen sauberen Ausgangszustand herzustellen. Die vorherige Antwort hilft zu verstehen, was passiert ist, und nur das Nötige zu ändern. Bei sensiblen Angaben braucht das Erhalten von Werten eine eigene Produkt- und Sicherheitsentscheidung. Versprich nicht, dass jedes Feld immer gespeichert bleibt.
Hier muss aus einer statischen Gestaltungsprüfung eine Interaktionsprüfung werden. Folge einem Übersichtslink mit der Tastatur. Prüfe, wo der Fokus landet, ob die Feldbeschriftung unter einer fixierten Kopfzeile sichtbar bleibt und ob die Erklärung beim Erreichen des Felds verfügbar ist. Korrigiere dann die Antwort und sende erneut ab. Ein Screenshot kann einen roten Rahmen zeigen. Er kann nicht belegen, dass dieser Weg durch die Seite funktioniert.
Prüfe auf dem Smartphone dieselbe Abfolge bei geöffneter Bildschirmtastatur. Eine Meldung kann im Desktoprahmen wunderbar passen und auf dem Handy hinter der Tastatur verschwinden. Lange Fehlermeldungen sollten umbrechen, statt zu unlesbar kleiner Schrift zu schrumpfen. Ich würde einer Korrektur lieber eine weitere Zeile geben, als die Person zum Hineinzoomen in die entscheidende Anweisung zu zwingen.
Ändern sich die Fakten, muss sich die Meldung ändern
Ein häufiger Prüfungsfehler ist die Freigabe von nur zwei Ansichten: normal und fehlerhaft. Die Schwierigkeit liegt oft dazwischen. Jemand bearbeitet eine Antwort, das ursprüngliche Problem verschwindet, aber der rote Hinweis bleibt. Aus Sicht der Person könnte die Korrektur damit erfolglos gewesen sein.
Angenommen, im Workshopformular wurden vier Plätze angefragt und nur zwei sind verfügbar. Wird die Anzahl auf zwei geändert, sollte die zutreffende Regel neu geprüft werden. Ein anderer Termin ist ein anderer Fall: Er ändert den Bestand, von dem die Regel abhängt. Eine Warnung zur vorherigen Veranstaltung darf nicht einfach an der neuen hängen bleiben. Dieser Zusammenhang ist wichtiger als das Erscheinungsbild des roten Rahmens.
Bei der Übergabe würde ich drei weitere Zustände verlangen: Prüfung läuft, für diesen Schritt akzeptiert und Prüfung nicht möglich. „Verfügbarkeit wird geprüft …“ ist nicht dasselbe wie „Zwei Plätze verfügbar“, und beides ist keine Buchungsbestätigung. Diese Unterschiede halten die Oberfläche ehrlich, wenn eine Anfrage länger dauert oder zwischen zwei Prüfungen die letzten Plätze vergeben werden.
Es gibt auch einen weniger sichtbaren Randfall. Eine Person ändert den Termin zweimal, und die erste Verfügbarkeitsanfrage wird nach der zweiten fertig. Überschreibt die ältere Antwort die neuere, zeigt die Oberfläche eine perfekt lesbare Antwort auf die falsche Frage. Die Gestaltungsnotizen sollten verlangen, dass Ergebnisse zur aktuellen Auswahl gehören. Wie das technisch sichergestellt wird, entscheidet die Entwicklung.
Behalte diese Zustandsunterschiede auch beim Prüfen von Animationen und Ladeanzeigen im Blick. Das Ziel ist nicht, den Übergang geschäftig aussehen zu lassen. Es ist zu verhindern, dass ein altes Ergebnis für ein neues gehalten wird. Kann das System gerade nicht prüfen, ist eine neutrale Erklärung genauer, als die Antwort der Person als ungültig zu markieren.
Ein Dienstausfall ist keine falsch beantwortete Frage
Der teuerste Formulierungsfehler in einem Buchungsablauf könnte sein, jemanden zur Korrektur einer Antwort aufzufordern, die nie falsch war. Eine fehlgeschlagene Anfrage kann bedeuten, dass die Eingabe abgelehnt wurde, der Server nicht erreichbar war oder das Ergebnis unbekannt ist. Diese Fälle brauchen unterschiedliche nächste Schritte.
Nehmen wir eine Zeitüberschreitung nach dem Klick auf Buchen. Vielleicht hat die Anfrage den Dienst nicht erreicht. Vielleicht wurde sie aber ausgeführt und nur die Antwort ging verloren. Ohne zu wissen, was passiert ist, wäre „Deine Buchung ist fehlgeschlagen“ zu sicher. Eine sofortige zweite Übermittlung könnte harmlos sein oder eine Doppelbuchung erzeugen. Das Produkt braucht eine ausdrückliche Entscheidung zum Umgang mit dieser Unsicherheit.
Für unser Beispiel würde ich den Ausweg mit einer Entwicklerin oder einem Entwickler prüfen, bevor ich den Text poliere. Kann der Dienst das Ergebnis über eine Anfragereferenz abrufen? Liefert eine wiederholte Anfrage sicher das ursprüngliche Ergebnis zurück? Kann der Support den Versuch finden? Welche Antworten bleiben auf der Seite? Diese Fragen bestimmen, ob als Nächstes der Status geprüft, sicher erneut gesendet oder der Support mit einer Referenz kontaktiert werden sollte.
Das ist kein Grund, technische Interna in die Fehlermeldung zu schreiben. Die lesende Person braucht keinen Vortrag über Netzwerkfehler. Sie braucht eine ehrliche Aussage darüber, was bekannt ist, und einen funktionierenden nächsten Schritt. Eine Anfragereferenz kann hilfreich sein, wenn der Support sie nutzen kann. Ein unerklärter Fehlercode ist nur ein weiteres Problem zum Entschlüsseln.
Gute Formularvalidierung umfasst auch den Weg zur Behebung
In OpenDesign kann eine unterstützte HTML-Vorschau einem Team helfen, normales Feld, Fehlerzustand und korrigierten Zustand zu vergleichen. Nutze realistische Werte und eine lange Meldung, prüfe einen schmalen Viewport und kommentiere das konkrete Element, das geändert werden muss. Teste anschließend dieselbe Abfolge mit dem tatsächlichen Backend, der Tastaturbedienung und den Screenreader-Ausgaben.
Eine kleine Nutzungsprüfung kann mehr zeigen als eine weitere Runde mit Adjektiven. Gib jemandem eine konkrete Aufgabe, etwa vier Workshopplätze zu buchen, und lass die Person auf den Kapazitätskonflikt stoßen. Frage, was ihrer Meinung nach passiert ist und was sie als Nächstes tun würde. Erkläre die beabsichtigte Bedeutung nicht vorab. Das würde genau die Mehrdeutigkeit entfernen, die du entdecken möchtest.
Beobachte nach der Korrektur die Handlungen ebenso genau wie die Aussagen zur Meldung. Wer die Warnung wiederholt liest, sieht sie vielleicht noch immer. Wer nach einer Zeitüberschreitung eine gültige E-Mail-Adresse ändert, erlebt möglicherweise eine Oberfläche, die die Schuld an der falschen Stelle zuweist. Wer ganz von vorn beginnt, findet den Ausweg vielleicht schwerer als die ursprüngliche Aufgabe.
Bei einem laufenden Dienst können wiederholtes Absenden und Korrekturschleifen zeigen, wo sich eine Untersuchung lohnt. Sie erklären nicht automatisch die Ursache. Eine hohe Fehlerzahl kann auf verwirrende Anweisungen, eine zu strenge Regel, fehlenden Bestand oder einen Umsetzungsfehler hinweisen. Verbinde die Ereignisabfolge mit beobachtetem Verhalten und sammle nicht einfach persönliche Rohangaben, nur um das Formular zu untersuchen.
Vor der Freigabe des Beispiels würde ich diese kurze Abfolge durchgehen:
- Eine unvollständige Antwort eingeben und beobachten, wann die Rückmeldung erscheint.
- Mit zwei Fehlern absenden und beide Felder über die Übersicht erreichen.
- Eine Antwort korrigieren und prüfen, ob andere Werte erhalten bleiben.
- Eine abhängige Antwort wie den Workshoptermin ändern und das neue Ergebnis prüfen.
- Auf einen nicht verfügbaren Dienst stoßen und den angebotenen Ausweg nutzen.
Am Ende steht die Prüfung des erfolgreichen Ergebnisses. Zeigt die Bestätigung den korrigierten Termin und die richtige Anzahl? Erkennt die Person, ob eine Buchung existiert? Ein Formular hat sich nicht schon deshalb erholt, weil der rote Text verschwunden ist.
Gute Fehlermeldungen lassen weniger Interpretationsarbeit übrig. Die Branchenbeispiele sind hilfreich, weil sie zeigen, wo dieses Verständnis bricht: bevor eine Antwort fertig ist, nach ihrer Korrektur oder wenn die Oberfläche mehr Wissen behauptet, als sie besitzt. Übernimm die Überlegungen dahinter, teste sie für deine eigene Aufgabe und richte den Satz nach dem Verhalten aus, das du tatsächlich liefern kannst.