Рынок интернет-торговли в России в первом полугодии вырос на 22%
Previous
выбрать за меня
Instagram представил ряд нововведений для рекламодателей
Next
веб дизайн, дизайн, стратегия, юзабилити, айтрекинг, айтрекинг для брендов, айтрекинг для дизайнеров, конверсия, посадочная страница, посадочные страницы, повышение конверсии, увеличение конверсии, дизайн CTA, дизайн сайта, продающий дизайн сайта
Юзабилити

Модели F и Z в дизайне посадочных страниц: секрет роста конверсии

Автор: Ия Пфанштиль13.09.2017

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

Последние несколько десятков лет исследователи активно применяли айтрекинг для выявления закономерностей перемещения взгляда посетителей по страницам в сети. В результате им удалось определить наиболее перспективные модели построения дизайна.

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

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

Некоторые техники дизайна уже неоднократно доказали свою эффективность – это использование моделей F и Z.

Как работают модели F и Z?

Посетители подсознательно используют F модель движения взгляда по странице, когда просматривают контент.

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

Вот пример F модели. Обратите внимание, как эта тепловая карта напоминает латинскую букву “F”.

веб дизайн, дизайн, стратегия, юзабилити, айтрекинг, айтрекинг для брендов, айтрекинг для дизайнеров, конверсия, посадочная страница, посадочные страницы, повышение конверсии, увеличение конверсии, дизайн CTA, дизайн сайта, продающий дизайн сайта

Z модель использует ту же визуальную иерархию, но с некоторыми отличиями.

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

На тепловых картах эта модель напоминает латинскую букву “Z”.

веб дизайн, дизайн, стратегия, юзабилити, айтрекинг, айтрекинг для брендов, айтрекинг для дизайнеров, конверсия, посадочная страница, посадочные страницы, повышение конверсии, увеличение конверсии, дизайн CTA, дизайн сайта, продающий дизайн сайта

Конечно, дизайн вашей посадочной страницы не должен четко соответствовать модели F или Z. Однако самые важные элементы: текст, призыв к действию, следует размещать в одной из этих визуальных иерархий, чтобы привлечь к ним внимание и убедить посетителей совершить действие.

Дизайн посадочной страницы и психология

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

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

Разный дизайн для разных посадочных страниц

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

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

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

Примеры дизайна

Отсутствие четкой структуры на посадочной странице может привести к тому, что посетители будут покидать ее, а не конвертироваться. Например, эта страница Analog Devices не имеет последовательной структуры:

веб дизайн, дизайн, стратегия, юзабилити, айтрекинг, айтрекинг для брендов, айтрекинг для дизайнеров, конверсия, посадочная страница, посадочные страницы, повышение конверсии, увеличение конверсии, дизайн CTA, дизайн сайта, продающий дизайн сайта

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

Лучше было бы выровнять все элементы по левому краю или по центру и выстроить иерархию по модели Z.

Ниже мы рассмотрим несколько удачных примеров дизайна посадочных страниц.

Модель F

Эта посадочная страница с предложением скачать электронную книгу от Mitel выстроена по модели F:

веб дизайн, дизайн, стратегия, юзабилити, айтрекинг, айтрекинг для брендов, айтрекинг для дизайнеров, конверсия, посадочная страница, посадочные страницы, повышение конверсии, увеличение конверсии, дизайн CTA, дизайн сайта, продающий дизайн сайта

Плюсы:

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

Что можно протестировать:

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

Эта страница Oz, посвященная вебинару, также строится на модели F:

веб дизайн, дизайн, стратегия, юзабилити, айтрекинг, айтрекинг для брендов, айтрекинг для дизайнеров, конверсия, посадочная страница, посадочные страницы, повышение конверсии, увеличение конверсии, дизайн CTA, дизайн сайта, продающий дизайн сайта

Плюсы:

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

Что можно протестировать:

Длинный текст усложняет сканирование страницы. Его следует сократить и лучше структурировать. К тому же изображение не имеет прямого отношения к контенту. Демонстрация действий или темы вебинара смогла бы увеличить число регистраций. Также CTA сливается с фоном, а текст кнопки не персонализирован. Для увеличения конверсии можно использовать другую формулировку (например, “Улучшить мой контент сейчас”) и яркий цвет.

Модель Z

Эта страница с отчетом Oracle Report строится на модели Z:

веб дизайн, дизайн, стратегия, юзабилити, айтрекинг, айтрекинг для брендов, айтрекинг для дизайнеров, конверсия, посадочная страница, посадочные страницы, повышение конверсии, увеличение конверсии, дизайн CTA, дизайн сайта, продающий дизайн сайта

Плюсы:

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

Что можно протестировать:

Можно попробовать убрать ссылки внизу страницы, чтобы увеличить показатели конверсии. Также общую формулировку “Отчет” можно заменить на “CMO отчет”.

На этой странице с отчетом PayScale также используется модель Z:

веб дизайн, дизайн, стратегия, юзабилити, айтрекинг, айтрекинг для брендов, айтрекинг для дизайнеров, конверсия, посадочная страница, посадочные страницы, повышение конверсии, увеличение конверсии, дизайн CTA, дизайн сайта, продающий дизайн сайта

Плюсы:

Контрастные цвета на этой странице привлекают внимание к основным элементам. Глаза посетителей следуют по Z траектории от логотипа к заголовку, затем к тексту и, наконец, форме и CTA. Здесь также используется указатель в виде бумажного самолетика, который привлекает внимание к заголовку. Изображение соответствует содержанию и помогает понять, чего ожидать после нажатия на кнопку “GO!”. Короткий и структурированный текст легко читается и сдержит всю необходимую информацию.

Что можно протестировать:

Сокращение числа полей в форме может помочь увеличить число скачиваний. Также можно убрать ссылки внизу страницы.

Создавайте эффективные посадочные страницы

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

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

Реакция на статью
поделюсь
0%
интересно
25%
полезно
75%
не уверен
0%
скучно
0%
где автор?
0%
Ия Пфанштиль
Перевожу и адаптирую лучшие статьи для любимых читателей.
Комментарии
Оставить отзыв

You must log in to post a comment

ПОДПИСЫВАЙТЕСЬ НА НАС!
ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
Уведомления о новостях, статьях и инфографике будут приходить раз в неделю.
  Мы ненавидим спам и никогда не разгласим ваши данные.