Лид-формы окружают нас везде — в интернет-магазинах (корзина, регистрация, оплата), на автономных лендингах, SaaS-платформах (создание тестовых аккаунтов), мобильных приложениях, социальных сетях — буквально повсюду! Во время online серфинга мы постоянно передаем информацию ресурсам, в услугах которых заинтересованы.
Практикующих интернет-маркетологов не нужно лишний раз убеждать в критической важности оптимизации лид-формы как одного из основных элементов, отвечающих за конверсию пользователя. К тому же оптимизация формы через улучшение ее юзабилити — несложный и эффективный способ оптимизации конверсии всей целевой или товарной страницы.
Попробуем произвести «срочный ремонт» конверсии, пользуясь приемом группировки элементов с помощью пробелов.
Представим, что нам предстоит заполнить вот такую лид-форму:
При взгляде на нее неизбежно возникает секундное замешательство, поскольку сразу не понятно, какую информацию нужно вносить в каждое поле. Хорошо известно, что малейшее колебание пользователя может драматически снизить конверсию лендинга — следовательно, падает число лидов и потенциальных продаж.
Люди, заинтересованные в вашем оффере, должны иметь возможность заполнить online форму быстро и без путаницы. Вашему вниманию предлагаются две техники использования пробелов для оптимизации конверсии.
Совет 1. Поместите название ближе к соответствующему текстовому полю
В первом примере одинаковое расстояние между названиями полей или, как их еще называют, метками и самими полями затрудняет понимание того, какую информацию куда именно надо вносить. Это очень часто встречающаяся ошибка в проектировании лид-форм, избежать которой нетрудно, просто всегда нужно помнить, что:
Объекты, расположенные рядом друг с другом, воспринимаются как связанные между собой.
Как хорошо видно из примера ниже, поместив метки ближе к соответствующим элементам, мы устранили всякие сомнения в назначении каждого из них:
Принцип размещения логически взаимосвязанных элементов ближе к друг другу не нов — на самом деле это так называемый «закон близости» (Law of Proximity), позаимствованный дизайнерами из гештальт-психологии (Gestalt psychology).
Последователи этой школы всегда живо интересовались вопросом, почему и как мозг воспринимает объект как нечто целое, а не сумму разрозненных частей. Гештальт-психологи сформулировали несколько законов, объясняющих, как люди мысленно организуют визуальную информацию при восприятии ее. «Закон близости» относится к их числу.
Теперь взгляните на рисунок ниже: что и в каком количестве вы видите?
Вместо 20 отдельных точек мы видим 2 их группы — из 12 и 8 точек. Это обычный паттерн восприятия нашим сознанием визуальной информации и еще один пример выполнения «закона близости». Основываясь на этом же Gestalt-принципе, мы резонно можем предположить, что пользователи могут упустить существующую логическую связь между элементами целевой страницы, если они расположены слишком далеко друг от друга.
Совет 2. Группируйте взаимосвязанные элементы
Длинные формы с множеством полей действуют на посетителя угнетающе. Облегчить восприятие и упростить заполнение такой формы можно при помощи группировки логически связанных элементов: например, поля «имя» и «дата рождения» будут тогда отнесены к разделу «Персональная информация», в то время как «адрес» и «номер телефона» сформируют группу «Контактная информация».
На практике это выглядит так — слева оригинал от Walgreens, справа — оптимизированный через группировку вариант:
«Отремонтированную» лид-форму (справа) заполнить проще: посетитель воспринимает ее как 3 короткие.
Увеличение пробелов между элементами делает эту «портянку» из 15 полей менее пугающей, следовательно, повышает шансы на то, что она будет заполнена: после оптимизации пользователь видит вроде бы 3 лид-формы из 4-6 полей. Заголовки для каждой группы далеко не обязательны, однако они могут помочь вам обеспечить нужный контекст восприятия отдельных блоков.
По возможности старайтесь не использовать такие «эмиграционные анкеты» — по-другому и не скажешь — особенно если запрашиваемая информация вам не нужна прямо сейчас.
Примечание: обратите внимание на название полей
В примере лид-формы Walgreens названия текстовых полей (метки) размещены правильно: слева от полей, «по направлению взгляда читателя-европейца», другими словами, в соответствии с F-образным паттерном чтения web-страницы. В соответствии с этой моделью восприятия — а она неоднократно была подтверждена на практике — размещение меток справа от этих элементов затруднит «сканирование» пользователем лид-формы в целом, а заполнение потребует двойных усилий — сперва прочесть слева направо строку до конца, а затем еще раз вернуться к ее началу для заполнения.
На этой форме отсутствует явная связь между полем и его названием из-за слишком большого расстояния
Если для вас важна длина, то вы можете разместить метки слева от текстовых полей. Однако убедитесь, что они имеют приблизительно одинаковую длину и расположены как можно ближе к полям. Если названия сдвинуты слишком далеко влево, пользователю будет трудно правильно связать их с маркируемыми объектами.
Размещение меток внутри текстовых полей ни в коем случае не является панацеей, хотя и очень распространенный прием. Не поддавайтесь этому соблазну — дело в том, что при размещении названия внутри строки, оно исчезает по мере введения текста, т. е. пользователь должен помнить, какое поле он заполняет. Это вызывает реальные проблемы в том случае, если человек пользуется клавишей «Tab» для перемещения по лид-форме: он не глядя устанавливает курсор в новом поле, тем самым автоматически удаляя название, и так и не узнав, какая от него требуется информация.
Исключением в этом случае будут короткие (2-3 поля) формы лидогенерирующих лендингов, где человек с легкостью запомнит, какую информацию и куда вводить.
Вывод
Пользователи не горят энтузиазмом, увидев перед собой длинную лид-форму, но существуют отрасли бизнеса, где без этой пресловутой «портянки» никак не обойтись — финансы и кредиты, здравоохранение, инновации, высокие технологии и т. д. Остается одно — максимально упрощать процесс ввода данных. Незначительные изменения — использование пробелов для группировки логически связанных элементов, установление прочной связи между заголовком и текстовым полем — могут значительно увеличить юзабилити лид-формы, а следовательно, и конверсию вашего ресурса.
Не принимайте все на веру — тестируйте, друзья!
По материалам nngroup.com
