При ежедневной проверке сайта, помимо скорости загрузки страниц и работоспособности ссылок, стоит уделить внимание дизайну форм. Форма, которую клиент не может понять, может привести к тому, что потенциальный клиент бросит заполнение и упустит возможность. Как сделать формы на сайте более понятными? Ключ в снижении когнитивной нагрузки и создании интуитивно понятного процесса. В этой статье мы дадим рекомендации с нескольких точек зрения.
Размещайте метки над полями ввода, а не слева или внутри
Метки — самый прямой способ сообщить клиенту, что нужно ввести. Рекомендуется размещать их над полями ввода, а не слева или в качестве плейсхолдера внутри поля. Метки сверху соответствуют привычному чтению слева направо и сверху вниз, что позволяет быстро сопоставить их с полем. Метки слева требуют дополнительного движения глаз, а плейсхолдеры исчезают при вводе, заставляя клиента забыть, что нужно заполнять.
- Хорошая практика: метка сверху, поле ввода снизу, построчное расположение.
- Избегайте: серого текста-подсказки внутри поля, который исчезает при вводе.
Используйте четкие подсказки, чтобы уменьшить догадки
Для полей с требованиями к формату (например, номер телефона, email, пароль) давайте четкие подсказки рядом с полем, а не ждите, пока клиент ошибется. Например, под полем номера телефона укажите «Введите 11-значный номер», а рядом с паролем — «Не менее 8 символов, включая буквы и цифры». Это поможет клиенту заполнить форму с первого раза, повышая процент завершения.
Группируйте поля, чтобы снизить визуальную усталость
Если полей много (более 5), логически сгруппируйте их и добавьте подзаголовки. Например, регистрационную форму можно разделить на «Информация об аккаунте» и «Личные данные», а контактную форму — на «Основные контактные данные» и «Описание запроса». Группировка делает структуру страницы понятной, и клиент не испытывает стресса от множества полей.
Соответствие размера полей длине содержимого
Длина поля ввода должна намекать на ожидаемую длину содержимого. Например, поле для имени может быть коротким, для названия компании — длиннее, а для подробного адреса — еще длиннее. Такая визуальная подсказка помогает клиенту понять, сколько текста нужно ввести, избегая попыток вписать длинный текст в короткое поле.
Конкретные сообщения об ошибках, а не общие
Когда клиент допускает ошибку, сообщение не должно быть просто «Неверный формат» или «Повторите ввод». Укажите конкретную проблему, например «Номер телефона должен состоять из 11 цифр, проверьте» или «Пароль должен содержать заглавную букву». Сообщение об ошибке должно отображаться рядом с полем, а не в виде сводки вверху страницы, заставляя клиента искать, где ошибка.
Текст кнопки должен содержать четкий призыв к действию
Не используйте просто «Отправить» или «ОК» на кнопке. Укажите, что произойдет после нажатия, например «Отправить запрос», «Записаться на демо», «Попробовать бесплатно», «Получить предложение». Четкий призыв к действию помогает клиенту понять, что он получит, снижая нерешительность.
Различайте обязательные и необязательные поля
Отмечайте обязательные поля звездочкой (*) и укажите вверху формы «* — обязательное поле». Рекомендуется отмечать только обязательные поля, чтобы не перегружать форму. Некоторые формы делают все поля обязательными, что повышает психологический барьер. В зависимости от бизнес-потребностей некоторые поля, такие как «Размер компании» или «Должность», можно сделать необязательными.
Адаптация под мобильные устройства так же важна
Сегодня многие клиенты просматривают сайты с телефонов. Если форма на мобильном устройстве отображается некорректно, кнопки слишком малы, а поля не вызывают правильную клавиатуру (например, цифровую для номера телефона), опыт заполнения будет ужасным. При проверке сайта обязательно тестируйте форму на устройствах разного размера, чтобы обеспечить удобство на мобильных.
Регулярно проверяйте обратную связь после отправки формы
После отправки формы страница должна дать четкую обратную связь: успешно ли отправлена форма или произошла ошибка. На странице успеха можно показать благодарность и сообщить о времени обработки; на странице ошибки — указать конкретную проблему. Многие сайты после отправки не меняют страницу или перенаправляют на пустую страницу, оставляя клиента в неведении — такой опыт следует избегать.
В итоге, ключ к понятным формам на сайте — это взгляд с точки зрения пользователя: меньше размышлений, меньше ввода, меньше ошибок. При ежедневной проверке сайта попробуйте представить себя новым клиентом и заполните форму шаг за шагом, оценивая, насколько плавен процесс. Обнаружив проблемы, сразу вносите коррективы — это обычно значительно повышает конверсию форм.
