Ошибки в форме заявки: валидация на лету, тексты ошибок и рост повторных отправок

Когда проверять форму и как писать ошибки: проверка при потере фокуса даёт лучшую конверсию, а текст ошибки должен сказать, что не так, почему и как исправить

Ошибки в форме заявки: валидация на лету, тексты ошибок и рост повторных отправок

Сначала вывод: Когда проверять форму и что писать в ошибках — от этого зависит, исправит пользователь данные и отправит заново или просто закроет страницу. Главное: обязательные поля проверяйте при потере фокуса (когда пользователь уходит с поля), а мгновенную проверку оставьте только для полей, где нужна реакция сразу, — например, для надёжности пароля. В тексте ошибки должно быть три вещи: какое поле заполнено неверно, почему и как это исправить, а не просто «неверный ввод». Если отправка не прошла, сохраните всё, что пользователь уже ввёл, — не очищайте форму целиком, чтобы ему не пришлось заполнять её заново. Контринтуитивно, но проверка на каждую букву, которая выглядит умнее, на деле снижает конверсию: ошибки во время набора сбивают пользователя с мысли.

1. Когда проверять: в какой момент это не мешает пользователю

Проверять форму можно в три момента: при отправке, при потере фокуса и на каждую букву. Большинству кажется, что проверка на лету — самая умная, но данные говорят обратное: при проверке на каждую букву конверсия самая низкая, потому что ошибки во время набора сбивают с мысли — кажется, что за тобой следят.

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

Когда проверять	Доля заполнения	Что чувствует пользователь	Для каких полей	Рекомендация
При отправке	База, 100%	Узнаёт об ошибке только в конце и ищет её	Простые формы с малым числом полей	Допустимо, но не лучший вариант
При потере фокуса	115–125%	Заполнил поле — сразу проверил	Обязательные поля, email, телефон	Основной вариант
На каждую букву	85–95%	Ошибка во время набора, тревога	Надёжность пароля, подтверждение пароля	Только для отдельных полей
Смешанная проверка	120–135%	В основном при потере фокуса, ключевые — на лету	Комплексные формы	Продвинутая практика

Смешанный подход — оптимальное решение: большинство полей проверяйте по потере фокуса (не мешает печатать), а несколько полей, где нужна мгновенная реакция, — в реальном времени (например, надёжность пароля или совпадение двух паролей). Критерий простой: нужно ли пользователю знать, правильно ли он заполняет поле, прямо во время ввода? Если да — проверка в реальном времени (надёжность пароля), если нет — по потере фокуса (формат email). Общую логику оформления формы смотрите в Проектирование полей формы заявки и конверсия.

2. Текст ошибки: скажите, как исправить, а не только что не так

Самая частая ошибка — написать «Введены неверные данные». Пользователь видит это и не понимает: где ошибка, почему она возникла и как её исправить. С таким размытым сообщением доля повторных попыток очень низкая: человеку приходится самому догадываться, что пошло не так, а пока он гадает, он просто закрывает страницу. Хорошее сообщение об ошибке должно содержать три вещи: указать, в каком поле ошибка, объяснить, почему она возникла, и подсказать, как её исправить.

Например: пользователь неверно указал email. Плохая подсказка — «Неверный формат email», хорошая — «В адресе email не хватает символа @, например name@company.com». Второй вариант даёт самую высокую долю повторных попыток: пользователю не нужно гадать, он просто исправляет по образцу. Тон должен быть спокойным, без негативных слов вроде «ошибка» и «недействительно» — используйте нейтральные формулировки: «проверьте», «похоже, данные неполные».

Тип ошибки	Плохой текст	Хороший текст	Рост повторных попыток
Обязательное поле не заполнено	«Это поле обязательно для заполнения»	«Пожалуйста, укажите ваше имя — нам нужно знать, как к вам обращаться»	Рост на 15–20%
Неверный формат email	«Некорректный формат email»	«В адресе email не хватает @ или домена, например name@company.com»	Рост на 20–30%
Неверный формат телефона	«Недействительный номер телефона»	«Введите полный номер телефона с кодом страны, например +86 138xxxxxxxx»	Рост на 15–25%
Слишком короткое значение	«Минимум 6 символов»	«Пароль должен содержать минимум 6 символов, лучше сочетать буквы и цифры»	Рост на 10–15%
Ошибка отправки на сервер	«Не удалось отправить, попробуйте ещё раз»	«Похоже, соединение нестабильно. Введённые данные сохранены — нажмите «Отправить» ещё раз»	Рост на 25–35%

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

3. Оптимизация повторных попыток: как помочь пользователю исправить ошибки и отправить форму снова

Самый опасный момент после неудачного заполнения формы — когда пользователь нажал «Отправить» и получил россыпь красных сообщений. Если не обработать это правильно, он просто закроет страницу и уйдёт. Главный принцип оптимизации повторных попыток: после ошибки не заставляйте пользователя начинать заново — сохраните уже введённые данные, переведите фокус на первое поле с ошибкой и покажите, сколько ошибок ещё осталось исправить.

Три ключевых решения. Первое: если отправка не удалась, сохраните всё, что пользователь уже заполнил, — ни в коем случае не очищайте форму, чтобы он не начинал заново. При очистке формы отказываются больше 70%, а при сохранении данных — только 30–40%. Второе: после ошибки автоматически ставьте курсор в первое проблемное поле — пусть пользователь не ищет, где он ошибся, а сразу переходит к исправлению. Третье: если ошибок несколько, скажите: «Осталось исправить ещё 2 поля» — так он поймёт, что не всё потеряно и проблем всего пара.

Детали дизайна	Отказы	Что чувствует пользователь	Затраты на внедрение
Очистка формы после ошибки	Более 70%	Заполнял зря — просто закрыл	Минимальная
Данные сохранены, но курсор не ставится	45–55%	Приходится самому искать ошибку	Низкая
Данные сохранены + курсор в первом проблемном поле	25–35%	Сразу видно, что исправить	Средний
Данные сохранены + курсор + счётчик ошибок	15–25%	Понятно, сколько ещё полей исправить	Средний
Данные сохранены + курсор + подсказки по каждому полю	от 10% до 20%	Как будто кто-то подсказывает рядом	Высокий

Ещё одна деталь — состояние кнопки отправки. После нажатия кнопка должна сразу смениться на «Отправка…» и заблокироваться, чтобы пользователь не нажал её повторно. Во многих формах такого состояния нет: человек жмёт, ничего не происходит, он жмёт снова — и отправляет дважды, создавая две одинаковые заявки. Эта мелочь сокращает повторные отправки более чем вдвое. Методику A/B-тестирования формы смотрите в A/B-тест формы, а текст ошибок — сам по себе переменная, которую стоит тестировать.

Четыре. Частые ошибки и красные линии

Заблуждение	Что делают	Что получают	Правильный подход
Проверять все поля в реальном времени посимвольно	Ошибка появляется, пока печатаешь	Пользователь нервничает, доля завершений падает	В основном проверка при потере фокуса, реже — в реальном времени
В тексте ошибки только «Неверный ввод»	Размытая подсказка	Пользователь не знает, что менять, и уходит	Указать поле + причину + способ исправления
Очищать всю форму после ошибки	Перезагрузка страницы	Отказов больше 70%	Сохранить всё, что заполнено
Все ошибки свалены вверху формы	Общий список ошибок	Пользователь ищет, где именно ошибся	Ошибка прямо под своим полем
Кнопка отправки не меняет состояние	Нажал — ничего не происходит	Пользователь жмёт снова, отправка дублируется	Заблокировать кнопку на время отправки
Пугать красным восклицательным знаком	Крупный красный текст с восклицательным знаком	Пользователь напрягается и ошибается ещё чаще	Мягкое красное уведомление, спокойный тон

Из этих шести ошибок сильнее всего бьёт по конверсии вторая — размытый текст ошибки. Пользователь не специально заполняет неправильно, он просто не знает нужного формата. Если сказать ему «Неверный ввод», он решит, что сайт неудобный, а не что он сам ошибся. Скажите, как правильно, покажите пример — он исправит и отправит форму дальше. Подсказка об ошибке помогает заполнить форму, а не ставит оценку.

FAQ: частые вопросы

Что лучше для валидации формы — проверка в реальном времени или при отправке?

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

Как написать текст ошибки в форме, чтобы он реально помогал?

В нём должно быть три вещи: указать, в каком поле ошибка, объяснить, почему она возникла, и подсказать, как именно исправить. Плохой текст — «Введены неверные данные», хороший — «В адресе почты нет символа @, например name@company.com». Не используйте негативные слова вроде «ошибка» и «неверно» — пишите нейтрально: «проверьте», «похоже, данные неполные». Показывайте текст ошибки прямо под соответствующим полем, а не собирайте все ошибки вверху формы, иначе пользователю придётся самому искать, что не так.

Что делать, если после неудачной отправки всё, что заполнил пользователь, стёрлось?

Это самая губительная для конверсии ошибка в дизайне. После сбоя нужно сохранить всё, что пользователь уже ввёл, и ни в коем случае не очищать форму, заставляя заполнять её заново. Если форму очистить, от неё отказываются более 70% пользователей, а если данные сохранить — только 30–40%. Правильно так: сохранить все введённые данные, автоматически перевести курсор к первому полю с ошибкой и сказать, сколько ещё ошибок нужно исправить. Когда человек видит, что всё введённое на месте и нужно поправить лишь пару мелочей, он охотнее продолжает.

Нужно ли защищать кнопку отправки от повторных нажатий?

Обязательно. После нажатия кнопка должна сразу перейти в состояние «Отправка» и заблокироваться, чтобы пользователь не нажал её снова. Во многих формах этого нет: человек нажимает, реакции нет, он жмёт ещё раз — и отправка происходит дважды, появляются две одинаковые заявки. Такая мелочь сокращает повторные отправки более чем вдвое. Заодно добавьте простую анимацию загрузки, чтобы пользователь видел, что система обрабатывает запрос.

Какие цвет и тон лучше всего подходят для сообщения об ошибке?

Цвет — красный, но не слишком резкий: достаточно стандартного красного для ошибок вроде #d93025, не нужно пугать человека ярко-красным жирным шрифтом увеличенного размера. Тон — спокойный, как будто друг предупреждает, а не учитель проверяет работу. Не ставьте восклицательные знаки и не используйте негативные слова вроде «ошибка», «неверно», «неправильно» — пишите мягко: «проверьте», «похоже, данные неполные», «чего-то не хватает». Чем спокойнее пользователь, тем быстрее он всё исправит и тем выше доля повторных попыток.

Как проверить, хорошо ли работает валидация формы?

Смотрите три метрики: общая конверсия формы, доля повторных попыток после ошибки и доля дублирующих отправок. Рост конверсии означает, что момент проверки выбран верно; рост повторных попыток после ошибки — что текст ошибки написан понятно; снижение дублирующих отправок — что защита от повторного нажатия сделана правильно. A/B-тесты можно провести отдельно: проверка при потере фокуса против проверки при отправке, конкретный текст ошибки против размытого, сохранение введённого против очистки. Каждую переменную тестируйте отдельно, каждый тест — минимум 2 недели, при недостаточной выборке выводов не делайте.

В заключение

Валидация формы и сообщения об ошибках — на первый взгляд деталь фронтенда, но на самом деле они решают, что сделает пользователь после ошибки: «исправит и продолжит» или «просто уйдёт». Если момент проверки выбран верно, пользователь не чувствует помех; если текст ошибки написан понятно, он знает, что исправить. Когда оба условия выполнены, конверсия формы вырастает на 15–25% — часто дело не в том, что пользователь не хочет заполнять, а в том, что он не понимает, где ошибка и как её исправить.

Три шага на практике: сначала смените момент проверки с «при отправке» на «при потере фокуса» — большинство полей проверяйте, когда пользователь уходит с них; затем перепишите текст ошибки с «введено неверно» на «укажите поле + объясните причину + дайте пример»; и наконец добавьте три меры защиты: сохранение введённого после отправки, автофокус на первом поле с ошибкой и защиту кнопки от повторного нажатия. Сделав эти три вещи, проверьте, выросла ли доля повторных попыток после ошибки.

Фраза, которую стоит запомнить: сообщение об ошибке в форме не говорит пользователю «вы ошиблись», а помогает ему «ввести правильное» — укажите, где ошибка, почему она возникла и как её исправить, тогда пользователь исправит и продолжит, а не закроет страницу и уйдёт.