Советы по улучшению дизайна контактной формы

Женщина заполняет контактную форму на сайте

Давайте рассмотрим, как сделать контактную форму наиболее эффективной.

Лучшая конструкция контактной формы начинается с удобства использования. Цель формы очевидна: Вам нужна информация от пользователя. Форма должна быть достаточно интуитивно понятной, чтобы пользователи точно знали, что делать и не отвлекались в процессе выполнения этого действия.

К счастью, у нас есть несколько советов, которые помогут Вам создать прекрасные контактные формы.

Как лучше сделать контактную форму

Сделать одним столбцом

Вертикальные формы хорошо работают, потому что пользователи привыкли к прокрутке. Это упрощает просмотр начала и конца формы.

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

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

Логическая группировка содержимого

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

Поместите надписи над полями ввода

Большинство инструментов построения форм дают Вам множество возможностей для размещения меток или всплывающих подсказок. Не поддавайтесь соблазну проявлять чрезмерное творчество и размещайте надписи над полем ввода информации. Это наиболее распространенное и удобное размещение ярлыков.

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

Не просите слишком много информации

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

Сделайте кнопку очевидной

Кнопка должна быть хорошо видна, поэтому выделите её подходящим Вашему дизайну цветом. Убедитесь, что надпись внутри кнопки сообщает пользователю, что именно происходит при нажатии.

Бонусный совет: если Вы используете капчу или другой тип проверки, поместите её между последним полем в форме и кнопкой отправки. И не забудьте вывести на экран сообщение о том, что форма успешно отправлена.

Используйте соответствующие типы полей

Сопоставьте тип поля с собираемыми данными, чтобы пользователям было легче заполнять формы.

Проводите проверку данных, где это возможно

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

Абсолютно каждый сайт нуждается в формах для большего взаимодействия с посетителями. Мастера компании Webchikof квалифицированно окажут Вам помощь в создании и настройке контактных форм Вашего сайта.

Добавить комментарий


Мы в социальных сетях

Подписивайтесь и следите за нашими акциями и новостями