Как писать понятные сообщения об ошибках
Практика4 минРедакция Innovialabs
Коротко
Хорошее сообщение об ошибке говорит простым языком, что случилось, почему и что сделать, чтобы это исправить, — без обвинений, кодов и технических терминов, и появляется там, куда пользователь уже смотрит.
Формула хорошей ошибки
Сообщение об ошибке отвечает на три вопроса:
- Что случилось — конкретно, без общих слов.
- Почему — если причина помогает понять ситуацию.
- Как исправить — следующий шаг, который пользователь может сделать прямо сейчас.
Пример: «Не удалось сохранить файл: на диске закончилось место. Удалите ненужные файлы или выберите другую папку».
Второй пункт можно опустить, если причина очевидна или ничего не даёт пользователю. Третий опускать нельзя: ошибка без выхода — тупик.
Правила тона
- Не обвиняйте. «Вы ввели неверный пароль» → «Пароль не подходит». Ошибка — это ситуация, а не вина человека.
- Без техники. Коды, названия исключений и «Error 500» пользователю ничего не говорят. Код можно оставить мелким текстом для поддержки.
- Без драмы и шуток. «Упс!» и восклицательные знаки раздражают, когда у человека сорвалась оплата. Юмор уместен только в безобидных ситуациях, например на странице 404.
- Конкретно. Не «Что-то пошло не так», а что именно и что делать.
- Коротко. Одно-два предложения. Подробности — по ссылке, если они действительно нужны.
- Одинаково по всему продукту. Одни и те же ситуации описывайте одними и теми же словами.
- Не только цветом. Красный цвет дополняйте иконкой и текстом — его должны заметить и люди с нарушением цветовосприятия, и пользователи экранных дикторов.
Где показывать ошибку
| Ситуация | Где показать |
|---|---|
| Ошибка в поле формы | Под полем, сразу после того как пользователь его покинул |
| Несколько ошибок при отправке | Список вверху формы со ссылками на поля + сообщение у каждого поля |
| Сбой действия (не сохранилось, не отправилось) | Уведомление рядом с местом действия, с кнопкой «Повторить» |
| Нет связи | Ненавязчивая плашка, которая исчезает после восстановления |
| Страница не найдена или недоступна | Отдельный экран с путями дальше: поиск, главная, поддержка |
| Критичная ошибка, теряются данные | Модальное окно — только в этом случае |
Принцип: ошибка появляется там, куда пользователь уже смотрит, и не исчезает сама, пока он её не прочитал. Всплывающие уведомления, которые пропадают через пару секунд, подходят для подтверждений, но не для ошибок.
До и после
| Было | Стало |
|---|---|
| Неверный ввод | Введите номер телефона полностью, например +998 90 123 45 67 |
| Ошибка 500. Internal Server Error | Не получилось загрузить страницу. Обновите её через минуту — если не поможет, напишите в поддержку |
| Транзакция отклонена | Банк отклонил оплату. Проверьте данные карты или выберите другой способ оплаты |
| Поле обязательно | Укажите email — на него придёт подтверждение заказа |
| Упс! Что-то пошло не так :( | Не удалось отправить сообщение. Проверьте подключение к интернету и попробуйте ещё раз |
| Пароль не соответствует требованиям | Пароль должен быть не короче 8 символов и содержать хотя бы одну цифру |
| Файл не поддерживается | Загрузите изображение в формате JPG или PNG размером до 10 МБ |
Обратите внимание: в хорошем варианте почти всегда есть глагол действия — «введите», «проверьте», «загрузите».
Лучше предотвратить, чем сообщить
Самая хорошая ошибка — та, которая не случилась.
- Показывайте требования заранее: формат пароля, лимит размера файла — до ввода, а не после.
- Принимайте разные форматы: телефон с пробелами, дату через точку или дефис.
- Отключайте недоступные варианты с пояснением, а не позволяйте выбрать их и получить ошибку.
- Сохраняйте введённые данные, чтобы после ошибки не заполнять всё заново.
Чек-лист перед публикацией
- Понятно, что случилось, без знания внутреннего устройства системы?
- Есть конкретный следующий шаг?
- Нет обвинений, жаргона и лишних восклицаний?
- Сообщение рядом с проблемой и видно не только по цвету?
- Введённые данные сохраняются?