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