Как создать лендинг с высокой конверсией: технология, правила и примеры

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

Можно сказать, что лэндинг почти на 100% определяет успешность рекламной кампании. Хороший лендинг = хороший ROI (коэффициент возврата инвестиций). Плохой лэндинг – напрасная трата денег.

Три нерушимых правила

Правило 1: никогда не направляйте трафик с рекламы на главную страницу сайта

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

Правило 2: ясность и актуальность превыше всего

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

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

  • Есть ли тут то, что мне нужно?
  • Хватает ли мне имеющейся информации?
  • Могу ли я доверять этому сайту?
  • Сколько времени потребуется?

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

Правило 3: качественный лэндинг имеет определенную структуру

  1. Заголовок, сулящий выгоду

Если посетитель попал на сайт после клика по баннеру, то тексты лэндинга и рекламного объявления должны соответствовать друг другу. Если баннер или РРС-реклама обещают «Уникальную технику медитации», то данная фраза должна присутствовать и в заголовке лэндинга.

  1. Краткость и актуальность

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

  1. Акцентируйте внимание на одном действии, которое необходимо выполнить посетителю

Пользователь должен иметь возможность совершать лишь одно действие на странице. Чем больше опций на странице, тем ниже конверсия.

  1. Удаляйте отвлекающие навигационные ссылки

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

  1. Сделайте форму подписки или оформления заказа заметной

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

  1. Соблюдайте единообразие стиля

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

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

Четыре этапа создания лендинга

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

1: определитесь с аудиторией

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

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

2: определитесь с самым желаемым действием (MWA-действие)

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

Ну, а если вы занимаетесь продажей дешевых или простых товаров (например, вино или подписка на какое-то издание), то имеет смысл сразу переходить к непосредственной продаже. При продаже программ лучше предлагать пробные версии.

3: определитесь с посланием

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

4: придумайте дизайн лэндинга

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

Что должно присутствовать на странице:

  • заголовок, обращенный к целевой аудитории;
  • логотип компании;
  • краткое описание предложения «над линией сгиба» (линия сгиба – это часть экрана, видимая без прокрутки);
  • полное описание предложения «под линией сгиба» (зависит от сложности предложения и продукта);
  •  изображение предлагаемого продукта;
  • простая форма регистрации. В идеале с 1-3 полями (обычно это имя и почта, но действительно ли вам нужно имя?);
  • кнопка «Купить» или «Войти» (в зависимости от желаемого отклика) и ссылка на «Политику конфиденциальности» (открывайте ее во всплывающем окне, а не на новой странице – так вы сможете удержать посетителей на лэндинге).

Что лучше убрать со страницы:

  • навигационное меню. Помните, что акцент нужно делать на самом предложении;
  • ссылки на другие разделы сайта (например, «О компании»);
  • любую графику, не связанную с предложением. Иначе вы будете отвлекать посетителей от главного;
  • трудночитаемый текст. Все, что мельче 10 px, – это плохо;
  • любые ссылки из серии «чтобы подписаться, нажмите сюда» или «нажмите сюда, чтобы прочитать продолжение». Если вы не можете вместить весь контент в верхней части экрана, то пусть пользователь воспользуется прокруткой. Прокрутка – это лучше, чем переход на другую страницу;
  • громоздкие и пугающие формы с лишними полями (например, «должность», «факс» и т.д.);

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

5: собираем все воедино

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

Если лэндинг посвящен вакансиям на нефтяной вышке, то лучше выбрать адрес www.OilRigJobOffers.com или www.somesite.com/oilrigjoboffers.

Такие адреса привлекают куда больше трафика, чем стандартный переход по ссылке с РРС-рекламы в Google. Пользователь, который заходит в поисковую систему и ищет «вакансии на нефтяной вышке», с большей вероятностью откроет рекламу с ключевым словом в адресе.

Длина лэндинга

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

По мнению Боба Кемпера, на соотношение эффективности лэндинга и длины страницы влияют:

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

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

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

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

Conversion Rate Experts в разы увеличили конверсию лендинга SEOMoz, изменив лишь длину страницы:

Взгляните на страницы продуктов в Amazon – лэндинг у Kindle ОЧЕНЬ длинный. А в Amazon, как  мы знаем, тестируют все!

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

Тесты, тесты, тесты

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

Ошибки в лэндингах

Я просмотрел много целевых страниц, на которые попадал после клика по рекламе. К сожалению, идеального лендинга отыскать не удалось.

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

Университет Феникса

Что у них получилось хорошо при написании продающего текста для лендинга:

  • живой заголовок и картинки;
  • простой и четкий призыв к действию;
  • понятный брендинг.

Что лично я бы изменил или дополнительно протестировал:

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

Zoho

Что у них получилось хорошо:

  • заголовок ориентирован на выгоду;
  • социальное доказательство;
  • перечислены все главные плюсы;
  • четкий призыв к действию;
  • четкий брендинг.

Что лично я бы изменил или дополнительно протестировал:

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

CreateSpace

Что у них получилось хорошо:

  • достоинства визуально выделяются;
  • заметный призыв к действию;
  • четкий брендинг.

Что лично я бы изменил или дополнительно протестировал:

  • дизайн. Как будто новичок впервые открыл FrontPage;
  • заголовок ужасен. Нет конкретного предложения. Не стоило включать в заголовок название бренда;
  • кнопка «Получить бесплатную консультацию» открывает точно такую же форму, как и та, что справа. Зачем плодить дубли?
  • запрос на бесплатную консультацию – зачем он вообще нужен? Вместо продажи консультации они пытаются отвлечь меня бесплатными буклетами и акциями. Если я открыл этот сайт, значит, я уже хочу публиковаться!
  • слишком длинные формы;
  • я бы полностью изменил призыв к действию/предложение. Выбрал что-то связанное с публицистикой. Консультации – это лишняя морока и трата времени. Меня бы напугала агрессивная технология продаж в структуре продающего лендинга.

Allstate авто-страхование

Что у них получилось хорошо:

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

Что лично я бы изменил или дополнительно протестировал:

  • ужасная картинка. Лучше бы взяли более реальное изображение;
  • стоит доработать подпись на картинке. Фраза «важно для вас» в сочетании с изображением автомобиля мне видится как минимум странной.

Text Link Ads

Что у них получилось хорошо:

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

Что лично я бы изменил или дополнительно протестировал:

  • а что вообще делает этот сайт? Лучше написать продающий текст для лендинга с пояснениями.
  • убрал из лендинга меню.
  • удалил дополнительные призывы к действию и ссылки;
  • попробовал другой шаблон с лучше конверсией. Этот выглядит слишком громоздким. Не за что зацепиться взглядом;
  • отдельные лэндинги под каждую целевую аудиторию (издатели и рекламодатели);

Инструменты для создания лэндинга

Существует множество сервисов для создания лэндингов. Обратите внимание на следующие:

  • Unbounce – самый мощный.
  • KickoffLabs – вирусные лендинги.
  • LaunchRock – отличный вариант для лендингов-анонсов (из серии «открытие уже скоро»).

Перевод статьи “How To Build a High Converting Landing Page: Rules, Process and Critique” был подготовлен дружной командой проекта Сайтостроение от А до Я.