Как повысить заявки. Создание правильной формы заявки

В своем проекте вы всегда найдете то, что можно улучшить. Удобная контактная форма – залог успеха. Это один из важных компонентов, от которого зависит — сделает ли пользователь покупку или подпишется на обновления. Улучшать контактную форму следует в первую очередь. А как мы написали в нашей статье.
опубликовано
25 Мая 2019
читать
5 мин.
комментарии
понравилось
1
Как повысить заявки с помощью контактной формы

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

 

Клиенты не любят заполнять формы и тому есть несколько причин:

  • Заполнение – довольно длительный процесс.
  • Лень.
  • Запрос персональных данных.
  • Формы большого объема достаточно сложны для заполнения.

 

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

 

Две колонки

 

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

 Контактная форма с двумя колонками

 

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

 

Если сама форма довольно сложная, то её поля можно поделить по нескольким группам. Так пользователь сможет отдохнуть между заполнением полей.

 

Форма, разделенная группами

 

Подсказки. Где размещать?

 

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

 

Подсказки выше поля ввода

 

Подсказки над полем – типичное и очень эффективное решение. Они адаптируются под все размеры и типы экранов.

 

Подсказки выше поля ввода 

 

Подсказки слева

 

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

 

Контактная форма подсказка слева

 

Размещение внутри поля

 

Такие подсказки более удобны и популярны. Анимация может отличаться, но принцип один – после щелчка подсказка появляется выше поля, чтобы освободить пространство для ввода.

 

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

 

Контактная форма подсказка внутри поля

Плейсхолдер вместо подсказки

 

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

 

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

 

Этот метод хорошо работает в случаях, когда требуется оформление подписки.

 

Уменьшите нагрузку на форму

 

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

 

Выделение первого поля

 

Первая строка в форме должна привлекать внимание. Выделение границы этого поля поможет достичь нужного результата. Это ускорит время заполнения формы.

 

CapsLock – убрать

 

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

 

Кнопки

 

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

 

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

 

Главные действия отдельно

 

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

 

Процесс заполнения формы должен быть легким

 

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

 

Еще можно реализовать автозаполнение полей на основе местоположения, но следует оставить возможность ручной корректировки.

 

Сосредоточитесь на кнопке

 

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

 

Скрытый ввод

 

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

 

Изобретайте

 

Размер поля можно использовать в качестве подсказки, ограничивая количество символов. Такое решение применимо для полей с номерами телефона и карт.

 

Не используйте выпадающий список, если в нем только 2-3 опции. Галочки или флажки в такой ситуации справляются лучше и не раздражают пользователей.

 

Проверка формы

 

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

 

Особенности заполнения полей обозначьте заранее (например, минимальное количество символов в пароле). Для пользователя заполнение станет проще, если подсказка предупредит об этом.

 

Проверка формы

 

Разрешите проверить информацию

 

Например, для этого можно реализовать функцию «Показать пароль». Если к паролю предъявляются отдельные требования, они должны быть указаны до заполнения.

 

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

 

Добавьте авторизацию через соцсети

 

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

 

Зависимость от расположения

 

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

 

Обращайте внимание на детали данных:

 

  • У стран отличаются форматы данных.

  • США использует ZIP код, Европа — почтовый код.

  • «Штат» подходит для пользователей из США, а область и край – из России и СНГ.

 

Вывод

 

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

ТЕГИ

Похожие записи