Дизайн форм: советы и рекомендации по улучшению конверсий и UX

В настоящее время пользователи все больше полагаются на простой дизайн формы.

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

В настоящее время пользователи все больше полагаются на простой дизайн формы.

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

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

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

Лучшие образцы дизайна

1.Меньше - больше.

Мы все были в этой ситуации - вы все готовы проверить, а затем вы видите поля формы и думаете: «У меня нет времени на это. Может, я вернусь к этому позже».

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

Imagescape смог увеличить коэффициент конверсии на 120%, просто уменьшив свои поля форм от 11 до 4. Если вас интересует реальная конверсия сайта и способы её улучшения, тогда опыт Imagescape следует непременно взять на вооружение, а также ускорить загрузку страниц сайта.  

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

2.Используйте один столбец, а не два.

Если вы раздумываете между одним столбцом для полей формы или двумя, выберите один.

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

3. Формы следует упорядочить от простейших до сложнейших.

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

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

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

4.Используйте встроенную проверку поля формы.

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

Как сообщал Институт Баймарда, в 2012 году только 13% проверок имели встроенную валидацию - в 2016 году это число выросло до 60%. По мере того, как ваши конкуренты начнут реализовывать схожую стратегию, станет еще более важно, чтобы вы включили встроенную проверку формы.

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

Например, проверьте форму оплаты Wayfair - когда пользователь вводит неправильный номер кредитной карты, он немедленно уведомляет его, сохраняя при этом необходимость повторного заполнения всех последующих полей после нажатия «Сохранить и продолжить».