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

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

Есть много вещей, которые могут пойти не так.

Правила 5 для построения идеальной контактной формы

Исследование Google по отслеживанию взгляда, опубликованное в 2014 году, показало, что соблюдение самых основных правил использования для дизайна формы значительно улучшит пользовательский опыт. В частности, когда контактная форма соответствует всем правилам, 78% пользователей могут заполнить и отправить ее с одной попытки. Однако, когда контактная форма нарушает эти правила, только 42% могут сделать это с одной попытки.

Интересно, что это за правила? Так что продолжайте читать.

Правило # 1: сосредоточьтесь на выравнивании

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

Вы можете увидеть форму, как это на сайте BrainTraffic и думаю: Хммм ... но не это немного слишком долго, чтобы закончить?

заполните форму form.png

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

Если ты хочешь формы контакты соответствуют стандарту центровки, вот что вам нужно сделать:

  • Выровняйте по левому краю все ярлыки, поля формы и основную кнопку с призывом к действию.
  • Никогда не выравнивайте связанные поля по горизонтали. Вы можете структурировать форму логически, но каждый вопрос или поле должны быть уложены вертикально.
  • Любое поле с несколькими вариантами ответов (с менее чем шестью вариантами) должно отображаться в вертикальном списке точек или флажков, а не в раскрывающемся меню.

Правило 2: включите все соответствующие поля

Когда дело доходит до проектирования контактных форм, вы можете подумать, что лучше больше коротко, не так ли? Это не всегда так. Главное, чтобы вы предоставили пользователям все необходимые и актуальные поля.

Майкл Агард, старший оптимизатор конверсий для Unbounce, сделал презентация в 2015 году, в котором рассматривалась эта проблема. Он и его команда хотели знать, что произойдет, если они сократят эту контактную форму:

пример контактной формы court.png

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

Правило № 3: упрощать поля

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

Вот некоторые приемы, которые вы должны знать:

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

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

поля форматирования html.png

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

Правило № 4: выход из всех

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

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

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

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

Ошибка формы wordpress.png

Правило № 5: не скрывайте совет

Текст доски объявлений в контактной форме выглядит так:

поле с tips.png

Посмотрите, как Target размещает метки в поле? В некоторых контактных формах эти метки / обозначения просто исчезают, когда пользователь нажимает на поле. Цель обрабатывает это немного иначе и перемещает метку в верхнюю часть поля поля (см. «Адрес электронной почты»).

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

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

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

Вот и все, что касается этих советов, я надеюсь, что они помогут вам улучшить контактные формы.