Fehlerhierarchie und Hervorhebung von Prioritäten

1) Warum wir eine Fehlerhierarchie brauchen

• zu erklären, was schief gelaufen ist,
• zeigen, warum es wichtig ist,
• zu sagen, was als nächstes zu tun ist,
• Prioritäten setzen, wenn es mehrere Fehler gibt.
• Die Fehlerhierarchie reduziert die kognitive Belastung, beschleunigt die Korrektur und erhöht die Konversion der Schritte (Registrierung, Zahlungen, KYC).

2) Modell der Kritikalitätsstufen (Severity)

1. Info (Information) - „Profil unvollständig, kann später ausgefüllt werden“. Blockiert nicht.

2. Hinweis (Achtung) - „Das Limit ist fast ausgeschöpft“. Wir empfehlen zu handeln.

3. Warnung - „Formatfehler, Daten teilweise gespeichert“. Könnte störend sein.

4. Fehler - „Falsches Format/Pflichtfeld leer“. Blockiert eine bestimmte Aktion.

5. Kritisch - „Zahlung abgelehnt/Sicherheitsrisiko“. Blockiert das Skript und erfordert einen sofortigen Schritt.

• Ein Bildschirm - ein Hauptstatus.
• Bei Mehrfachfehlern: Wir zeigen das Kritische oben an und scrollen stetig zum ersten Fehler.

3) Grundsätze der Hervorhebung von Prioritäten

1. Visuelle Hierarchie: Farbe/Icon/Dicke/Kontrast nehmen mit der Kritikalität zu.
2. Räumliche Nähe: Fehler in der Nähe des Feldes/der Zone, auf die sich bezieht.
3. Fokus und Scrollen: Auto-Scrolling auf den ersten Fehler + Fokus auf das Problemfeld.
4. Ein Haupt-Callout: allgemeines Banner/Alert über ein kritisches Problem + lokale Hinweise.
5. Token-Sequenz: Die Farben/Icons/Schriftarten für Info/Warning/Error sind im gesamten Produkt unverändert.
6. Lebensdauer: lokale Fehler - noch nicht behoben; Banner - bis zum Schließen/Korrigieren.
7. Verwechseln Sie nicht die Zustände: „leer“ ≠ „Fehler“, „Warten“ ≠ „Fehler“.

4) Visuelle Sprache (UI-Token)

• Info - neutral blau/grau,
• Notice - amber/yellow,
• Warnung - orange,
• Fehler - rot,
• Kritisch - sattes Rot + Kontrasthintergrund.
• Icons: info ⓘ, notice, error/, success.

• Inline-Nachricht unter dem Feld (minimaler Rahmen).
• Row-callout pro Zeile/Karte.
• Seitenwarnung (Banner) - für allgemein/kritisch.
• Mikro-Animationen: sanftes Auftreten, kein „Zucken“ des Layouts.

5) Fehlertexte: Formeln und Beispiele

Formel: Was ist falsch + Wie zu beheben + (Warum/Einschränkung).

"Ungültiges Datumsformat. Geben Sie im DD-Format ein. MM. JJJJ"

"Die Datei ist zu groß (max. 10 MB). Laden Sie eine kleinere Datei hoch"

"Unzureichendes Verifizierungsniveau. Gehen Sie durch KYC - es dauert ~ 2 Minuten"

"Die Zahlung wurde von der Bank abgelehnt. Versuchen Sie es mit einer anderen Methode oder kontaktieren Sie die Bank"

Anti-Muster: „Fehler 400“, „Da ist was schiefgelaufen“, Humor in stressigen Schritten.

6) Hierarchie in komplexen Formen (Registrierung/CUS/Zahlungen)

1. Inline-Validierung auf blur: lokale Fehler sofort auffangen.
2. Globaler Check bei submit: Wir zeigen das Banner „Markierte Felder korrigieren“ und die Liste/Anker.
3. Fehlernavigation: Tastatur/Tabulator, „Gehe zu Fehler # 1/# N“.
4. Reparaturreihenfolge: Zuerst blockierend (Fehler/Kritisch), dann Warnung/Hinweis.
5. Kontext speichern: Die eingegebenen Daten gehen bei einem Fehler nicht verloren.

7) Besonderheiten der Szenarien

7. 1 Zahlungen/Schlussfolgerungen

Kritisch: Ablehnung durch Anbieter/Bank, verdächtige Aktivität.
Fehler: Kartenfeld/IBAN, Limits nach Betrag/Häufigkeit.
Warnung: langsames Netzwerk/zu lange Wartezeiten.

Text: "Zahlung von Bank abgelehnt. Versuchen Sie es mit einer anderen Methode oder kontaktieren Sie die Bank. Die Kommission wird nicht abgeschrieben"

7. 2 KUS/Sicherheit

Kritisch: Dokument gefälscht/Land gesperrt/Multi-Konto.
Fehler: Nicht lesbares Dokument/Datumsabweichung.

Text: "Das Foto des Dokuments ist verschwommen. Laden Sie bei gutem Licht ein schärferes Bild hoch"

7. 3 Suche/Filter

Das ist kein Fehler, sondern ein Nullergebnis.

Text: "Keine Ergebnisse für'{query}'. Entfernen Sie den Filter „Provider: X“ oder versuchen Sie es mit „{alt}“. [Filter zurücksetzen]"

8) Verfügbarkeit (A11y) und technische Anforderungen

Fehler werden dem Screenrider angekündigt: aria-live = „assertive“ für kritische, „polite“ für andere.
Fehlgeschlagene Felder: aria-invalid =“ true“, aria-describedby pro Nachricht.
Der Fokus wird auf den ersten Fehler übertragen; Die Tabulatorreihenfolge speichert die Logik.
Kontrast nach WCAG AA; Icon ersetzt keinen Text.
Der Text sollte ohne Bedeutungsverlust vorgelesen werden.

9) Lokalisierung und rechtliche Genauigkeit

Vermeiden Sie Jargon und kulturelle Metaphern.
Vereinbaren Sie die Begriffe (Glossar): „Zahlung abgelehnt“, „Limit überschritten“, „Verifizierung“.
Geben Sie Fristen und Einschränkungen im lokalen Format an: „bis zu 15 Minuten“, Währungen/Daten.

10) Qualitätsmetriken

Fehlerrate nach Feld/Schritt (Anteil der Benutzer, bei denen ein Fehler aufgetreten ist).
Time-to-Fix (durchschnittliche Zeit bis zur Korrektur des ersten Fehlers).
Drop-off nach einem Fehler (wie viele gehen weg, ohne zu beheben).
Fehlerwiederholbarkeit (Recurrence) nach Benutzern/Sitzungen.
Support-Anfragen nach Fehlerart.
Konversion eines Schritts vor/nach Änderungen in der Hierarchie.

• Auto-Scrolling und Fokus vs nur Farbe/Text.
• Die genaue Formulierung der Ursache vs ist allgemein.
• Die Reihenfolge der Hervorhebung (zuerst Banner → inline) vs (nur inline).
• Fügt den Link Anforderungen anzeigen neben dem Fehler hinzu.

11) Checkliste vor Veröffentlichung

• Jeder Fehler hat eine Ebene (Info/Hinweis/Warnung/Fehler/Kritisch).
• Farbe/Icon/Container entsprechen dem Level.
• Es wird zum ersten Fehler gescrollt und der Fokus verschoben.
• Die Nachricht erklärt was/wie/warum.
• Die Begriffe stimmen mit dem Glossar überein; Lokalisierung geprüft.
• Zugänglichkeit: aria-Attribute, Kontrast, Lesbarkeit.
• Daten gehen bei einem Fehler nicht verloren.
• Die Zustände „Ergebnis Null“ und „Erwartung“ sind nicht als Fehler angelegt.

12) Vorher/nachher Beispiele

Datumsform

Vorher: „Fehler 400“

Nach: "Ungültiges Datumsformat. Verwenden Sie DD. MM. JJJJ"

Zahlung

Vorher: „Die Bezahlung ist nicht durch“

Danach: "Die Zahlung wurde von der Bank abgelehnt. Versuchen Sie es mit einer anderen Methode oder kontaktieren Sie die Bank. Die Kommission wird nicht abgeschrieben"

KYC

Vorher: „Dokument nicht akzeptiert“

Danach: "Das Dokument konnte nicht erkannt werden. Laden Sie ein Foto ohne Blendung hoch, die Ecken und der Text sind sichtbar"

Null-Suche (kein Fehler!)

Vorher: „Fehler: nichts gefunden“

Danach: "Es gibt keine Ergebnisse zu "live roulette". Entfernen Sie den Filter „High-limit“ oder versuchen Sie es mit „roulette“. [Filter zurücksetzen]"

13) Komponenten des Konstruktionssystems

``

Пропсы: `message`, `severity`, `ariaDescribedBy`, `compact`.
Render: Text + Icon, Farbe durch 'severity'.

``

Пропсы: `title`, `description`, `severity`, `actions[]`.
Optionen: „info | notice | warning | error | critical“.

``

Fehlerliste mit Anker zu den Feldern, Tastaturnavigation, „Gehe zu # 1“.

''(Logik)

Regeln pro Feld/Formular/Schritt, Prioritäten, Schemata (z.B. JSON-Schema), Lokalisierung von Nachrichten.

14) Schnelle Phrasenmuster

15) Einbettung in den Prozess

Gestalten Sie Texte gleichzeitig mit der Validierungslogik.
Speichern Sie die Zeilen in i18n neben den Komponenten, versionieren Sie.
In der PR-Checkliste: Einhaltung der Ebene, Vorhandensein von Aria-Attributen, korrekte Lokalisierung.
Regelmäßige Überprüfung von Fehlern auf Metriken und Support-Feedback.

Abschließender Spickzettel

Digitalisieren Sie Ebenen: Info → Critical.
Zeigen Sie die Priorität visuell und im Fokus.
Erklären Sie die Korrektur kurz und konkret.
Nenne die Leere nicht einen Fehler.
Messen und verbessern: Fehlerrate, Time-to-Fix, Drop-Off.