ОБУЧАЮЩИЙ МАТЕРИАЛ
ФИШКИ И СЕКРЕТЫ ИНТЕРНЕТ-МАРКЕТИНГА
БОНУСЫ: ЧЕК-ЛИСТЫ, БРИФЫ, ТЗ
База знаний, наш опыт и новости
Читай наш блог и подписывайся на страницу в Facebook и Instagram,
чтобы не пропустить новый материал

Структура правильной Landing Page и виды функциональных блоков

24.10.2019
Интернет-маркетинг
Автор: Оксана Павлюк
764
2+

Правильная Landing Page вовлекает и проводит пользователей к целевому действию. Здесь важно все: этап подготовки (анализ целевой аудитории и конкурентов), разработка прототипа, текст, дизайн, последовательность расположения блоков.

Все это должно быть единой понятной и убеждающей системой. В этой статье мы подробнее остановимся на структуре Landing Page и ее функциональных блоках.

1.Что такое Landing Page?

2.Структура лендинг пейдж

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

Что такое Landing Page?

В соответствии с Википедией Landing Page (в переводе с англ. целевая страница) – web-страница, основная задача которой состоит в сборе контактных данных потенциальных покупателей (клиентов).

В моем же понимании Landing Page – страница, созданная для продажи товара или услуги, на которой есть кнопки с формами захвата. Задача лендинга – вовлечь пользователя, дать полную информацию о продукте, развеять страхи и сомнения покупателей и мотивировать к целевому действию.

Как правило, на Landing Page настраивают и включают контекстную или таргетированную рекламу в Facebook и Instagram. Также возможно SEO-продвижение лендинга, если вы создадите еще блог и другие дополнительные страницы. Но тогда, по сути, уже получается полноценный сайт, где некоторые страницы созданы в виде Landing Page.

Структура лендинг пейдж

При разработке Landing Page чаще всего, используются две модели вовлечения пользователя во взаимодействие с сайтом (процесс покупки товара, заказа услуги, подписки на рассылку и пр.) – это AIDA («внимание → интерес → потребность → действие») и PMPHS («боль → больше боли → надежда → решение»).

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

Создаем первый экран

Разрабатывая структуру лендинг пейдж, стоит вспомнить закон Парето или принцип 20/80 (20% усилий дают 80% результата, а остальные 80% усилий – лишь 20% результата). Этот закон полностью применим при оформлении первого экрана лендинга – той части страницы, которая доступна пользователю без скроллинга.

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

Поэтому важно, чтобы первый экран Landing Page без прокрутки содержал самую важную (ключевую) информацию для посетителя:

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

Теперь давайте рассмотрим каждый пункт подробнее.

Имиджевое/атмосферное изображение

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

Рассмотрим это положение на примере сайта агентства интернет-маркетинга Textum. У нас на первом экране расположены: хедер, меню, тематические изображения на фоне, логотип.

А этот пример взят с сайта Mindvalley – одного из крупнейшего в мире университета инновационного образования. И, конечно же, он приведен неспроста: мне как автору интересна эта сфера деятельности. На сайте Mindvalley представлено видео с ключевыми моментами из мероприятий сообщества, меню, логотип, заголовок и подзаголовок. В видео есть «крючки» для широкой целевой аудитории. Далее в тексте я еще покажу примеры с этого сайта.

А это пример описания с фото:

А теперь остановимся подробнее на каждом элементе, используемом на первом экране.

Хедер – здесь у нас находятся контактные телефоны и кнопка «Закажите звонок». В шапке сайта можно указать и любые другие способы связи. Наличие контактов на лендинг пейдж повышает доверие пользователей к компании.
Меню – если у вас всего одна целевая страница, то оно не нужно. У нас так и было – сначала была одна страница, оптимизированная под продающий копирайтинг, потом мы создали лендинг пейдж под каждую из своих услуг, а затем сделали полноценный сайт. Хедер и меню у нас закреплены и при скроллинге страницы они всегда находятся в поле видимости.
Логотип – у нас находится на фоне, его можно располагать и в меню. Для тех, кто не знает, лого – эмблема, символ или графический знак, который используется в корпоративном стиле компании и формирует зрительную узнаваемость бренда.
Тематические изображения/фон или видео – можно создать вариант, как у Textum, или же задействовать качественную фотографию или небольшое видео. Здесь есть важный момент: текст должен хорошо читаться на фоне.

Заголовок + подзаголовок

Это оффер, который должен:

  • быть конкурентоспособным;
  • передавать суть бизнеса;
  • рассказывать о выгодах для пользователей;
  • косвенно отображать преимущества товара (услуги).

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

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

Форма захвата с призывом к действию

На первом экране важно разместить не просто кнопку, а именно форму заявки с призывом к действию (Call-To-Action или CTA). Призыв к действию должен быть понятным, привлекательным и нести ценность для посетителя, чтобы побудить заполнить и отправить заявку.

Примеры хорошего CTA:

  • Для начала скачайте бриф – И начните работу с нами;
  • Получить консультацию – Отвечу в течение двух часов;
  • Скачайте наш чек-лист – В нем вы найдете еще 132 критерия качества, по которым мы проверяем свою работу;
  • Скачать прайс-лист с ценами – Ознакомьтесь с полным перечнем услуг и их стоимостью;
  • Проверьте качество текста – Узнайте, сколько денег вы недополучаете.

Более эффективно, когда CTA дополнен текстом сверху и ниже кнопки, как в примерах выше.

Важно: кнопка с призывом к действию должна быть контрастной к фону, заметной, а при нажатии на нее – открываться форма.

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

Хороший пример: если на кнопке призыв к действию «для начала скачайте бриф», то логично, что последующий шаг – скачать бриф.

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

Форма – элемент, в которую пользователь вносит необходимые вам контактные данные. Она состоит из:

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

Часто на первом экране не делают кнопку с призывом к действию, а размещают стрелку вниз, мотивируя скроллить страницу дальше.

Триггеры (блок доверия / убеждения) или тройная (условно) гарантия

Данные триггеры «тройной гарантии» чаще всего используется на первом экране в нижней части после основного оффера и CTA (призыва к действию).

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

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

Вот как это сделали мы:

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

Рассказываем о проекте и выгодах

Далее все авторитетные источники, например, конструктор Landing Page Tilda рекомендуют рассказать о проекте, а именно:

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

Для этого можно использовать блоки:

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

Далее остановимся подробнее на каждом из видов блоков.

Описание проекта

Чтобы показать товар/услугу, можно использовать:

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

Пример на картинке ниже:

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

Представляем преимущества или выгоды

Здесь стоит визуально, с помощью текста показать, почему ваш продукт уникален, какие у него есть «фишки», почему потребителю стоит его приобрести. Важно хорошо отличать преимущества и выгоды. Первые отображают характеристики продукта (услуги), а вторые показывают то, что получит именно клиент.

Обычно преимущества (выгоды) представляют небольшими описаниями и иллюстрациями. Пример с сайта Textum представлен выше, а сейчас посмотрим, как он выглядит на web-проекте университета Mindvalley.

Итак, выделю главное:

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

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

Целевая аудитория

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

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

Команда

Люди доверяют бренду, когда видят, кто именно задействован в производственном процессе. Вот как этот блок представлен у нас:

Здесь важно, чтобы фото и описания были сделаны в едином стиле.

Текстовые описания на сайте агентства интернет-маркетинга Textum условно разделены на три части:

  1. фамилия и имя;
  2. опыт работы и должностные обязанности;
  3. ключевые навыки специалиста.

Конечно, здесь можно экспериментировать, но не делайте описания объемными.

Этапы работ

Это может быть вертикальная или горизонтальная схема. У нас на сайте задействована вертикальная:

В этом блоке мы используем уникальные иконки и небольшие описания.

Тарифы

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

Вот пример:

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

Создаем блоки доверия

В этой части Landing Page можно представить:

  • отзывы;
  • гарантии и сертификаты;
  • примеры работ (успешные кейсы);
  • партнеров;
  • часто задаваемые вопросы.

Остановимся детальнее на каждом функциональном блоке.

Отзывы

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

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

Еще одно возможное решение – объединить данный блок с примерами работ, разместив отзывы под каждым реальным кейсом. Как это сделано на нашем сайте на странице Услуги.

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

Гарантии и сертификаты

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

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

Примеры работ (успешные кейсы)

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

Это лучший способ подтвердить свою экспертность в определенной области. Но примеры работ должны быть представлены правильно и содержать:

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

Визуально этот блок не должен быть перегружен текстом.

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

Другой вариант визуализации – демонстрация работ по принципу «Было/Стало» с той же информационной «начинкой».

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

Партнеры

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

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

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

Часто задаваемые вопросы

Блок ЧАВО (подборка советов по той или иной теме) применяется в нишах, где много дополнительных характеристик и факторов, влияющих на процесс принятия решения покупателем.

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

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

Этот блок не только позволяет развеять страхи и сомнения целевой аудитории, но является отличным инструментом для SEO-продвижения. Включив в вопросы и ответы ключевые слова, можно продвинуть Landing Page в топ по среднечастотным и низкочастотным запросам. Но это, конечно, при условии, что работы по раскрутке сайта ведутся комплексно. Помимо этого, Google часто использует вопросы и ответы при формировании нулевого сниппета и выдачи в голосовом поиске.

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

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

Мотивируем к целевому действию

Это последние экраны лендинг пейдж. Здесь используются:

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

Подробнее о каждом из них.

Блок с подарком

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

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

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

Пример реализации этого блока на сайте агентства интернет-маркетинга Textum:

Акция и ограничитель по времени

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

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

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

Например, успейте заказать сейчас или оставить заявку, потому что: 1) осталось 10 мест на курс; 2) первым 100 участникам предлагаем скидку 500 грн.

Контакты

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

Другой плюс идентификации – использовать преимущество удобного расположения.

Желательно, чтобы контактная информация содержала как можно больше способов коммуникации (телефон, почта, skype, viber и пр.) и режим работы организации для удобства, опять же, пользователей.

В заключение добавлю, что цена хорошего лендинга составляет от 1000 у. е. и включает работы: маркетолога, дизайнера, копирайтера и программиста. Но стоимость и усилия по созданию Landing Page окупаются быстро. При правильно настроенных рекламных кампаниях и SEO-продвижении этот инструмент будет генерировать продажи круглосуточно много лет подряд.

Автор: Оксана Павлюк