UX Design: четыре способа отображения сообщений об ошибках

1. Контур
2. Сообщение
3. Размещение
4. Стиль сообщения
5. Стиль поля
6. Пример использования четырехточечных правил для отображения сообщений об ошибках
7. Теперь, что пошло не так?
8. Использование основных 4-х точечных правил отображения сообщений об ошибках
9. Отображение сообщений об ошибках в формах с метками слева:
10. Отображение сообщений об ошибках в соответствии с шаблоном чтения пользователя:
11. Заключение

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

Контур

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

1. Сообщение об ошибке должно быть коротким и значимым
2. Размещение сообщения должно быть связано с полем
3. Стиль сообщения должен быть отделен от стиля меток полей и инструкций
4. Стиль поля ошибки должен отличаться от обычного поля

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

Благодаря продуманному размещению меток, инструкции по заполнению поля и дополнительные элементы дизайна могут сделать форму менее пугающей и привести к меньшему количеству допущенных ошибок (Jarrett, C. and Gaffney, G., 2008). Однако я видел, что пользователи снова и снова совершают одни и те же ошибки в формах, поскольку на этих веб-сайтах отображаются сообщения об ошибках, которые либо не очень понятны пользователю, либо из-за их размещения пользователям неясно, к каким сообщениям они относятся. Эта статья посвящена тому, как предоставлять сообщения об ошибках в формах с точки зрения взаимодействия с пользователем.

Сообщение

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

Рисунок 1: Страница регистрации Hotmail - сообщение об ошибке, в котором не указывается год рождения (например, «гггг»)

Я знаю, что родился в 81 году, и я могу подтвердить это своим свидетельством о рождении. В сообщении об ошибке должен быть указан формат года рождения, которому должен следовать пользователь, например «Пожалуйста, введите год рождения в 4 цифры (например, 1973)», как показано на следующем рисунке.

Рисунок 2: Улучшено сообщение об ошибке, чтобы людям было ясно, какую ошибку они совершили

Размещение

Сообщение должно быть не только коротким и кратким, но и иметь хорошие возможности, чтобы связать его с полем. Это ставит вопрос о том, где лучше всего разместить сообщение об ошибке - над, после, слева или справа от поля? Это зависит от типа сообщения об ошибке. Если это ошибка «отсутствует обязательное поле», вы можете поместить ее сверху, справа или внизу поля.

Рисунок 3: Показываю пример сообщений об ошибках «отсутствует обязательное поле» в нижней части соответствующих полей (из eBay)

Рисунок 4: Пример сообщения об ошибке «отсутствует обязательное поле» над метками

Связь между полем и сообщением об ошибке должна быть визуально четкой. Хотя это может не быть большой проблемой юзабилити для небольших форм, таких как Рисунок 5 (форма входа в Google), для длинной формы это может значительно запутать и привести к повторным ошибкам (как показано на рисунке 6).

Рисунок 5: Сообщение об ошибке входа в Google

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

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

Рисунок 7: Сообщения об ошибках отображаются в соответствии с шаблоном чтения пользователя

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

Рисунок 8: Пример длинной формы (из Общего Приложения)

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

Рисунок 9: Сообщения об ошибках, показанные сверху и со связанными полями (страница регистрации Sainsbury)

Стиль сообщения

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

Стиль поля

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

Рисунок 10: Форма регистрации Wordpress, предоставляющая другой стиль границы в поле ошибки

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

В ходе тестирования юзабилити веб-сайта электронной коммерции один из тестеров пытался купить продукт. Этот конкретный веб-сайт требует, чтобы все пользователи были зарегистрированы до начала процесса покупки. В процессе регистрации пользователь заполнил форму со своим именем, именем пользователя и паролем и отправил ее. Затем эта же форма отображалась с сообщением об ошибке: «Пожалуйста, введите новое имя пользователя, состоящее из буквенно-цифровых символов в диапазоне от 6 до 14 символов. Это должно быть уникальным для всех наших клиентов ». Кроме того, поле пароля, где она ввела желаемый пароль, стало пустым.

Тестер подумал, что она ошиблась с паролем. Поэтому она ввела новый пароль с цифрами, символами и заглавными буквами, повторно ввела его и отправила форму. То же самое произошло снова. Она была уверена, что пароль, который она дала, имел смесь букв и цифр с заглавными буквами, так почему же он не работал? Разочарованная системой, она медленно перечитала сообщение и, наконец, поняла, где совершает ошибку; ей нужно было беспокоиться о «имени пользователя», а не о пароле. Поэтому она ввела другое имя пользователя со всеми необходимыми символами и отправила форму. На этот раз в форме говорилось, что поле пароля было пустым… Хотя это происходило в лабораторных условиях, я не уверен, насколько желательным должен быть продукт, чтобы продолжать этот процесс регистрации, чтобы купить его. Её ответ состоял в том, чтобы бросить вызов и попытаться найти такой же продукт на другом сайте.

Теперь, что пошло не так?

Прежде всего, форма была плохо спроектирована без каких-либо предварительных инструкций относительно имени пользователя. Но это совсем другая тема разработки эффективных форм и того, куда нужно помещать инструкции (о которых Кэролайн Джарретт и Люк Вроблевски написали несколько замечательных статей и книг). Во-вторых, способ описания ошибки был плохим. Давайте рассмотрим это в перспективе - кто-то пытается что-то купить у вас, у него нет целого дня, чтобы прочитать большое объяснение «Почему они не правы!». В-третьих, позиция сообщения об ошибке не давала пользователю понять, к какому полю оно относится. И, наконец, не было визуальной подсказки, для какого поля пользователь должен был изменить, чтобы исправить «свою» ошибку. Это заставило пользователя изменить свой пароль, а не имя пользователя, в результате чего в форме неоднократно появлялось одно и то же сообщение об ошибке.

Использование основных 4-х точечных правил отображения сообщений об ошибках

Если мы примем эти правила для приведенного выше примера, мы можем предложить несколько решений.

Отображение сообщений об ошибках в формах с метками слева:

Например, если мы хотим исправить сообщение об ошибке «Пожалуйста, введите новое имя пользователя, состоящее из буквенно-цифровых символов в диапазоне от 6 до 14 символов. Это должно быть уникальным для всех наших клиентов ». Это может выглядеть примерно так:« Имя пользователя должно быть длиной 6–14 символов и должно содержать как минимум 1 цифру и 1 символ ». Используя правила размещения и стилизации, мы можем предоставить следующий пример:

Рисунок 11: Пример использования четырехточечных правил отображения сообщения об ошибке

Отображение сообщений об ошибках в соответствии с шаблоном чтения пользователя:

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

Рисунок 12: Пример использования четырехточечных правил отображения сообщений об ошибках в форме

Заключение

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

UX Design может стать отличительной чертой для ваших продуктов и услуг, а правильная настройка может выделить вас среди конкурентов, что мы подробно рассмотрим в этой статье. «Значение стратегического UX» ,

Nomensa - удостоенное наград дизайнерское агентство UX с офисами в Бристоле, Лондоне и Амстердаме.

Если вы хотите, чтобы мы помогли вам решить проблемы с пользовательским интерфейсом или предоставили вам оценку UX вашего веб-сайта / мобильного приложения, пожалуйста, не стесняйтесь обращаться к нам. Вы можете позвонить нам по телефону +44 (0) 117 929 7333 или отправить это Краткая форма , В то же время, взгляните на UX Design услуги что мы предлагаем.

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

• Джарретт С. и Гаффни Г. Формы, которые работают, Разработка веб-форм для удобства использования, 2008.
• Пензо, М., Размещение меток в формах, опубликовано в UX Matters, июль 2006 г.
• Вроблевский Л., Дизайн веб-приложений, январь 2005 г.