Пропустить

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

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

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

Более Загрузка 600.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
Вместо того, чтобы кодировать каждое поле для сформировавшийся автоматически в соответствии со стандартами, которые необходимо соблюдать, активируйте автоматическое заполнение с помощью плагина для автоматического заполнения адресов. Это не только избавит вас от необходимости иметь дело с орфографическими ошибками и неправильно заполненными адресами, но также предотвратит ввод ваших посетителей большей частью этой информации.

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

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

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

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

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

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

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

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

поле с tips.png

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

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

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

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

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

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

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

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

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

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

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

Вверх
14 акции
доля8
чирикать1
Регистрация5