Как оптимизировать лид-форму за 10 минут?

D0-9A-D0-B0-D0-BA-D0-BE-D0-BF-D1-82-D0-B8-D0-BC-D0-B8-D0-B7-D0-B8-D1-80-D0-BE-D0-B2-D0-B0-D1-82-D1-8C-D0-BB-D0-B8-D0-B4-D1-84-D0-BE-D1-80-D0-BC-D1-83-D0-B7-D0-B010-D0-BC-D0-B8-D0-BD-D1-83-D1-82

Лид-формы окружают нас везде — в интернет-магазинах (корзина, регистрация, оплата), на автономных лендингах, SaaS-платформах (создание тестовых аккаунтов), мобильных приложениях, социальных сетях — буквально повсюду! Во время online серфинга мы постоянно передаем информацию ресурсам, в услугах которых заинтересованы.

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

Попробуем произвести «срочный ремонт» конверсии, пользуясь приемом группировки элементов с помощью пробелов.

Представим, что нам предстоит заполнить вот такую лид-форму:

Как оптимизировать лид-форму за 10 минут?

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

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

Совет 1. Поместите название ближе к соответствующему текстовому полю

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

Объекты, расположенные рядом друг с другом, воспринимаются как связанные между собой.

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

Как оптимизировать лид-форму за 10 минут?

Принцип размещения логически взаимосвязанных элементов ближе к друг другу не нов — на самом деле это так называемый «закон близости» (Law of Proximity), позаимствованный дизайнерами из гештальт-психологии (Gestalt psychology).

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

Теперь взгляните на рисунок ниже: что и в каком количестве вы видите?

Как оптимизировать лид-форму за 10 минут?

Вместо 20 отдельных точек мы видим 2 их группы — из 12 и 8 точек. Это обычный паттерн восприятия нашим сознанием визуальной информации и еще один пример выполнения «закона близости». Основываясь на этом же Gestalt-принципе, мы резонно можем предположить, что пользователи могут упустить существующую логическую связь между элементами целевой страницы, если они расположены слишком далеко друг от друга.

Совет 2. Группируйте взаимосвязанные элементы

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

На практике это выглядит так — слева оригинал от Walgreens, справа — оптимизированный через группировку вариант:

Как оптимизировать лид-форму за 10 минут?

«Отремонтированную» лид-форму (справа) заполнить проще: посетитель воспринимает ее как 3 короткие.

Увеличение пробелов между элементами делает эту «портянку» из 15 полей менее пугающей, следовательно, повышает шансы на то, что она будет заполнена: после оптимизации пользователь видит вроде бы 3 лид-формы из 4-6 полей. Заголовки для каждой группы далеко не обязательны, однако они могут помочь вам обеспечить нужный контекст восприятия отдельных блоков.

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

Примечание: обратите внимание на название полей

В примере лид-формы Walgreens названия текстовых полей (метки) размещены правильно: слева от полей, «по направлению взгляда читателя-европейца», другими словами, в соответствии с F-образным паттерном чтения web-страницы. В соответствии с этой моделью восприятия — а она неоднократно была подтверждена на практике — размещение меток справа от этих элементов затруднит «сканирование» пользователем лид-формы в целом, а заполнение потребует двойных усилий — сперва прочесть слева направо строку до конца, а затем еще раз вернуться к ее началу для заполнения.

Как оптимизировать лид-форму за 10 минут?

На этой форме отсутствует явная связь между полем и его названием из-за слишком большого расстояния

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

Размещение меток внутри текстовых полей ни в коем случае не является панацеей, хотя и очень распространенный прием. Не поддавайтесь этому соблазну — дело в том, что при размещении названия внутри строки, оно исчезает по мере введения текста, т. е. пользователь должен помнить, какое поле он заполняет. Это вызывает реальные проблемы в том случае, если человек пользуется клавишей «Tab» для перемещения по лид-форме: он не глядя устанавливает курсор в новом поле, тем самым автоматически удаляя название, и так и не узнав, какая от него требуется информация.

Исключением в этом случае будут короткие (2-3 поля) формы лидогенерирующих лендингов, где человек с легкостью запомнит, какую информацию и куда вводить.

Вывод

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

Не принимайте все на веру — тестируйте, друзья!

По материалам nngroup.com