Ранее мы рассмотрели, как должны выглядеть формы на сайте, а сегодня поговорим об ошибках при заполнении полей. Плохо реализованная проверка не только останавливает пользователя, но и активно побуждает его уйти. В этой статье мы научим ваши формы не только «ругаться», но и «разговаривать» с пользователями, как с людьми.
Содержание
Почему общие сообщения об ошибках портят общение
Многие люди сталкивались при заполнении форм с текстами «Поле заполнено неправильно», «Поле содержит ошибку», «Ошибка» и т.д. Как вы реагируете? Скорее всего раздражение и вопрос: «Что именно происходит?» И тогда вы либо поняли причину и исправили ошибку, либо закрыли форму.
Если проанализировать эту ситуацию, то в сообщении звучит следующее:
-
«Вы ошибаетесь, и я не собираюсь говорить вам, почему». Сообщение создает информационный вакуум.
-
«Не торопитесь, угадайте мои правила». Работа по определению причины ошибки возлагается на пользователя.
-
«Мне плевать, получится у тебя или нет». Демонстрация безразличия.
Поэтому подобные сообщения — это не просто досадный баг пользовательского интерфейса, а прямой канал потери клиентов и денег.
Еще статьи на схожие темы:
Каковы последствия неправильных сообщений об ошибках?
Как говорится, «дьявол кроется в деталях», поэтому, казалось бы, незначительные сообщения об ошибках могут вызвать множество проблем. Самое важное:
Снижение конверсии. Каждая форма на вашем сайте — это воронка конверсии. Пользователь, достигший его, уже прошел 90% пути покупки. И особенно в ответственный момент оформления заказа пользователь не понимает, как исправить ошибку, и обычно отказывается от формы. Но даже если форма в итоге будет отправлена, у заказчика возникают сомнения, все ли будет в порядке с заказом, отправят ли его туда и т. д.
Ухудшение поведенческих факторов. Поисковые системы отслеживают результаты поисковых запросов, но пользователь не совершил покупку и пошел искать товары конкурентов. Кроме того, среднее время, которое пользователь проводит на странице с формой заказа, может уменьшиться, а показатель отказов увеличиться. Это дает поисковым роботам сигнал о низком качестве страницы и может со временем ухудшить ее в результатах поиска, а затем и на всем сайте.
Увеличение нагрузки на службы поддержки. Клиенты, не пошедшие на конкурс, все равно хотят сделать заказ и обратиться в службу поддержки. Операторы потратят время, чтобы объяснить, что должно быть понятно в интерфейсе.
Снижение лояльности и доверия к бренду. Недовольство непонятной формой передается всему бренду. «Если они не смогут изготовить нормальную форму, как они обработают мой заказ?»
Потеря данных и ухудшение качества данных. Пользователи случайным образом вводят неверные данные или даже вводят случайные данные, которые ваши сотрудники должны расшифровать и обработать. Это также может повлиять на кампании по электронной почте, SMS-уведомления и автоматический анализ клиентской базы.
Мы предполагаем, что нам удалось продемонстрировать важность сообщений об ошибках и создать мотивацию для доработки.
Основы сообщений об ошибках в ясной форме
Вместо объявления об ошибке создайте всплывающую подсказку. Их цель — не констатировать факт, а решить проблему пользователя за считанные секунды. Выделим основные принципы:
-
Информационный контент. Объясняем, в чем именно заключается ошибка, избегая общих формулировок и ненужных обобщений.
- Поле заполнено неверно
- Поле содержит ошибку
- Ошибка
- Пароль слишком короткий. Добавить больше персонажей
- Регистрация не может начинаться или заканчиваться пробелом.
- Специальные символы \ / * ! ? % # @ запрещенный
-
Ясность. Мы избегаем технических терминов и описаний и говорим на языке пользователя.
- Значение «Телефон» не является действительным номером телефона.
- Запрос не может быть выполнен
- Доступ запрещен
- Неверный номер телефона. Введите свой номер телефона в формате +7 (___) ___-__-__.
- Заполните необходимые поля
- Нет пользователя с указанным адресом электронной почты
-
Решение. Мы показываем, что именно пошло не так, и даем пользователю четкие инструкции. А когда дело доходит до ввода промокода, решение можно дополнить преимуществами для клиента. Например: «Этот промокод не активен. Вот текущие скидки на эту неделю».
- Неверный формат
- Неверная дата рождения
- Слишком короткое значение
- Адрес электронной почты не может содержать символы кириллицы.
- Зарегистрироваться на сайте могут только люди старше 18 лет.
- Пароль слишком короткий. Введите не менее 6 символов
-
Учтивость. Используйте нейтральный или поддерживающий язык.
- Ошибка! Введен неверный адрес электронной почты
- Обязательное поле!
- Ошибка авторизации! Неверный пароль
- Поле «Электронная почта» содержит ошибку. Адрес электронной почты должен состоять из двух основных частей, разделенных символом @. Пример test@mail.ru
- Пожалуйста, введите свое имя
- Пароль неверен. Попробуйте еще раз
Также рекомендуем вам продолжить чтение нашей статьи о текстах в интерфейсе.
Но одного текста недостаточно. Теперь давайте посмотрим, какое визуальное оформление помогает обеспечить правильное восприятие и правильную интерпретацию этого сообщения.
Примеры роста кликов, конверсий, заказов и прибыли:
Рекомендации по реализации правильных сообщений об ошибках
Контраст. Сообщение об ошибке должно быть видимым, а текст должен легко читаться.
Если контраст низкий, текст трудно увидеть и прочитать.
В этом примере текст привлекает внимание и его легко понять.
Сообщество. Лучше отображать сообщение об ошибке рядом с соответствующим полем (или полями).
Это сообщение, похоже, не относится к форме.
Расположение текста дает понять, что сообщение относится к упомянутым выше полям.
Признание. Если вы используете символы, выбирайте интуитивно понятные символы. Например, крестик или восклицательный знак для ошибок и галочка для исправленного поля.
Огненный смайлик часто используется в положительном ключе.
Однако крест связан с отменой действия или ошибкой и подходит для этого сообщения.
Актуальность. Не следует скрывать технические дефекты сообщениями об ошибках. Вместо «Ошибка: Электронная почта уже занята» можно предложить: «Этот адрес электронной почты уже зарегистрирован. Войти или сбросить пароль?
Не совсем понятно, в чем проблема. Это явно техническая проблема сервиса, а не ошибка ввода.
В этом случае лучше ничего не отображать, а предоставить пользователю возможность оформить заказ.
Профилактические меры во избежание ошибок
Идеальный пользовательский опыт невидим: он обнаруживает неправильный шаг и мягко направляет, чтобы процесс по умолчанию был безошибочным. Идеи, как избежать ошибок:
Советы и примеры. Иногда пользователь не ошибается, он просто не понимает, чего от него ждут. Поместите краткое объяснение этого в поле или под ним. Пример размещения уведомления:
Форматирование при заполнении и масках ввода. Не ждите, пока пользователь завершит работу, а затем нажмите «Отправить». Помогите ему в режиме реального времени. Например, в поле номера телефона можно автоматически вставлять пробелы, скобки и дефисы: +7 ( ___ ) ___-__-__:
Ограничение ввода. Мы с этим аккуратно относимся, но например можно ограничить ввод букв в поле ввода телефона и ввод цифр в поле ввода имени. В поле даты ограничьте прошлые даты для событий и будущие даты для дней рождения:
Автозаполнение. Сохраните ранее введенные пользователем данные и замените их в форме, особенно если у него есть на это разрешение.
Коротко и мило. Загроможденная форма не только отвлекает, но и может привести к тому, что пользователь запутается в полях ввода.
Вам нравится статья? Тогда обратите внимание на наши курсы!
Диплом
Фраза «Ошибка заполнения поля» часто приводит к отказу от формы и упущенной возможности завоевать доверие пользователя. Мы надеемся, что приведенные выше рекомендации помогут повысить конверсию и сделать интерфейс сайта в целом более удобным для пользователя.
А если вам понадобится помощь в поиске и устранении дефектов сайта, вы всегда можете обратиться к нам. Мы поможем вам вывести ваш сайт на новый уровень!
© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна
