Страницы ошибок

Шаблоны дизайна страниц в Figma
HTML-шаблоны страниц

Это страницы, которые сообщают, что сервис не может отобразить контент.

Принципы

Задача команды продукта — сделать так, чтобы пользователь не сталкивался с ошибками в сервисе:

  • При изменении адресов в сервисе настройте переадресацию;
  • Ограничьте возможность попадания пользователя без прав: не показывайте ссылки на страницу, либо делайте их неактивными;
  • Обеспечьте бесперебойную работу сервиса.

Когда использовать

Только для 400-х и 500-x ошибок.

Это коды состояния HTTP, принятые Консорциумом Всемирной паутины (W3C) в 1992 году.
403 — доступ запрещен,
404 — запрашиваемый ресурс не найден,
500 — ошибка сервера, и другие...

Не используйте для ошибок, которые происходят внутри сервиса, и при этом остается доступ к сервису в целом. Например: ошибки очереди печати, или ошибка при загрузке файла неправильного формата.

Такие ошибки нужно показывать прямо в интерфейсе или в модальном окне.

Не используйте одну страницу для всех видов ошибок. Нужно подготовить внятный текст для решения конкретной проблемы.

Структура страницы

Страница должна отличаться от обычных страниц сервиса, быть короткой и информативной — так пользователь быстрее поймет, что пошло не так.

Страница состоит из блоков:

  • Логотип сервиса;
  • Заголовок страницы;
  • Текстовый блок с причиной ошибки и возможным решением;
  • Контакты техподдержки.

Для 404 ошибки можно добавить поиск по сайту, или предложить вариант наиболее близкий к тому, что ввел пользователь. Особенно это актуально для поисковых сервисов.

Связь с сервисом

На странице должны присутствовать лого сервиса и ссылка на главную, либо основные разделы.

Неправильно

Заголовок

Заголовок должен кратко объяснить что случилось.

Рядом с заголовком укажите код ошибки. Это поможет техподдержке быстрее понять, что случилось, если пользователь объясняет проблему словами — по телефону или в чате.

Причина ошибки

Если это необходимо, опишите ошибку чуть подробней, но не углубляйтесь в технические детали. Укажите причину, почему она могла возникнуть.

Неправильно

Запрос URL /sea9679879 не найден на этом сервере

Правильно

Возможно, вы ошиблись, набирая адрес, или страница удалена.

Это не обязательный блок, иногда достаточно заголовка.

Решение

Помогите пользователю найти выход из ситуации и продолжить работу, предложите возможные действия для устранения ошибки.

Например:

  • Вернуться на главную и повторить последнее действие;
  • Закрыть браузер и войти еще раз;
  • Перезагрузить страницу.

Если предпринятые действия не работают, предложите ему сообщить об ошибке в техподдержку.

При 404 ошибках нельзя делать автоматический редирект на главную. Пользователю будет проще исправить ошибку в адресной строке, если адрес был набран неправильно.

При 403 ошибках обязательно давайте ссылку на выход и повторную авторизацию, пользователю будет проще войти с другой учеткой, если он ошибся с реквизитами при входе.

Контакты техподдержки

У пользователя должен быть выбор, как обратиться в техподдержку — отправить сообщение на почту, в чат или заказать обратный звонок.

Команда сервиса сама решает, какие способы обратной связи предоставить. Если нет технической возможности добавить на страницы ошибок чат с техподдержкой или форму заказа обратного звонка — можно ограничиться ссылкой на электронную почту или телефоном техподдержки.

Чтобы техподдержка сразу поняла, что случилось, в обращение должна автоматически прикладываться информация об ошибке.

Если это массовая ошибка не по вине пользователя, и команда сервиса уже устраняет её, не указывайте контакты техподдержки.

Язык общения

Коротко и понятно объясните, что произошло и что делать. Избегайте технических терминов и сленга. Напишите, что произошло, с точки зрения пользователя, а не с точки зрения системы.

Пользуйтесь правилами редполитики.

Неправильно

Ошибка e-ecb00676. Произошла критическая ошибка.

Извинения

Извиняться нужно, если проблема произошла по нашей вине. Если проблема возникла не по нашей вине, извиняться нельзя.

При ошибке 500 мы подводим пользователя — он не смог воспользоваться сервисом, когда это было нужно. В этом случае извиниться в сообщении обязательно.

Правильно

Извините, сервис недоступен. Мы знаем о проблеме и уже занимаемся ей.

При ошибке 404, когда пользователь ввел неправильный адрес, или пришел по устаревшей ссылке, мы покажем ошибку без «извините». В таких случаях нужно просто сообщить о проблеме.

Графика

Ошибка мешает пользователю выполнить его задачу и прерывает сценарий. В такой момент даже, казалось бы, милая и веселая графика может вызвать у пользователя негативные эмоции.

Если вы используете в сервисе свои изображения - они должны быть без эмоциональной нагрузки. Постарайтесь избегать использования смайликов и изображений животных.

Не рекомендуется

Шаблоны страниц ошибок в Figma.
HTML-шаблоны страниц

Используйте их как основу для страниц ошибок вашего продукта. Это решение с общими рекомендациями, которое подойдет всем продуктам Контура.

Если у вашего продукта сложился свой язык общения с пользователям, можно использовать свою графику, предварительно тестируя её на пользователях.