Разборы

Структура лендинга. Из чего состоят посадочные страницы

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

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

Например, у цветочного магазина акцент будет на блоках с галереей фотографий, а у логистической компании — на описании процессов и отзывах крупных клиентов.

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

Обложка с иллюстрацией и заголовком

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

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

pic
Обложка курсов английского в Telegram. Под заголовком дают пояснение о форматах обучения (teleeng.ru)
pic
Первый экран сайта фуд-фотографа (svetlana-gabiieva.com)

Рассказ о продукте

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

О проекте / продукте

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

pic
Сайт «Космической робототехники»: описание программы (iu.education)

Кстати, в конструкторе Unisender Business можно сделать продающий лендинг быстро и бесплатно. Используйте готовые инструменты: шаблоны страниц, встроенные email-рассылки, чат-боты, онлайн-запись, аналитику.

Кому подойдет продукт

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

pic
Короткое описание потребностей (болей) потенциальных клиентов (teleeng.ru)

Фото, видео

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

Сфера fashion: много фотографий, передающих эмоции и образ бренда (monochrome.ru)
Сфера fashion: много фотографий, передающих эмоции и образ бренда (monochrome.ru)

Выгоды для клиента

Потенциальному покупателю нужна «дырка в стене, а не дрель».

Преимущества

Наполнение этого блока — конкретные, емкие, осязаемые выгоды. Если возможно — с цифрами. Продукт описывают глазами клиентов: что важно именно им, а не создателю.

pic
Наглядные преимущества сервиса в сравнении с конкурентами (papaplatit.com)
pic
Преимущества бизнес-курса в виде блок-схемы (biznesinalogi.ru)

Сценарии использования или этапы работы

Этапы и сценарии наглядно показывают, как бизнес оказывает услугу или как нужно использовать товар.

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

pic
Обучающая платформа с описанием этапов получения услуги (solis-world.space)

Результат

Такой блок наглядно демонстрирует клиенту, что он получит после покупки. Часто в нем публикуют фото или видео в формате «до → после».

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

pic
Результат работы: фотография квартиры после услуги хоумстейджинга (smarent.com)

Цены

«Цены» или «Тарифы» — необходимый блок на лендинге.

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

Бывает, что расценки на услуги индивидуальны, но тогда стоит указать примерную «вилку».

pic
Цена зависит от сложности услуги, поэтому указывается с пометкой «от» (madamefitil.ru)
pic
Тарифы с ценами и исчерпывающим описанием, чтобы было удобно выбрать (doma.uchi.ru)

Призыв к действию

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

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

pic
Простой и понятный призыв к действию (anecole.com)
pic
Призыв с лид-формой (unisender.com/ru/services/landing-page)

Социальные доказательства

Не все готовы оформить заказ на первом экране — большинство надо еще убедить.

Отзывы

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

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

pic
Отзыв в сфере строительства — подробный, с добавлением имени и фотографии (pahachi.nrdv.ru)

Портфолио

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

Здесь нет длинного списка достижений — вместо него отобраны несколько самых впечатляющих.

pic
Кейсы, на которые можно кликнуть и открыть страницу с подробной информацией (yescreative.moscow)

Сертификаты и лицензии

Публикация таких документов повышает доверие к компании или личному бренду.

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

pic
Сертификаты качества для фармацевтической продукции (solopharm.com)

Команда

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

pic
Психологический проект — для такой сферы знакомство с командой необходимо (psy-baltics.com)
pic
Эксперты-преподаватели обучающего курса (netology.ru)

Партнеры

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

pic
Логотипы крупнейших партнеров со ссылками (fachwerkhouse.pro)

Сопутствующая информация

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

FAQ

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

pic
Ответы стоматологической клиники на популярные вопросы (vitalis-kr.dp.ua)
pic
ЧаВо на сайте Unisender (unisender.com/ru/)

Контактные данные

Обычно они находятся в «подвале» (футере) лендинга — включают телефон, почту, ссылки на социальные сети, адрес, карту проезда. Часто там еще форма для вопросов или предложение перезвонить.

pic
Контактные данные компании совмещены с лид-формой (orb-space.com)

Что такое структура лендинга?

Структура лендинга — это набор функциональных блоков и логика их расположения. От них зависят конверсия сайта, продажи, ROI.

Бывают десятки различных блоков, но, как правило, базовый набор включает 5 основных типов: рассказ о продукте, выгоды для клиента, призыв к действию, социальные доказательства, сопутствующую информацию. А на первом экране — обложка с УТП, лид-формой или кнопкой для «горячих» клиентов.

Не бывает идеальной и единственно правильной структуры. Ее создают с учетом продукта, ЦА, тематики. Еще периодически тестируют и вносят изменения — ищут наиболее эффективный формат.

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

Банк «Точка» (tochka.com):

  • обложка с УТП и кнопкой заказа для «горячих» клиентов;
  • кому подойдет продукт;
  • блок преимуществ;
  • сценарии использования;
  • несколько экранов с описанием продукта;
  • блок о безопасности (аналог блока с сертификатами и лицензиями);
  • награды и премии;
  • тарифы;
  • форма заявки с контактными данными и призыв к действию.

Сервис доставки «Самокат» (samokat.ru):

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

Онлайн-школа английского языка Skyeng (skyeng.ru):

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

Уже готовы создать свой продающий лендинг — сделайте это бесплатно в конструкторе от Unisender. Есть 30+ готовых шаблонов, формы сбора контактов и прием оплаты, интеграция с системами веб-аналитики и сервисом email-рассылки.