Лекция «Стили в UX/UI: что вас ждет в 2025 году» ЛЕКЦИЯ 25 декабря

Как создавать эффективные сообщения об ошибках

Эффективные сообщения об ошибках — заметные, конструктивные и транслируют уважительное отношение к усилиям пользователя.

Более 30 лет назад Якоб Нильсен сформулировал 10 эвристик юзабилити, общих рекомендаций по проектированию цифровых продуктов. Сегодня эти эвристики по-прежнему актуальны. Эвристика № 9 касается оформления сообщений об ошибках: «Помогайте пользователям распознавать, диагностировать и исправлять ошибки».

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

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

  • Визуальная доступность: в каком виде сообщения об ошибках представляются пользователям.
  • Коммуникация: что сообщение об ошибке рассказывает о проблеме и возможных решениях.
  • Эффективность: как сообщение об ошибке помогает пользователю преодолеть разрыв между оценкой и выполнением (этот разрыв описывает две основные проблемы, которые нужно преодолеть, чтобы успешно взаимодействовать с любым устройством: после выполнения пользователи должны оценить результат, спланировать выполнение следующего шага, оценить этот результат и т.д., пока не достигнут желаемой конечной цели).

Рекомендации по визуальной доступности

Сообщения об ошибках должны быть заметными и узнаваемыми.

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

👎🏻Когда пользователь вводит недействительный URL в профиле Instagram (принадлежит компании Meta, признанной в РФ экстремистской организацией), в нижней части экрана появляется малозаметное сообщение об ошибке

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

Кроме того, помните о рекомендациях по обеспечению доступности! В мире около 350 миллионов людей с нарушениями цветового зрения, поэтому никогда не используйте только цвет или анимацию для обозначения ошибок.

👍🏻Amazon использует сочетание нескольких индикаторов ошибки: красную обводку поля, иконку и красный текст

👍🏻CafePress показывает анимированный баннер, чтобы привлечь внимание пользователя к пустому полю

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

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

👍🏻Компания Kohl's показывает сообщение без стандартного красного оформления, чтобы уведомить пользователей о возможных задержках доставки.

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

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

👍🏻CLEAR размещает рядом с текстовым полем четкие требования к паролю и доступную информацию об их соблюдении. Это правильное решение, поскольку создание пароля — взаимодействие с высоким риском ошибок
👎🏻На странице продления регистрации транспортных средств в Техасе отображается ошибка, если пользователь перемещает фокус из поля ввода email, ничего в нем не набрав: человеку сообщают, что он сделал что-то не так, хотя он просто изучал интерфейс

Рекомендации по коммуникации

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

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

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

👎🏻Когда пользователи выбирают большое количество фильтров в поиске ресторанов, Disneyworld пытается смягчить отсутствие результатов каламбурами, вместо того чтобы четко разъяснить ситуацию

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

Используйте позитивный тон и не обвиняйте пользователя. В ваших сообщениях не должно быть осуждения. Не используйте формулировки, которые подразумевают, что люди делают что-то не так, например, «недействительный», «незаконный» или «неправильный». Обязанность обеспечить надлежащее использование системы лежит на ее создателях — она должна изящно адаптироваться, а не перекладывать вину. Избегайте неуместных шуток, так как они могут надоесть пользователям, если те часто сталкиваются с ошибкой.

👍🏻На скриншоте мы видим сообщение Target о том, что пользователи должны потратить больше, чтобы их заказ был доставлен в тот же день. Обратите внимание, акцент в сообщении сделан именно на сумме, магазин не обвиняет клиента, что он набрал недостаточно продуктов
👎🏻Если несовершеннолетний пользователь выбирает пункт Магазин в меню на сайте National Geographic Kids, ему не говорят, что делать дальше. Сообщение было бы эффективнее, если бы в нем разъяснялось, что пользоваться магазином могут только взрослые и что ребенок должен обратиться к ним за помощью

Рекомендации по эффективности

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

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

👍🏻 Современные почтовые приложения выявляют распространенные ошибки, например, отсутствие вложения, и предупреждают о них

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

👍🏻Если пользователь нажимает Назад после добавления изображения в Instagram-сторис (Instagram принадлежит компании Meta, признанной в РФ экстремистской организацией), система предлагает сохранить черновик

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

Кратко объясните, как работает система. Объясните пользователям, как работает система и как устранить ошибку. Если требуется дополнительная информация, добавьте в сообщение ссылку на страницу с нужными материалами или объяснением проблемы (не переусердствуйте с этим).

👍🏻Компания Vistaprint сообщает, что произойдет с текстом, выходящим за пределы области печати
👎🏻Хотя компания Zazzle обозначает область печати при помощи рамки, она не предупреждает пользователя об обрезанном тексте, что может привести к созданию и покупке бракованной футболки

Смягчите разочарование от ошибки новизной

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

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

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

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

👍🏻AI-инструменты, такие как ChatGPT, могут использовать вынужденные паузы для развлечения и обучения пользователей. На скриншоте: ChatGPT оказался временно недоступен, и на экране появился пример сценария, который он способен написать
👍🏻Хотя Twitter перестал использовать кита Fail Whale (художник Yiying Lu) для оповещения пользователей о сбоях в работе сервиса, изображение стало больше, чем просто сообщением об ошибке, и получило известность как пример остроумного изображения усилий (кит символизирует перегрузку сервера, а птички, логотип соцсети, пытаются его поднять)

Заключение

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

Источник
и
:
arrow