Дизайн Ольга Шишкова
1 954

«Опаньки»: что должно быть на странице ошибки на сайте

Объяснить, из-за чего возникла проблема, проинструктировать, добавить теплые слова — перевод материала контент-дизайнера Рианнон Джонс.

В закладки
Аудио

Иногда дизайнеры развлекаются при создании сообщения об ошибке. Посмотрите на «Опаньки...» или «Он мёртв, Джим» в Google Chrome, на страницу ошибки 404 на GitHub.

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

В 2017 году я устроилась в Deliveroo, здесь сообщениям об ошибке почти не уделяли внимания. В своё время ими занималось много разных сотрудников: инженеры, дизайнеры по продукту.

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

Такое случается часто. Видела подобное почти в каждом продукте, с которым работала.

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

Поэтому мы переписали каждое сообщение об ошибке в продукте для покупателей. Вот как мы это сделали.

Первое — распределили ошибки по категориям

На этом этапе нужно работать с электронными таблицами, скриншотами и цветомаркировкой.

Реакция пользователя зависит от того, правильно ли выбран тон сообщения об ошибке. Хороший показатель — потраченное на решение задачи время. Пользователь только открыл приложение или уже выбрал, что заказать, ввёл данные карточки и адрес доставки? Он может исправить свою проблему? Насколько она повлияет на опыт?

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

  • Системная ошибка. Возникающая на стороне системы. Сюда относятся системный сбой, сообщение о том, что товар распродан, отклонение заказа.
  • Пользовательская ошибка. Возникает из-за действий пользователя. Например, если ввёл неправильный номер банковской карты, некорректный адрес доставки.

Затем ошибки делятся на:

  • Частичные. Ошибка, которая не остановит пользователя от совершения действия. Например, пользователь хочет заказать еду из ресторана, но узнал, что он закрыт. Однако пользователь всё равно может заказать еду, но из другого ресторана.
  • Полная. Ошибка, которая не даст пользователю завершить действие. Это ошибки сервера (с кодом 500) или серьёзные сбои.

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

Пройти этот этап — это выполнить 80% работы.

Второе — оценили ошибки по степени влияния

Самый простой способ — показать все ошибки на графике. Одна ось описывает тип ошибки: частичная, полная, системная или пользовательская. Вторая ось описывать степень влияния ошибки на опыт пользователя.

Мы сделали три уровня тяжести: «раздражает», «злит», «полный кошмар».

Третье — определили подход

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

«Раздражает»

  • Объяснить.
  • Добавить теплоты.

Объясните пользователю, из-за чего возникла проблема. Добавьте тёплую фразу, возможно, шутку, если она уместна. Постарайтесь избегать сухих фраз, взаимодействие должно быть положительным.

Гипотетический пример «раздражающего» сообщения. Объясните, добавьте теплоты

«Злит»

  • Объяснить.
  • Проинструктировать.

Расскажите, из-за чего возникла проблема. Дайте инструкцию по её решению.

Гипотетический пример ошибки, вызывающей злость. Объясните, проинструктируйте

«Полный кошмар» — только для системных ошибок

  • Извиниться.
  • Решить проблему.

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

Гипотетический пример ошибки из категории «Полный кошмар». Извинитесь, постарайтесь решить проблему

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

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

{ "author_name": "Ольга Шишкова", "author_type": "self", "tags": [], "comments": 2, "likes": 17, "favorites": 37, "is_advertisement": false, "subsite_label": "design", "id": 50556, "is_wide": false, "is_ugc": true, "date": "Mon, 12 Nov 2018 17:32:22 +0300" }
{ "id": 50556, "author_id": 107557, "diff_limit": 1000, "urls": {"diff":"\/comments\/50556\/get","add":"\/comments\/50556\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/50556"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "possessions": [] }

2 комментария 2 комм.

Популярные

По порядку

0

Откуда мы знаем, как на неё реагирует пользователь?)
Предположение, опрос, гадание на картах?)

Ответить
0

https://www.tdespada.ru/404/ - лучшая 404, которую я когда либо видел :)

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления
{ "page_type": "default" }