Примеры сообщений об ошибках: плохие, хорошие и отличные, переписанные
Восемь сообщений об ошибках, поднятых от сырого кода до текста, с которым люди могут что-то сделать. Каждая ступень объяснена, трёхстрочная формула отличных сообщений и чеклист для вашего следующего ревью.
Отличное сообщение об ошибке говорит людям три вещи: что случилось, почему это случилось и что делать дальше, причём с кнопкой, которая это делает. Большинство продуктов останавливаются на первом пункте, а многие так и не уходят дальше кода. Ниже восемь сообщений об ошибках, поднятых от плохого к отличному, причина каждой ступени и формула, которую можно применить к следующему сообщению.
Что меняется от плохого к отличному
Плохо
Отлично
Плохое сообщение написано для сервера. 403 это настоящий код статуса, и он точен, но человек, который его читает, не узнаёт ничего полезного. Отличное сообщение написано для человека: оно называет файл, объясняет, что он закрыт, говорит, кто может его открыть, и превращает следующий шаг в одно касание.
Каждая ступень добавляет одну вещь:
| Ступень | Что она даёт людям | Что всё ещё упущено |
|---|---|---|
| Плохо | Код или расплывчатое слово вроде «сбой» | Что случилось, почему, что делать |
| Хорошо | Что случилось, простыми словами | Почему и что делать дальше |
| Отлично | Что случилось, почему и следующий шаг на кнопке | Ничего, что нужно решать им самим |
1. Нет доступа
Плохо
Error 403.
Код статуса. Верно для разработчика, пусто для всех остальных.Хорошо
У вас нет доступа к этому файлу.
Говорит, что случилось, словами читателя. Но оставляет человека в тупике.Отлично
Этот файл закрыт. Попросите у Сэма доступ, и мы сообщим, когда он у вас появится.
Объясняет почему (файл закрыт), кто может помочь (Сэм) и что будет потом. Кнопка называется «Запросить доступ», так что просьба занимает одно касание.
403 означает, что человек вошёл в систему, но у него нет прав. Для текста это важное различие: ему не нужно входить снова, ему нужно, чтобы кто-то поделился файлом.
2. Отклонённая карта
Плохо
Транзакция не удалась.
«Не удалась» без подлежащего. Карта, магазин, соединение?Хорошо
Ваша карта отклонена.
Называет причину, с которой люди могут что-то сделать.Отлично
Ваша карта отклонена. Банк отказал. Попробуйте другую карту или попросите банк одобрить платёж.
Относит проблему к банку, а не к человеку, и даёт два выхода. Кнопка: «Другая карта», более быстрый вариант.
Ошибки оплаты несут больше всего денег и больше всего неловкости. Никого не вините и держите выход на том же экране.
3. Слишком большой файл
Плохо
Ошибка загрузки.
Это может быть что угодно, поэтому люди повторяют с тем же файлом и упираются в ту же стену.Хорошо
Этот файл слишком большой.
Причина названа, но не сказано, насколько он больше.Отлично
Это видео весит 2,4 ГБ. Лимит: 2 ГБ. Немного обрежьте его и попробуйте снова.
Оба числа, так что видно: разница небольшая. Кнопка «Обрезать видео» решает вопрос, не выходя из приложения.
Если есть лимит, назовите лимит. Нельзя исправить число, о котором тебе не сказали.
4. Пропал интернет
Плохо
Ошибка сети.
Звучит так, будто что-то сломалось, а может, и работа потеряна.Хорошо
Вы не в сети.
Просто, но первая мысль у любого: «я потерял изменения?»Отлично
Вы не в сети. Изменения сохранены на этом телефоне и синхронизируются, когда вы вернётесь.
Отвечает на тревогу раньше, чем её озвучили. Кнопка: «Повторить».
5. Выход из аккаунта
Плохо
Error 401: Unauthorized.
«Unauthorized» читается как обвинение, и это снова код.Хорошо
Ваша сессия истекла.
Верно, но «сессия» слово разработчика.Отлично
Вы вышли из аккаунта. Прошло 30 дней. Войдите снова, и мы вернём вас сюда.
Объясняет причину и обещает, что человек не потеряет своё место. Кнопка: «Войти».
401 это обратный случай по отношению к 403: человек не вошёл или его вход истёк. Решение в том, чтобы отправить его на экран входа, а обещание вернуть туда, где он был, убирает повод колебаться.
Ещё три, написанные с нуля
Те же правила работают для ситуаций, которых нет в пяти выше. Эти три примера наши собственные.
Плохо
Error 500. Что-то пошло не так.
Код ничего не добавляет, а «что-то» признаётся, что мы сами не знаем.Хорошо
Не удалось сохранить изменения.
Берёт проблему на себя и называет, что именно не получилось.Отлично
Не удалось сохранить изменения. Это наша вина, не ваша. Ваш текст на месте, так что попробуйте через минуту.
Говорит, чья это вина и что ничего не потеряно. Кнопка: «Сохранить снова».
Плохо
Too many requests.
Машинный язык для человека, который, скорее всего, уже раздражён.Хорошо
Слишком много попыток. Повторите позже.
Понятно, но «позже» может быть и через минуту, и через сутки.Отлично
Слишком много попыток. Для вашей безопасности вход приостановлен на 15 минут. Можно сразу сбросить пароль.
Даёт время ожидания, причину и более быстрый путь. Кнопка: «Сбросить пароль».
Плохо
Недействительная ссылка.
Намекает, что человек что-то ввёл неправильно.Хорошо
Срок приглашения истёк.
Настоящая причина, без обвинений.Отлично
Срок приглашения истёк. Приглашения действуют 7 дней. Попросите Майю прислать новое.
Объясняет, почему ссылки истекают и кто может это исправить. Кнопка: «Попросить новое приглашение».
Формула: что случилось, почему, что делать дальше
Каждое отличное сообщение выше укладывается в одни и те же три строки:
[What happened, in the reader's words.]
[Why, in one short sentence.]
[What to do next.] [Button: the next step as a verb]
| Сообщение | Что случилось | Почему | Что делать дальше |
|---|---|---|---|
| Нет доступа | Этот файл закрыт | Открыть его могут только приглашённые | Запросить доступ |
| Отклонённая карта | Ваша карта отклонена | Банк отказал | Другая карта |
| Слишком большой файл | Это видео весит 2,4 ГБ | Лимит: 2 ГБ | Обрезать видео |
| Нет сети | Вы не в сети | Изменения сохранены на этом телефоне | Повторить |
| Выход из аккаунта | Вы вышли из аккаунта | Прошло 30 дней | Войти |
Строку «почему» команды вырезают первой, а именно она останавливает следующее обращение в поддержку.
Чеклист для вашего следующего ревью
- Никаких сырых кодов. Оставьте 403, 401 и 500 в логах, а не в сообщении.
- Никаких обвинений. «Банк отказал», а не «Вы ввели неверную карту».
- Называйте числа. Лимит размера, время ожидания, количество дней.
- Одна кнопка, названная глаголом. «Обрезать видео», а не «ОК».
- Говорите, что сохранилось. Если ничего не потеряно, так и скажите.
- Не подтверждайте существование аккаунтов при входе. «Неверный пароль» сообщает незнакомцу, что аккаунт существует. Лучше скажите: «Эта почта и пароль не совпадают».
- Затем проверьте цвет. Ошибку несут слова, а цвет и иконка их поддерживают. В нашей статье про цвет сообщений об ошибках есть красные оттенки для светлой и тёмной темы.
Статья
Цвет сообщений об ошибках: 8 красных вместо #FF0000
Парная статья к этой: здесь слова, там цвета, иконки и код.
FAQ
Как написать хорошее сообщение об ошибке?
Скажите простыми словами, что случилось, одним коротким предложением объясните почему и что делать дальше. Вынесите следующий шаг на кнопку, названную глаголом, например «Повторить» или «Другая карта».
Какие бывают примеры плохих сообщений об ошибках?
Сырые коды и расплывчатые слова: «Error 403», «Error 401: Unauthorized», «Транзакция не удалась», «Ошибка загрузки» и «Ошибка сети». Каждое из них точно, и ни одно не говорит людям, что делать.
Нужно ли показывать коды ошибок в сообщениях?
Не как само сообщение. Код полезен поддержке и разработчикам, так что храните его в логах или мелким шрифтом под настоящим сообщением, если этого просит ваша поддержка.
В чём разница между сообщениями об ошибках 401 и 403?
401 означает, что человек не вошёл или его вход истёк, поэтому сообщение должно отправить его на вход. 403 означает, что он вошёл, но у него нет прав, поэтому сообщение должно сказать, кто может дать ему доступ.
Почему в ошибке входа не стоит писать «неверный пароль»?
Потому что это подтверждает, что аккаунт существует, а это помогает тому, кто подбирает аккаунты. Рекомендации по безопасности советуют одно общее сообщение и для неверной почты, и для неверного пароля.
Источники
- Коды статуса HTTP: 403 Forbidden и 401 Unauthorized на MDN.
- Error-message guidelines, Nielsen Norman Group.
- Writing, Apple Human Interface Guidelines.
- Authentication and error messages, OWASP Cheat Sheet Series.
- Впервые опубликовано как карусель в UX Brainy.
Want every error, empty and loading state written and designed as one system? Our team designs product UI with the words in it from the first draft.
Get Started
