Тим Нойсессер и Эван Санволл написали о сообщениях об ошибках.

— Отображайте сообщения об ошибках там, где они произошли, чтобы было проще связать сообщение с требующим внимания элементом интерфейса;
— Используйте заметные и доступные индикаторы. Не оформляйте ошибки только цветом и анимацией, для доступности можно добавить иконки;
— Не показывайте ошибки преждевременно. Например, когда пользователь переместил фокус из незаполненного поля, показывать сообщение рановато — человек ещё только изучает интерфейс;
— Кратко опишите проблему и предложите способ её решения, иногда может потребоваться объяснить, как работает система;
— Не обвиняйте пользователя и избегайте шуток;
— Помогайте избегать ошибок. Например, Gmail предупреждает о неприложенном файле при попытке отправить письмо;
— Сохраняйте введённые пользователем данные, чтобы ошибку можно было исправить редактированием, а не новым вводом;
— Помогайте исправлять ошибки. Например, заменить ввод на вариант без опечатки;
— Если всё, что может сделать пользователь, это вернуться позже (например, сервер перегружен), на странице с ошибкой можно совместить извинения с чем-то неожиданным и новым. Твиттер показывает иллюстрацию с птичками с китом.

In English. #error #writing

Кира Калимулина написала о тексте для пустых состояний и ошибок.

— Пустое состояние отображается, когда на экране нет содержимого: 1) Пользователь не добавил или нужные данные ещё не накопились, 2) Он всё удалил, 3) Нулевые результаты поиска или фильтрации;
— Общие рекомендации: определите контекст появления такого состояния; в заголовке расскажите, что произошло; в подзаголовке подскажите, что делать дальше (иногда имеет смысл успокоить пользователя); в тексте кнопки направьте его к целевому действию;
— В статье Кинерет Ифры — более подробная классификация пустых состояний и отдельные рекомендации под каждое;
— Вместо пустого состояния можно показать видеоподсказку или инструкцию;
— Если поиск не нашёл то, что искал пользователь, можно показать что-то похожее. Но важно сообщить об этом;
— Можно показать демоверсию содержимого, например, если эту функциональность открывает премиальный тариф;
— Не стоит: рассказывать о других фичах (может запутать); шутить, когда появление такого состояния может разочаровать пользователя; драматизировать («Мы очень старались, но так ничего и не нашли! Простите нас, пожалуйста, мы обещаем исправиться!»);
— В сообщениях об ошибках превращайте негатив в позитив, если это не искажает смысл. Например: «Эти товары недоступны для юридических лиц» → «Эти товары доступны только для физических лиц»;
— Если есть возможность, к сообщениям об ошибке добавляйте полезные ссылки. Например, на чат с поддержкой;
— Не пишите «Упс» или «Ой» — становится похоже, будто вы не контролируете, что происходит с вашим сервисом;
— Единственная ошибка, в тексте которой можно шутить, — 404.

Канал Киры. #empty_state #error #writing

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

— Правило хорошего UX — дать пользователю возможность вернуться в предыдущий режим, к изначальному состоянию;
— Пользователь нажимает на кнопку отправки формы, все пустые поля переходят в состояние Error, в нормальное состояние они возвращаются по очереди по мере заполнения. По сути форма переходит в режим отладки;
— Нажатие на кнопку приводит к изменению состояния полей, но объект взаимодействия — кнопка, с ней связан локус внимания пользователя. Но не она говорит с пользователем, а поля (которые вместо полей ввода стали полями вывода);
— Если автоматически фокусироваться на первом пустом поле, на мобильных это приведёт к отображению клавиатуры и затруднит изучение формы в целом. Можно прокручивать страницу к этому полю, но тогда пользователю придётся нажимать на поле, чтобы его заполнить;
— Стоит разделять ошибки данных (не хватает @ в адресе электронной почты) и ошибки процесса (пришёл ответ сервера о несуществующем адресе);
— Пустое поле — не ошибка данных, а приглашение к взаимодействию;
— Принцип «один экран — одно действие» сокращает количество вариантов для выбора и повышает его скорость;
— Если на экране одновременно одно поле, поднимающаяся при фокусе клавиатура не мешает. Если оставить его пустым, нажатие на «Продолжить» вернёт фокус в поле и отобразит клавиатуру, приглашая к взаимодействию без сообщения об ошибке;
— Если на экране полей много, можно реализовать их последовательное заполнение, переходя между полями кнопкой Next на экранной клавиатуре и прокручивая страницу так, чтобы заполняемое поле было ровно над клавиатурой;
— При попытке отправить форму можно вернуть пользователя к первому неправильно заполненному полю (с сообщением об ошибке), не помечая все остальные.

#error #form

Анна Малинина написала об обработке ошибок при заполнении форм.

— Пользователей раздражают не сами ошибки, а то, как интерфейс о них сообщает. Он может быть слишком строгим, неожиданным или непонятным;
— Показывайте ошибку после того, как пользователь закончил заполнять поле;
— Для остальных полей ошибки можно показывать при попытке отправить форму;
— Не сообщайте о пустом поле, если пользователь его просто «потрогал»;
— Пишите понятные и конкретные сообщения. Вместо «Неверный формат» напишите, каким формат должен быть;
— Выбирайте дружелюбный тон и нейтральные слова: «Нельзя вводить больше 128 символов» → «Максимум 128 символов»;
— Лучшее место для отображения ошибки — рядом с полем;
— Для большего внимания к полю (и большей доступности) кроме красного текста ошибки и обводки у поля можно показать иконку с восклицательным знаком;
— Если пользователь попытался отправить форму с ошибками, прокручивайте её к первому полю с ошибкой;
— Не скрывайте сообщение об ошибке сразу, как пользователь перешёл к редактированию поля, чтобы он успел его осмыслить;
— Если текст ошибки о незаполненном обязательном поле будет единым («Это обязательное поле», без повторения названия поля), пользователям проще распознавать такие сообщения, и не будет лишних текстовых переменных;
— Если есть лимит на количество символов, и пользователи могут иногда копировать текст в поле, не обрезайте вставленный текст. Покажите ошибку и счётчик символов.

#form #error