Stösst jemand in deinem Formular auf einen Fehler, ist er einen Moment davon entfernt, zu gehen. Studien zeigen, dass über 75 % der Nutzer Formulare abbrechen, wenn Fehler auftauchen und sie diese nicht sofort beheben können. Das ist kein kleines Problem. Das sind drei von vier potenziellen Kunden, Leads oder Anmeldungen, die weggehen. Der Unterschied zwischen Halten und Verlieren liegt oft an einer einzigen Sache: der Fehlermeldung. Eine verwirrende Fehlermeldung schickt sie weg. Eine klare, hilfreiche Fehlermeldung holt sie zurück und bringt sie dazu, das Formular abzuschliessen.
Eine Fehlermeldung ist die Chance deines Formulars, jemanden bei einem Fehler zum Abschluss zu führen. Eine schlechte Fehlermeldung (vage, schuldzuweisend oder nutzlos) verwirrt den Nutzer oder gibt ihm das Gefühl, schuld zu sein. Eine gute Fehlermeldung sagt in einfacher Sprache genau, was schiefgelaufen ist, warum es wichtig ist und wie es sich beheben lässt. Dieser Artikel zeigt, wie du Fehlermeldungen schreibst, die funktionieren, wo du sie platzierst, damit sie nicht zu übersehen sind, welcher Ton Vertrauen schafft und warum Genauigkeit den Unterschied zwischen Abbruch und Abschluss macht.
Was eine Fehlermeldung wirksam macht
Eine wirksame Fehlermeldung leistet drei Dinge. Erstens sagt sie klar, was schiefgelaufen ist. Nicht "Ungültige Eingabe." Sondern "E-Mail-Adressen brauchen ein @-Zeichen." Zweitens erklärt sie, warum die Eingabe abgelehnt wurde, wenn das hilft. "Passwörter müssen mindestens 8 Zeichen lang sein, weil kürzere leichter zu knacken sind." Drittens sagt sie dem Nutzer genau, was er als Nächstes tun soll. "Geh zurück zum Passwortfeld und füge mindestens 4 weitere Zeichen hinzu." Der Nutzer kennt jetzt das Problem, versteht, warum es wichtig ist, und weiss, wie er es behebt.
Der Ton einer Fehlermeldung ist wichtiger, als die meisten denken. Eine Fehlermeldung, die verärgert oder herablassend klingt, gibt dem Nutzer das Gefühl, beschuldigt zu werden. "Du hast das @-Zeichen vergessen" wirkt wie seine Schuld. "E-Mail-Adressen brauchen ein @-Zeichen" ist dieselbe Information, aber ohne Schuldzuweisung. Ein hilfreicher Ton erkennt den Fehler an, ohne dass sich die Person schlecht fühlt.
Zeitpunkt und Platzierung einer Fehlermeldung entscheiden, ob der Nutzer sie überhaupt sieht. Eine Fehlermeldung, die drei Bildschirme unter dem Feld erscheint, das sie verursacht hat, ist leicht zu übersehen. Eine Fehlermeldung, die neben dem problematischen Feld erscheint, in dem Moment, in dem der Nutzer weitergehen will, zwingt ihn, sie zu bemerken und sofort zu beheben.
Validierung während der Eingabe und Validierung beim Absenden
Die Validierung während der Eingabe zeigt eine Fehlermeldung in dem Moment, in dem jemand ein Feld falsch ausfüllt, noch bevor er das Formular abschickt. Ein Passwortfeld zeigt einen Fehler, sobald er ein zu kurzes Passwort eintippt. Ein E-Mail-Feld zeigt einen Fehler, sobald er das Feld ohne @-Zeichen verlässt. Rückmeldung in Echtzeit ist stark, weil Menschen Fehler sofort beheben, statt sie erst nach dem Ausfüllen des ganzen Formulars zu entdecken.
Die Validierung während der Eingabe kann eines besonders gut. Sie schafft Sicherheit. Tippt jemand eine E-Mail-Adresse ein und sieht einen grünen Haken erscheinen, weiss er, dass es stimmt. Er geht ohne Zweifel weiter. Ohne diese Bestätigung fragt er sich, ob seine Eingabe richtig war, und zweifelt an sich.
Die Validierung beim Absenden passiert, wenn jemand auf Absenden klickt und das Formular alle Felder auf einmal prüft. Hat ein Feld einen Fehler, erscheint oben im Formular eine Zusammenfassung mit allen Problemen, und jedes Feld mit einem Fehler wird hervorgehoben. Die Validierung beim Absenden fängt Fehler auf, die die Validierung während der Eingabe verpasst hat, und gibt Nutzern ein vollständiges Bild davon, was zu beheben ist.
Der beste Ansatz ist beides. Nutze die Validierung während der Eingabe für Felder, die sich sofort prüfen lassen (E-Mail-Format, Passwortlänge, Format der Postleitzahl). Nutze die Validierung beim Absenden als letztes Sicherheitsnetz. Klickt jemand auf Absenden und ein Feld hat noch einen Fehler, zeige ihm sofort, was zu beheben ist, bevor er absenden kann.
Fehlermeldungen konkret und umsetzbar schreiben
Eine konkrete Fehlermeldung sagt dem Nutzer genau, was das Problem ist. Eine allgemeine Fehlermeldung lässt ihn rätseln. Vergleiche diese beiden:
Allgemein: "Ungültige Telefonnummer."
Konkret: "Telefonnummern brauchen 10 Ziffern. Du hast 9 eingegeben. Füge eine weitere Ziffer hinzu."
Die allgemeine Meldung sagt dem Nutzer, was falsch ist, aber nicht warum oder wie er es behebt. Die konkrete Meldung nennt das Problem, warum es aufgetreten ist und genau, was zu tun ist. Die konkrete Meldung braucht etwas länger zum Lesen, erspart dem Nutzer aber Minuten an Frust.
Eine umsetzbare Fehlermeldung enthält Anweisungen. "Passwörter müssen mindestens eine Zahl enthalten" sagt, was fehlt. "Passwörter müssen mindestens eine Zahl enthalten. Geh zurück zum Passwortfeld und füge eine Zahl hinzu." sagt, was zu tun ist. Bei Formularen ist die Anweisung meist offensichtlich (zurück zum Feld gehen), aber sie auszuschreiben hilft Menschen, die mit Formularen wenig vertraut sind oder assistive Technik nutzen.
Nutze einfache Sprache. Nicht "Format der Postleitzahl falsch." Sondern "Postleitzahlen bestehen aus 5 Ziffern. Du hast Buchstaben eingegeben." Nicht "Ungültiges E-Mail-Format." Sondern "E-Mail-Adressen brauchen ein @-Zeichen und eine Domain (Beispiel: name@firma.de)."
Platzierung, die Fehler unübersehbar macht
Eine Fehlermeldung, die weit von dem Feld entfernt steht, das sie verursacht hat, ist leicht zu übersehen. Füllt jemand ein Formular mit vielen Feldern aus, konzentriert er sich auf ein Feld nach dem anderen. Eine Fehlermeldung, die unten im Formular erscheint, während er noch oben beschäftigt ist, bleibt unbemerkt.
Die beste Platzierung für eine Fehlermeldung ist direkt unter oder neben dem Feld mit dem Fehler. Wechselt er zum nächsten Feld oder versucht abzusenden, erscheint sofort eine Fehlermeldung unter dem Feld, das er gerade ausgefüllt hat. Er kann sie nicht übersehen, weil sie dort erscheint, wo er die nächste Aktion erwartet.
Eine Zusammenfassung der Validierung (die nach dem Absenden alle Fehler auf einmal auflistet) gehört an den Anfang des Formulars. So hat der Nutzer einen vollständigen Überblick über alle Probleme. Scrollt er dann nach unten, erscheinen die einzelnen Feldfehler erneut neben jedem Feld, das er beheben muss. Dieser doppelte Ansatz hat zwei Zwecke: Er zeigt den ganzen Umfang dessen, was zu beheben ist, und erinnert ihn, während er jedes Feld durchgeht.
Nutze in Formularen nie Toast-Fehlermeldungen. Ein Toast ist eine Benachrichtigung, die kurz in der Ecke des Bildschirms erscheint und dann verschwindet. Bei Formularen ist das die schlechteste Platzierung. Der Fehler erscheint weit von dem Feld entfernt, das ihn verursacht hat. Er verschwindet, bevor der Nutzer Zeit zum Lesen hat. Er trennt das Problem von dem Ort, an dem es zu beheben ist. Muss eine Fehlermeldung verschwinden, dann erst, nachdem der Nutzer das Feld erfolgreich korrigiert hat.
Visuelles Design von Fehlermeldungen
Farbe allein reicht nicht, um einen Fehler zu vermitteln. Jemand mit Farbenblindheit sieht die rote Farbe, die einen Fehler anzeigt, vielleicht nicht. Ein sehr kleines Fehlersymbol übersieht jemand mit eingeschränktem Sehvermögen vielleicht. Verlass dich auf mehrere Signale: Farbe plus Text plus Symbol.
Ein roter Rahmen um das Feld. Ein rotes oder orangefarbenes Symbol neben der Fehlermeldung. Text, der das Problem klar benennt. Alle drei zusammen ergeben einen Fehlerzustand, den fast jeder erkennt.
Die Schriftgrösse zählt. Der Text der Fehlermeldung sollte so gross sein wie das Feld-Label. Ist die Fehlermeldung kleiner, übersehen Menschen sie vielleicht oder halten sie für weniger wichtig, als sie ist. Die Fehlermeldung verdient dasselbe visuelle Gewicht wie das Label.
Auch das Label des problematischen Feldes kann sich ändern. Der Label-Text kann rot oder fett werden. Das schafft ein weiteres optisches Signal, das dem Nutzer hilft, das Formular schnell zu überfliegen und das Feld zu finden, das Aufmerksamkeit braucht.
Ton und Höflichkeit in Fehlermeldungen
Fehlermeldungen sollten klingen, als würdest du jemandem helfen, nicht, als würdest du ihm Vorwürfe machen. Vermeide Wörter, die hart oder anklagend klingen.
Hart: "Du hast eine ungültige E-Mail-Adresse eingegeben."
Hilfreich: "E-Mail-Adressen brauchen ein @-Zeichen. Prüfe deine Eingabe und versuche es noch einmal."
Hart: "Das Passwort ist zu schwach."
Hilfreich: "Passwörter brauchen mindestens 8 Zeichen. Längere Passwörter sind sicherer."
Hart: "Du hast vergessen, dieses Feld auszufüllen."
Hilfreich: "Dieses Feld ist ein Pflichtfeld. Sag uns, was du denkst."
Ein hilfreicher Ton erkennt den Fehler an, ohne dass sich die Person schlecht fühlt. Er erklärt, warum es die Regel gibt (wenn es hilft). Er geht weiter, ohne beim Fehler zu verweilen.
Häufige Fehler bei Fehlermeldungen
Der häufigste Fehler ist, zu vage zu sein. "Ungültige Eingabe" sagt dem Nutzer nichts. "Etwas ist schiefgelaufen" ist genauso nutzlos. Sei konkret, was das Problem ist.
Ein zweiter Fehler ist technische Sprache. "Regex mismatch" oder "Validation failed" bedeuten Entwicklern vielleicht etwas, normale Menschen haben aber keine Ahnung, was diese Begriffe heissen. Übersetze technische Fehler in einfache Sprache.
Ein dritter Fehler ist, zu viele Fehler auf einmal zu zeigen. Hat ein Formular 20 Felder und alle 20 zeigen Fehler, fühlt sich der Nutzer überwältigt. Priorisiere, welche Fehler kritisch sind (etwa ein leeres Pflichtfeld) und zeige diese zuerst. Nachrangige Fehler (etwa ein Feld mit Formatproblem, das aber optional ist) können danach gezeigt werden.
Ein vierter Fehler sind Fehlermeldungen, die das Label wiederholen, ohne neue Informationen zu liefern. Das Label sagt "E-Mail-Adresse". Die Fehlermeldung sagt "E-Mail-Adresse ist ungültig." Der Nutzer weiss schon, welches Feld das Problem hat (er sieht den roten Rahmen), aber er weiss immer noch nicht, warum es ungültig ist. Die Fehlermeldung sollte Informationen hinzufügen, nicht das Label wiederholen.
Ein fünfter Fehler ist, keinen Weg zur Lösung des Problems zu nennen. "Das Passwort erfüllt die Anforderungen nicht" sagt dem Nutzer, dass etwas nicht stimmt, aber nicht, was die Anforderungen sind. "Das Passwort erfüllt die Anforderungen nicht. Passwörter brauchen mindestens 8 Zeichen und eine Zahl" sagt ihm, was zu beheben ist.
Wie WEMASY dir hilft, klare Fehlermeldungen zu erstellen
Der Formular-Builder von WEMASY enthält vordefinierte Fehlermeldungen für gängige Feldtypen. E-Mail-Felder zeigen "E-Mail-Adressen brauchen ein @-Zeichen", wenn das Format falsch ist. Telefonfelder zeigen "Telefonnummern brauchen 10 Ziffern", wenn die Länge nicht stimmt. Passwortfelder zeigen die Anforderungen an die Passwortstärke an, während der Nutzer tippt. Diese Meldungen sind von Haus aus klar, konkret und hilfreich.
Du kannst Fehlermeldungen an den Ton deiner Marke anpassen. Ändere die Meldung von "E-Mail-Adressen brauchen ein @-Zeichen" zu "Hoppla, das sieht nicht nach einer E-Mail aus. Noch einmal versuchen?" Der Ton ändert sich, die Genauigkeit bleibt. Du bestimmst, wie die Meldung klingt, ohne Klarheit zu opfern.
Für eigene Validierungen (Felder mit besonderen Regeln, die nur zu deinem Formular gehören) kannst du eigene Fehlermeldungen direkt im Formular-Builder schreiben. Das System hilft dir, die Meldung neben dem Feld zu platzieren, sie zum richtigen Zeitpunkt zu zeigen (während der Eingabe oder beim Absenden) und sie passend zu deinem Formular-Design zu gestalten.
Die Validierung in Echtzeit ist eingebaut, sodass Fehlermeldungen erscheinen können, während Nutzer tippen, nicht erst nach dem Absenden. So werden Fehler früh erkannt, und Nutzern bleibt der Frust erspart, ein ganzes Formular auszufüllen und die Probleme erst am Ende zu entdecken.
Sieh dir an, welche Formularfunktionen in deinem WEMASY-Tarif enthalten sind.