10 правил оформления онлайн-заявок

4 мин.
14580
Команда AskUsers
Команда AskUsers
16 апреля 2024 • 4 мин.
Содержание

Вам остается только прочитать их, проверить у себя и увеличить число своих заказов!

Заказать юзабилити-аудит сайта CTA-баннер.png

Все заголовки полей и placeholders должны быть в одном стиле

Шрифт, размер шрифта и цвет текста у всех заголовков должны быть одинаковыми. Недопустимо использование в формах заявки различного сочетания заглавных и строчных букв для одного типа заголовков. То же самое касается и плейсхолдеров.

оформление заголовков полей в онлайн заявке

Понимание того, какое поле заполняется

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

выделение рабочей области

Обязательные поля

Если все поля обязательны к заполнению, то звездочки ставить не нужно. Если не все поля обязательные, то к звездочке нужна приписка: «обязательные поля».

Обозначение обязательных полей

Размер полей

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

Размер полей

Возможность заполнение информации в удобном формате

Пользователь должен иметь возможность ввести данные в любом удобном ему формате или иметь четкое понимание, в каком формате их необходимо вводить.

удобный формат

Уведомление о неправильном заполнении

Уведомление о некорректном заполнении полей должно иметь подсказку о том, почему данное поле заполнено неправильно. Сама подсказка должна располагаться возле этого поля, а не в другой части онлайн-формы.

Валидация

Сохранение заполненной информации

При нажатии на кнопку «отправить» или переводе курсора в другое поле все заполненные данные должны сохраняться, даже если заполнены некорректно - чтобы пользователю не пришлось вводить их заново. Достаточно указать на некорректное заполнение конкретных полей. Автоматическая подстановка данных

Невалидные данные

Автоматическая подстановка данных

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

Подстановка данных

Лишние поля снижают конверсию

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

Меньше полей

Уведомление об отправке

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

И бонус! Еще 2 совета от маркетологов

Данные советы стоит применять не всегда и везде, а по ситуации.

Живой язык общения

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

Обращение к пользователю

Автосохранение данных

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

Автосохранение информации

Казалось бы эти 10 правил — очень просты и понятны. Но, увы, у большинства сайтов, встречаются именно эти ошибки в оформлении и работе online-форм отправки сообщений. Соблюдение этих правил поможет «залатать основные дыры» в этом месте воронки продаж и улучшить конверсию!

Проверьте свои формы заявок на предмет нахождения описанных выше ошибок заказав usability-аудит интернет-магазина. Кто считает, что у них все отлично с онлайн-заявками, кидайте в комментарии url страниц с заявками в качестве примера. По нашей практике таких форм не очень много.

Понравилась статья? Жмите лайк или подписывайтесь на рассылку.

А также поделитесь статьей с друзьями в соцсетях.

Команда AskUsers
Команда AskUsers
Популярные статьи