9 приёмов дизайна посадочных страниц, которые поднимут конверсию до небес

Вы создали замечательную, просто-таки идеальную посадочную страницу. Она убедительна и кратка. Предложение на ней попадает прямо в сердце посетителям. Вы публикуете её в Интернете и начинаете следить за потоком трафика от ваших рекламных кампаний. Через несколько дней результаты всё ещё неудовлетворительные. Конечно, показатели растут, но не такими стремительными темпами, как вам хотелось бы. Что же пошло не так? Возможно, вы посвятили время написанию текста, а про дизайн забыли? Ниже представлены девять элементов дизайна посадочных страниц, которые поднимут конверсию до небес!





1. Выбирайте контрастные цвета

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

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

Посмотрите на ту же самую страницу, только размытую, и вы поймёте, что сразу бросается в глаза:

Взгляд сразу падает на призыв к действию, да и красный текст выделяется.

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

К слову, мне не нравится, как планшеты на первом изображении смотрят в противоположную от текста сторону. Стоило бы протестировать, как изменятся показатели конверсии, если развернуть планшеты к тексту.

2. Для настоящих результатов размещайте фотографии настоящих людей

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

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

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

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

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

3. Покажите посетителям, куда смотреть

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

Смотрит ли персонаж фотографии в камеру, по направлению к тексту или от него — всё это может повлиять на то, как посетитель будет воспринимать вашу посадочную страницу.

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

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

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

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

4. Размещайте визуальные подсказки

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

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

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

5. Дизайн должен совпадать

Это был баннер рекламной кампании:

Обратите внимание на использование того же фона на их посадочной странице:

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

Совпадение дизайна означает использование одних и тех же элементов дизайна и заголовков как в рекламных материалах, так и на посадочной странице.

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

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

6. Выбирайте правильные цвета

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

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

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

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

7. Будьте наглядными

Crazy Egg использует настолько длинную посадочную страницу, что для изображения её пришлось хорошенько подрезать:

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

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

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

8. Используйте большие элементы

Хотите привлечь внимание к чему-то на вашей посадочной странице? Увеличьте это. Задача сделать этот элемент настолько большим, чтобы даже ваша бабушка смогла рассмотреть его без очков.

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

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

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

9. Примите свободное пространство

Что соединяет воедино все элементы дизайна вашей посадочной страницы? Не ещё больше шума, линий или других элементов. Это свободное пространство.

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

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

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

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

Источник: unbounce.com





Автор: Перевод: Константин Войцеховский

Забавное видео

В 2 года родители подарили малышу баскетбольное кольцо и мяч, посмотрите, что умеет этот малыш сейчас!


Нужны деньги до зарплаты?

более 30 сервисов

Кредиты онлайн на карту за 15 минут

от 0,01%

ставка

до 180 дней

макс срок

до 20 000 грн.

макс сумма