Ошибки

• Уведомление об ошибках
• Контрастность
• Уведомление об ошибке Color
• Уведомление об ошибке White
• Уровень
• Уведомление об ошибке Page
• Уведомление об ошибке Inline
• Уведомление об ошибке с кнопкой
• Уведомление об ошибке Toast
• Ошибка на странице
• Валидация
• Сохраняйте введенные значения
• Сообщайте об ошибке только по факту ее совершения
• Предотвращайте ошибки
• Текст ошибок
• Возможные формулировки распространенных ошибок

Уведомление об ошибках

Подробно о том, как выбрать тип уведомления - success, info, warning, error - читайте в шаблоне "Уведомления".

Контрастность

Уведомление об ошибке Color

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

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

Уведомление об ошибке White

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

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

Уровень

Уведомление об ошибке Page

Ошибка, которая:

1. -является временной, и зайдя на страницу повторно, пользователю нет необходимости видеть текст этой ошибки.

2. -появляется в ответ на действия пользователя - например, неудачное создание заявки.

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

Ошибка отображается несколько секунд, затем исчезает. При этом ее можно закрыть раньше.

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

Отступ от края экрана до уведомления - 16px.

Уведомление об ошибке Inline

Ошибка, которая:

• -отображает состояние всей системы независимо от выполняемых действий.

• -является резолюцией - документ не подписан, заявка не одобрена

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

• -сообщает о статусе какого-либо процесса. Если документ не был подписан, например. В таком случае, чтобы устранить ошибку, нужно повторить действие или выполнить другое.

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

Рекомендуется отображать одновременно только одно подобное уведомление на странице / форме.

Уведомление об ошибке с кнопкой

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

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

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

Уведомление об ошибке Toast

Ошибки, которые всплывают в верхнем правом углу.

Рекомендуется использовать для информирования о состоянии системы:

• -Пропало соединение с интернетом;

• -Ошибка по тайм-ауту и т.д.

Так как обычно эти уведомления исчезают самостоятельно через непродолжительное время (по умолчанию через 4 секунды), текст ошибки должен быть максимально коротким - таким, чтобы его можно было просканировать за пару секунд. Старайтесь не превышать 1-2 строк.

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

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

Также ошибки могут иметь разное расположение на экране.

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

Ошибка на странице 

Используется для таких ошибок, как 400-е, 500-е.

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

Обязательно использование понятного релевантного текста для каждой отдельной ошибки.

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

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

Правильно Используйте так

Пользователь понимает, какие действия ему доступны и какие есть альтернативы

Неправильно Так не нужно делать

Пользователю непонятно, что делать дальше и как достичь своей цели

Валидация

Сохраняйте введенные значения

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

Сообщайте об ошибке только по факту ее совершения

Подсвечивайте поле красным только тогда, когда пользователь совершил ошибку. Если производить мгновенную валидацию, например, в поле E-mail - пользователь будет видеть ошибку "Неверный формат почты" как только введет первый символ (если ведется валидация по наличию собаки и доменной зоны). При этом, среднестатистический пользователь знает, из чего состоит адрес его электронной почты. Сообщение об ошибке может его раздражать.

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

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

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

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

Правильно Используйте так

Валидация по потере фокуса лучше подходит для таких полей, как Email.

Неправильно Так не нужно делать

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

Предотвращайте ошибки

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

То же и с селектами - не отображайте для выбора варианты, которые невалидны в данном контексте.

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

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

Текст ошибок

Подробно с редполитикой можно ознакомиться в дизайн-системе.

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

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

Наряду с текстом ошибки "Неверное значение" можно добавить описание к полю "Пароль должен содержать латиницу, цифры и символы. Размер пароля не менее 8 символов".

Правильно Используйте так

Пользователю понятно, что он сделал не так и как исправить ошибку.

Неправильно Так не нужно делать

Текст ошибки не проясняет ситуацию и не говорит, как исправить ошибку.

Возможные формулировки распространенных ошибок