Отображение ошибок в интерфейсе, часть 3 – Выбор контента для описания ошибки Пользователю | by Настя Овсянникова | Nov, 2021

Коды состояния и их смысл

Ещё раз вспомним: ответ от Сервера всегда приходит в виде трёхзначного кода состояния и краткого текстового пояснения. Коды, указывающие на ошибку, начинаются на 4 и 5. У каждого есть смысл.

Чтобы не наделать лишнего, я бы посоветовала сначала пройтись с разработчиками по всему списку кодов состояния и оставить те, которые могут появиться в вашем продукте. Например, ошибка 402 Payment required появится только там, где есть онлайн-оплата.

Попросите разработчиков простыми словами объяснить:

• что означает каждая ошибка;
• что это значит для вашего пользователя и что он может сделать, чтобы устранить ошибку.

Например:

Ошибка 403 Forbidden
У пользователя нет прав для просмотра этой страницы/контента. Или нет прав для совершения этого действия. Техническая суть ошибки может быть разной:
– пользователю забыли назначить право на просмотр веб-ресурса;
– у пользователя отобрали право выполнять какое-то действие;
– неправильно указаны DNS-серверы сайта и т.д.
Но для большинства пользователей важна лишь суть: «Ага, у меня нет доступа к этой странице. Что мне сделать, чтобы его получить?»

Ошибка 503 Service Temporarily Unavailable
Сервер работает, но очень медленно и с перебоями. Он в состоянии обработать пару лёгких запросов, но с подавляющим большинством задач не справится. Технически причиной может быть:
– слишком большое количество одновременных запросов;
– зависание скриптов;
– сбои при передаче данных и т.д.
В зависимости от роли пользователя эта информация может ему и пригодиться, и нет. Например, если это «обычный» пользователь системы (у нас это банковский менеджер), то ему важнее понять, куда нажать или кому писать, чтобы всё починилось. А если это сотрудник дирекции безопасности, то ему нужны технические подробности.

Так у вас сложится понимание, какие коды состояния стоит пояснить конкретно. С остальными можно поступить по-разному:

• отображать у всех один и тот же общий текст с рекомендациями;
• отображать общий текст и код ошибки;
• отображать только факт ошибки и рекомендации и т.д.

Кстати, валидационные ошибки тоже приходят с кодом состояния (обычно 400 или 409). Но я их выделила в отдельную группу, потому что подход к выбору элемента и текстам другой.

Текстовые токены для ошибок

Каждая ошибка обработки данных отображается в разных элементах в зависимости от контекста. Допустим, у вас в продукте это полноэкранная ошибка, алерт и нотификация – 3 способа. Вы решили подробно описывать ошибки 403, 404, 500 и 503, а остальные отображать одинаково. Это 5 ситуаций. Итого 15 вариантов контента.

Можно расписать все 15 вариантов. Так я и думала сделать вначале. Потом предположила: что если появится ещё один способ отображения ошибки? Или мы решим описать подробно больше ошибок? Как объяснить другим дизайнерам подход к формулировке текстов? Захотелось систематизировать. Мы решили использовать текстовые токены – кусочки фраз, из которых можно собрать любой элемент отображения ошибки.

Разберём на примере ошибки 500 Internal Server Error

Сервер на действия Пользователя ответил кодом состояния 500. К этому событию мы можем «привязать» какие угодно другие события, действия и параметры.

К событию «ошибка 500» у нас привязаны следующие действия:

• назначить параметру error-title значение Произошла техническая ошибка ;
• назначить параметру error-message-full значение Попробуйте перезагрузить страницу. Если ошибка остаётся, обратитесь к администратору. Сообщите, когда возникла ошибка и что вы делали до этого. ;
• назначить параметру error-message-short значение Произошла техническая ошибка. Попробуйте ещё раз. ;
• назначить параметру error-action-primary значение Перезагрузить ;
• назначить параметру error-action-secondary значение Вернуться назад ;

Эти параметры – не общепринятые. Мы создали их у себя в системе. Таким образом, вместе с событием «ошибка 500» мы получаем конкретные значения некоторых параметров. Эти значения подставляются в элемент отображения ошибки.

Например, шаблон полноэкранной ошибки выглядит так: