Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 701.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

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

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

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

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

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

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

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

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

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

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

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

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

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

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

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

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

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

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

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

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

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

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

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

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

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

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

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

поле с tips.png

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

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

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

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

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх