Hierarchia błędów i podkreślanie priorytetów

1) Dlaczego potrzebujesz hierarchii błędów

• wyjaśnij, co poszło nie tak
• pokazać, dlaczego to ma znaczenie,
• sugeruje, co zrobić dalej,
• ustawić priorytet, jeśli istnieje kilka błędów.
• Hierarchia błędów zmniejsza obciążenie poznawcze, przyspiesza korekcję i zwiększa konwersję kroków (rejestracja, płatności, KYC).

2) Model dotkliwości

1. Informacje - "Profil jest niekompletny, może być uzupełniony później. "Nie blokuje.

2. Uwaga - "Limit jest prawie wyczerpany. "Zalecamy działanie.

3. Ostrzeżenie - "Niedopasowanie formatu, dane częściowo zapisane. "Może przeszkadzać.

4. Błąd - "Nieprawidłowy format/wymagane pole jest puste. "Blokuje konkretne działanie.

5. Krytyczny - "Odmowa płatności/Ryzyko bezpieczeństwa. "Blokuje scenariusz, wymaga natychmiastowego kroku.

• Jeden ekran - jeden główny stan.
• Dla wielu błędów: pokaż krytyczne z góry i przewiń stabilnie do pierwszego błędu.

3) Zasady podkreślania priorytetów

1. Hierarchia wizualna: kolor/ikona/grubość/wzrost kontrastu z krytycznością.
2. Bliskość przestrzenna: błąd w pobliżu pola/strefy, do której należy.
3. Ostrość i przewijanie: automatyczne przewijanie do pierwszego błędu + skupienie na polu problemowym.
4. Jedno główne wywołanie: ogólny baner/alert o krytycznym problemie + lokalne zapytania.
5. Sekwencja tokenów: kolory/ikony/czcionki dla Info/Ostrzeżenie/Błąd są niezmienione w całym produkcie.
6. Czas życia: błędy lokalne - jeszcze nie naprawione; banery - przed zamknięciem/mocowaniem.
7. Nie mylić stwierdzeń: "pusty" "błąd", "czekanie", "" błąd ".

4) Język wizualny (żetony UI)

• Info - neutralny niebieski/szary,
• Uwaga - bursztyn/żółty,
• Ostrzeżenie - pomarańczowy,
• Błąd - czerwony,
• Krytyczny - bogaty czerwony + kontrastujące tło.
• Ikony: ⓘ informacji, powiadomienie, błąd/, sukces.

• Wiadomość inline poniżej pola (minimalna ramka).
• Wybór wiersza na linię/kartę.
• Page-alert (banner) - dla ogólnych/krytycznych.
• Mikroanimacje: miękki wygląd, bez „walenia” układu.

5) Teksty błędów: wzór i przykłady

Formuła: Co jest nie tak + Jak naprawić + (Dlaczego/ograniczenie).

"Nieprawidłowy format daty. Wprowadź w formacie DD. MM. RRRR"

"Plik jest zbyt duży (maks. 10 MB). Proszę pobrać mniejszy plik"

"Niewystarczający poziom weryfikacji. Weź KYC - zajmuje ~ 2 minuty"

"Zapłata została odrzucona przez bank. Spróbuj innej metody lub skontaktuj się z bankiem"

Anty-wzory: „Błąd 400”, „Coś poszło nie tak”, humor w stresujących krokach.

6) Hierarchia w złożonych formach (rejestracja/ACC/płatności)

1. Walidacja inline na rozmycie: od razu łapiemy błędy lokalne.
2. Globalny czek na przesłanie: pokaż baner „Poprawnie zaznaczone pola” oraz listę/kotwice.
3. Nawigacja błędów: klawiatura/zakładka, „Przejdź do błędu # 1/# N”.
4. Kolejność korekcji: najpierw blokowanie (błąd/krytyczny), a następnie ostrzeżenie/powiadomienie.
5. Zapisz kontekst - wejście nie jest utracone, gdy wystąpi błąd.

7) Specyfika scenariuszy

7. 1 Płatności/wypłaty

Krytyczny: odrzucenie przez dostawcę/bank, podejrzana działalność.
Błąd: pole karty/IBAN, limity ilości/częstotliwości.
Ostrzeżenie: powolna sieć/timeout.

Tekst: "Płatność odrzucona przez bank. Spróbuj innej metody lub skontaktuj się z bankiem. Opłata nie została naliczona"

7. 2 CCS/bezpieczeństwo

Krytyczny: dokument sfałszowany/zablokowany kraj/konto wielofunkcyjne.
Błąd: nieczytelny niedopasowanie dokumentu/daty.

Tekst: "Zdjęcie dokumentu jest niewyraźne. Prześlij ostrzejszy obraz w dobrym świetle"

7. 3 Wyszukiwanie/filtry

To nie jest błąd, ale wynik zerowy.

Tekst: "Brak wyników dla "{query}" Usuń filtr „Dostawca: X” lub spróbuj „{alt}”. [Zresetuj filtry]"

8) Dostępność (A11y) i specyfikacje

Błędy zgłaszane są do ekranu: aria-live = „asertywny” dla krytycznych, „grzeczny” dla innych.
Pola z błędem: aria-invalid =” true”, aria-descripedby per message.
Focus przenosi się do pierwszego błędu; tabbing order zachowuje logikę.
Kontrast WCAG AA; ikona nie zastępuje tekstu.
Tekst powinien być odczytywany na głos bez utraty znaczenia.

9) Lokalizacja i dokładność prawna

Unikaj żargonu i metafor kulturowych.
Uzgodnić warunki (słownik): „płatność odrzucona”, „limit przekroczony”, „weryfikacja”.
Określ warunki i ograniczenia w formacie lokalnym: „do 15 minut”, waluty/daty.

10) Wskaźniki jakości

Błąd według pola/kroku.
Czas do naprawy.
Drop-off po błędzie (ile pozostawiają bez naprawy).
Powtarzanie przez użytkownika/sesję.
Obsługa wywołań przez typ błędu.
Stopniowa konwersja przed/po zmianach w hierarchii.

• Automatyczne przewijanie i ostrość vs tylko kolor/tekst.
• Dokładne brzmienie przyczyny vs general.
• Polecenie podświetlenia (baner → wline first) vs (tylko inline).
• Dodaje link Pokaż wymagania obok błędu.

11) Lista kontrolna przed zwolnieniem

• Każdy błąd ma poziom (Info/Notice/Warning/Error/Critical).
• Kolor/ikona/pojemnik odpowiada poziomowi.
• Jest przewijanie do pierwszego błędu i przesunięcie ostrości.
• Wiadomość wyjaśnia co/jak/dlaczego.
• Słownik dopasowania warunków; lokalizacja zweryfikowana.
• Dostępność: atrybuty arii, kontrast, czytelność na głos.
• Dane nie są tracone z powodu błędu.
• Statusy „wynik zerowy” i „oczekiwanie” nie są oznaczane jako błędy.

12) Przykłady przed/po

Formularz daty

Przed: „Błąd 400”

Po: "Nieprawidłowy format daty. Użyj DD. MM. RRRR"

Płatność

Przed: „Płatność nie powiodła się”

Po: "Płatność została odrzucona przez bank. Spróbuj innej metody lub skontaktuj się z bankiem. Opłata nie została naliczona"

KYC

Przed: „Dokument nie zaakceptowany”

Potem: "Dokumentu nie można było rozpoznać. Załaduj zdjęcie bez blasku, rogi i tekst są widoczne"

Zero search (nie błąd!)

Przed: „Błąd: nic nie znaleziono”

Po: „Nie ma wyników dla „żywej ruletki. „Usuń filtr „High-limit” lub spróbuj „ruletka. „[Zresetuj filtry]”

13) Elementy systemu projektowego

''

Мровса: 'message', 'severity', 'aria By', 'compact'.
Render: text + icon, color by 'severity'.

& lt; & gt; & gt; & gt; & gt; & gt; & gt; &

Мровса: „tytuł”, „opis”, „dotkliwość”, „działania []”.
Opcje: „informacja | powiadomienie | ostrzeżenie | błąd | krytyczny”.

''

Lista błędów z kotwicami do pól, nawigacja klawiatura, „Przejdź do # 1”.

'' (logika)

Zasady pola/formy/kroku, priorytety, schematy (na przykład JSON-Schema), lokalizacja wiadomości.

14) Szybkie wzory zwrotów

15) Osadzanie procesu

Projektuj teksty jednocześnie z logiką walidacji.
Przechowywać linie w i18n obok komponentów, werjonizować.
W liście kontrolnej PR: zgodność z poziomem, atrybuty arii, prawidłowa lokalizacja.
Regularnie sprawdzaj błędy mierników i wspieraj opinie.

Końcowy arkusz oszustwa

Cyfryzuj poziomy: Info → Krytyczne.
Pokaż priorytet wizualnie i w ostrości.
Wyjaśnić poprawkę krótko i szczegółowo.
Nie nazywaj pustki błędem.
Zmierzyć i poprawić: wskaźnik błędów, Czas-do-Fix, drop-off.