Как писать полезные сообщения об ошибках для улучшения пользовательского опыта вашего приложения

Автор оригинала: FreeCodeCamp Community Member.

Прошли времена бесполезных и общая общую связь об ошибке.

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

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

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

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

Текущее состояние обмена сообщениями

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

Эти ошибки могут стебель от:

Неудачная проверка
Сбои на стороне сервера
Ограничение скорости
Код Borkeded
Дела Божьи

И когда вещи пойдут не так, часто обмен сообщениями об ошибках клиента принимает форму в одном из двух способов:

Общие ошибки без значимой информации, например, Что-то пошло не так. Пожалуйста, повторите попытку позже
Гипер специфические сообщения от трассы стека, отправленные сервером, например, Ошибка 10x29183: Линия 26: Объект отображения ошибок -> INT32

Ни один не полезен для наших конечных пользователей.

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

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

Для одной, эти ошибки предоставляют информацию о нашей логике нашей сервера. Это проблема в безопасности? наверное? Я не пен-тестер.

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

Почему я должен создать Sane Surving Messaging?

Чтобы помочь сохранить здравомыслие разработчика

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

Отчет от пользователя, который говорит:

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

гораздо менее полезно, чем:

Привет, я использовал приложение когда-нибудь вчера вечером, обновляя мой профиль и внезапно он перестал работать. Ошибка сказала: «У нас были проблемы с обновлением ваших деталей. Ваш адрес должен быть расположен в пределах ЕС», но я живу в Англии

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

Чтобы помочь поддерживать организацию здравомыслия

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

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

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

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

Чтобы помочь поддерживать здравомыслие конечного пользователя

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

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

В книге Джона Яблонски законы UX, он описывает психологическую концепцию, называемую правилом максимума:

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

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

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

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

Если эти сайты/приложения не являются одной из этих немногих вездесущих платформ (например, Google, Instagram, Apple), я, вероятно, не использовал их с тех пор. Я уверен, что вы даже можете помнить время, когда это случилось с вами. На самом деле, я буду открыто приветствовать фотографии ужасных сообщений об ошибках через Твиттер

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

Что делает хорошее сообщение об ошибке?

Взяты из Микрокопия: полное руководство Отказ Полезное сообщение об ошибке должно удовлетворить эти качества:

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

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

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

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

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

Как я могу начать писать сообщения об ошибках Sane?

Я открыл простым инструментом под названием Sane-Error-Messages Отказ Запуск инструмента сгенерирует новый REPO, предназначенный для размещения вашей ошибки по умолчанию. Вы можете настроить значения по умолчанию, добавить или удалить сообщения, а затем опубликовать его, чтобы потреблять в приложениях с обращенными клиентами.

Sane-Error-Messages Работает, агрегация всех ваших обмен сообщениями в один объект JavaScript. Ключ представляет собой код ошибки, и значение является соответствующим сообщением.

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

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

Пока ваш сервер возвращает предсказуемые коды ошибок, реализация на стороне сервера не имеет значения. Следующая последовательность – это только один способ внедрения Sane-Error-Messages

Коротко:

Пользователь “просмотрует все продукты”
Frestend делает сетевой запрос
Сетевой запрос не удается и возвращает код ошибки «user_not найден»
Frontend просит соответствующее сообщение об ошибке от вашего Ошибка-сообщения упаковка.
Frestend применяет любую соответствующую контекстную информацию
Frontend отображает эту информацию для конечного пользователя.

Если вы хотите попробовать что-то руки, вы можете играть с этим CodeSandbox Отказ Кодындущие коробки срабатывают с запроса на MOCK Server, который возвращает 1 из 12 кодов ошибок в случайном порядке.

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

Как настроить сообщения об ошибках

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

Начать с бега

пряжа Global Add Sane-Error-Message

тогда

Sane-Error-Messages Создать

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

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

Вы можете узнать больше о TSDX здесь.

Короче говоря, содержимое вашего нового пакета будет выглядеть так:

/* errorCodes.ts: The file that defines each error code like */
const USER_NOT_ADMIN = '403_USER_NOT_ADMIN'

/* defaultErrorMessages.ts: Maps each code to a default message */
const errorCodes {
  // your codes and messages go here...
  [USER_NOT_ADMIN]: "We're afraid only administrators have access to "
}

/* ErrorMessages.ts: The class you'll use to instantiate your error messages object in the consuming project */
class ErrorMessages {
  // You can override default messages with more specific ones
  constructor: (customErrorMessages: Partial>): ErrorMessages;

  // Pass through an error code to get your custom message
  getErrorMessage: (code: string | number, fallbackMessage?: string): string;

  // Checks to see if the argument is a valid error code and acts as a guard for non-ErrorCode values
  isErrorCode(code: string | number): boolean;

  // Returns the errorCodes object with your custom messages
  messages: Record
}

type ErrorCode = ValueOf

Как потреблять ваши сообщения об ошибках

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

import { ErrorMessages } from 'custom-error-messages';

const customErrorMessages = {
  '400_validation': 'Please enter the fields in your form correctly',
};

// Initialise your errorMessages object with your custom messages
const errorMessages = new ErrorMessages(customErrorMessages);

function riskyFunction() {
  try {
    // Throws an error 
    await boom();
  } catch (err) {
    // Get the error code our server sent over
    const { code } = err;
		
    // Get the code's corresponding message
    const message = errorMessages.getErrorMessage(code);
    
    // Display the message to the client
    displayNotification(message);
  }
}

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

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

Заключение

Я надеюсь, что вам понравилось узнать о частом упущенном аспекте веб-разработки.

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

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

Faqs.

Почему Server-Side не может просто вернуть эти сообщения?

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

Нужно ли мне создать экземпляр ошибок-сообщений для каждого потребителя API?

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

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

Я думаю, что этот пакет должен иметь X или сделать по-другому

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

Дальнейшее чтение

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

Автор книги Kinneret Yifrah, неудовлетворенно предоставил купон на 10% скидка, вы можете купить его здесь Отказ

Код купона для электронной книги: Adrico-ebook

Код купона для пучка: Adrico-Bundle

Рекомендации обмена сообщениями: NN Group А Краткая статья О Важном важности Sane Surving Messaging, которые делится некоторые очень полезные советы о том, как создавать обмен сообщениями Sane.