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