Ієрархія помилок і підсвічування пріоритетів

1) Навіщо потрібна ієрархія помилок

• пояснити, що пішло не так,
• показати, чому це важливо,
• підказати, що робити далі,
• розставити пріоритети, якщо помилок декілька.
• Ієрархія помилок знижує когнітивне навантаження, прискорює виправлення і підвищує конверсію кроків (реєстрація, платежі, KYC).

2) Модель рівнів критичності (Severity)

1. Info (інформування) - «Профіль неповний, можна заповнити пізніше». Не блокує.

2. Notice (увага) - «Ліміт майже вичерпаний». Рекомендуємо діяти.

3. Warning (попередження) - «Розбіжність формату, дані збережені частково». Може заважати.

4. Error (помилка) - «Невірний формат/обов'язкове поле порожнє». Блокує конкретну дію.

5. Critical (критична) - «Платіж відхилений/ризик безпеки». Блокує сценарій, вимагає негайного кроку.

• Один екран - один головний статус.
• При множинних помилках: показуємо критичну зверху і стабільно прокручуємо до першої помилки.

3) Принципи підсвічування пріоритетів

1. Візуальна ієрархія: колір/іконка/товщина/контраст зростають з критичністю.
2. Просторова близькість: помилка поруч з полем/зоною, до якої відноситься.
3. Фокус і прокрутка: авто-скролл до першої помилки + фокус в проблемне поле.
4. Один головний callout: загальний банер/алерт про критичну проблему + локальні підказки.
5. Послідовність токенів: кольори/іконки/шрифти для Info/Warning/Error незмінні у всьому продукті.
6. Час життя: локальні помилки - поки не виправлені; банери - до закриття/виправлення.
7. Не плутаємо стану: «порожньо» ≠ «помилка», «в очікуванні» ≠ «помилка».

4) Візуальна мова (UI-токени)

• Info - нейтральний синій/сірий,
• Notice - бурштиновий/жовтий,
• Warning - помаранчевий,
• Error - червоний,
• Critical - насичений червоний + контрастний фон.
• Іконки: info ⓘ, notice, error/, success.

• Inline-повідомлення під полем (мінімальна рамка).
• Row-callout на рядок/картку.
• Page-alert (банер) - для загальних/критичних.
• Мікроанімації: м'яка поява, без «смикання» макета.

5) Тексти помилок: Формула та приклади

Формула: Що не так + Як виправити + (Чому/обмеження).

"Неправильний формат дати. Введіть у форматі ДД. ММ. ГГГГ"

"Файл занадто великий (макс. 10 МБ). Завантажте файл меншого розміру"

"Недостатній рівень верифікації. Пройдіть KYC - це займе ~ 2 хвилини"

"Платіж відхилено банком. Спробуйте інший метод або зв'яжіться з банком"

Анти-патерни: «Помилка 400», «Щось пішло не так», гумор у стресових кроках.

6) Ієрархія в складних формах (реєстрація/КУС/платежі)

1. Inline-валідація на blur: ловимо локальні помилки відразу.
2. Глобальна перевірка на submit: показуємо банер «Виправте зазначені поля» і список/якоря.
3. Помилкова навігація: клавіатурою/табацією, «Перейти до помилки # 1/ #N».
4. Порядок виправлення: спочатку блокуючі (Error/Critical), потім Warning/Notice.
5. Збереження контексту: введені дані не втрачаються при помилці.

7) Специфіка сценаріїв

7. 1 Платежі/висновки

Critical: відхилення провайдером/банком, підозріла активність.
Error: поле карти/IBAN, ліміти за сумою/частотою.
Warning: повільна мережа/перевищення часу очікування.

Текст: "Платіж відхилено банком. Спробуйте інший метод або зв'яжіться з банком. Комісія не списана"

7. 2 КУС/безпека

Critical: документ підроблений/заблокована країна/мульти-аккаунт.
Error: нечитабельний документ/розбіжність дати.

Текст: "Фото документа розмито. Завантажте більш чітке зображення при хорошому освітленні"

7. 3 Пошук/фільтри

Це не помилка, а нульовий результат.

Текст: "Немає результатів по "{query}". Приберіть фільтр "Провайдер: X" або спробуйте "{alt}". [Скинути фільтри]"

8) Доступність (A11y) і технічні вимоги

Помилки оголошуються скрінрідеру: aria-live = «assertive» для критичних, «polite» для інших.
Помилкові поля: aria-invalid =» true», aria-describedby на повідомлення.
Фокус переноситься до першої помилки; порядок табуляції зберігає логіку.
Контраст по WCAG AA; іконка не замінює текст.
Текст повинен читатися вголос без втрати сенсу.

9) Локалізація та юридична точність

Уникати жаргону і культурних метафор.
Узгодити терміни (глосарій): «платіж відхилено», «ліміт перевищено», «верифікація».
Вказувати терміни та обмеження в локальному форматі: «до 15 хвилин», валюти/дати.

10) Метрики якості

Error rate по полю/кроку (частка користувачів, що зіткнулися з помилкою).
Time-to-Fix (середній час до виправлення першої помилки).
Drop-off після помилки (скільки йдуть, не виправивши).
Повторюваність помилок (recurrence) за користувачами/сесіями.
Звернення на підтримку за типом помилки.
Конверсія кроку до/після змін в ієрархії.

• Авто-скролл і фокус vs тільки колір/текст.
• Точне формулювання причини vs загальна.
• Порядок підсвічування (спочатку банер → inline) vs (тільки inline).
• Додавання посилання «Показати вимоги» поряд з помилкою.

11) Чек-лист перед релізом

• Кожна помилка має рівень (Info/Notice/Warning/Error/Critical).
• Колір/іконка/контейнер відповідають рівню.
• Є прокрутка до першої помилки і перенесення фокусу.
• Повідомлення пояснює що/як/чому.
• Терміни збігаються з глосарієм; локалізація перевірена.
• Доступність: aria-атрибути, контраст, читаність вголос.
• Дані не втрачаються при помилці.
• Статуси «нульовий результат» і «очікування» не оформлені як помилки.

12) Приклади «до/після»

Форма дати

До: «Помилка 400»

Після: "Неправильний формат дати. Використовуйте ДД. ММ. ГГГГ"

Платіж

До: «Оплата не пройшла»

Після: "Платіж відхилено банком. Спробуйте інший метод або зв'яжіться з банком. Комісія не списана"

KYC

До: «Документ не прийнятий»

Після: "Не вдалося розпізнати документ. Завантажте фото без відблисків, видно кути і текст"

Нульовий пошук (не помилка!)

До: "Помилка: нічого не знайдено"

Після: "Результатів по "live roulette" немає. Приберіть фільтр «High-limit» або спробуйте «roulette». [Скинути фільтри]"

13) Компоненти дизайн-системи

``

Пропси: `message`, `severity`, `ariaDescribedBy`, `compact`.
Рендер: текст + іконка, колір по'severity'.

``

Пропси: `title`, `description`, `severity`, `actions[]`.
Варіанти: `info | notice | warning | error | critical`.

``

Список помилок з якорями до полів, клавіатурна навігація, «Перейти до # 1».

'< Validator/>'( логіка)

Правила на полі/форму/крок, пріоритети, схеми (наприклад, JSON-Schema), локалізація повідомлень.

14) Швидкі шаблони фраз

15) Вбудовування в процес

Проектуйте тексти одночасно з логікою валідації.
Зберігайте рядки в i18n поруч з компонентами, версіонуйте.
У чек-листі PR: відповідність рівню, наявність aria-атрибутів, коректна локалізація.
Регулярно рев'ю помилок по метриках і зворотного зв'язку підтримки.

Підсумкова шпаргалка

Оцифруйте рівні: Info → Critical.
Покажіть пріоритет візуально і в фокусі.
Поясніть виправлення коротко і конкретно.
Не називайте порожнечу помилкою.
Міряйте і покращуйте: error rate, Time-to-Fix, drop-off.