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

Недавние исследования показали, что 34% маркетологов не знают основные правила увеличения конверсии заполнения веб форм.

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

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

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

Эти открытия все пришли из А / B тестов, что я вам и рекомендую. Еще один научный метод, который можно использовать, спросите пользователей которые отказались заполнять вашу форму.

Вот наиболее популярные ответы пользователей:

  1. «Форма не оптимизирована для мобильных устройств»
  2. «Нет никакой последовательности вводимой информации, что очень раздражает. Целевая страница не должна полностью отличается от того, что обещает ваша онлайн форма»
  3. «Слишком много полей»
  4. «Поля установлены как обязательные, которые не могут рассматриваться в качестве таковых пользователем»

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

Как усовершенствовать свои веб-формы?

#1 — Место размещение онлайн-форм

Где вы размещаете свои онлайн-формы может иметь большое влияние на количество людей, которые их заполнит. 24% маркетологов говорят, что они в настоящее время размещают их на основных страницах сайтов. Только 3% заявили, что разметили свои формы в блоге.

В конце прошлого года, Backlinko сделало одно простое изменение. Они добавили контакт-форму в середине своего блога. Результатом стало увеличение на 785% в конверсии! В настоящее время приходится 30% их подписчиков пришли именно с таких форм.

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

#2 — Влияние цвета

Цвет формирует все виды решений, от того, как мы чувствуем до того что мы покупаем. Например, знаете ли вы, что:

Люди делают подсознательные суждения о продуктах в течение 90 секунд после просмотра, и что до 90% их оценок основаны на одном только цвете?

  • Фиолетовый является одним из самых любимых цветов среди женщин — и самым ненавистным среди мужчин?
  • Зеленый заставляет людей чувствовать себя спокойно;
  • красный заставляет захотеть купить;
  • синий зарождает чувство доверия;
  • черный испускает ауру силы и утонченности?

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

«Но как?», вы скажете: «Я же не дизайнер. У меня нет времени, чтобы изучить, какие схемы и контрасты будут влиять на поведения пользователей. Именно поэтому существуют такие инструменты, как Adobe Color CC и Paletton. Вы можете просто ввести один цвет, чтобы ознакомится с различными схемами и палитрами, которые автоматически сгенерируются.

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

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

#3 — Шрифты

Верьте или нет, шрифты, которые вы выбираете для вашей онлайн-формы играют большую. Один из экспериментов с участием 45000 читателей New York Times проливает некоторый свет на то, какое значение они могут оказывать. Автор Эррол Моррис призвал читателей принять участие в опросе, где их спрашивали согласны ли они с конкретными научными теориями.

Дело в том, Морриус на самом деле не волновало, согласны они или не согласны. Он просто хотел узнать, будет ли решения зависеть от типографики, и они были. Опрос показал статистически более вероятное согласие с утверждением, когда оно был представлено в Baskerville, чем когда оно было написано в других шрифтах, включая популярные Georgia, Helvetica и Trebuchet.

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

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

#4 — Поля

В недавнем отчете « Form Conversion Report», пришли к важному выводу — тип формы который вы используете непосредственно влияет на количество полей которое не будет отталкивать пользователей. Онлайн-формы имеют средний коэффициент конверсии 17% с 11 полями, а формы включавшие 10 полей и имеют уже 35%.

Решите, сколько деталей вам действительно нужно. Если есть сомнения, устранить поле. Меньшее количество полей может привести к увеличению конверсии.

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

#5 — Мобильная адаптация

Люди могут полностью сосредоточиться на одной онлайн активности в течение восьми секунд, прежде чем отвлечся. Почему? Из-за мобильных устройств. Это плохая новость. Что хуже? В среднем 60% веб-трафика происходит на смартфонах.

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

Отлично. Достаточно. Что действительно важно то, что вы должны сделать, чтобы исправить это. Во-первых, выясните, какие конкретные устройства у вашей целевой аудитории. Вы можете это быстро сделать в Google Analytics, перейдя в аудитории> Мобильные устройства> Устройства:

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

Вот краткий перечень основных элементов для проверки:

  • Ясно ли, какие поля являются обязательными? (Если нет, добавьте цветовой контрастности.)
  • Сколько секунд нужно, чтобы заполнить форму? (Если больше, чем восемь, решить, какие поля вы можете убрать.)
  • Легко ли читать названия полей? (Нет? Вам нужно увеличить размер шрифта.)
  • Является ли кнопка действия видна каждый раз, когда вы поворачиваете устройство? (Это, вероятно, может быть исправлено в CSS.)
  • Выглядит ли форма аккуратно на всех устройствах?

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

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