Какой должна быть структура лендинга: разбираем на примере

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

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

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

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

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

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

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

Правила оформления первого экрана

Первый экран состоит из следующих элементов:

• шапки, в которой размещаются логотип компании, её название и контакты. Это нужно для того, чтобы посетитель понимал, куда он зашёл. Логотип и название располагаются слева, справа от них — контакты. На своём одностраничнике мы указали номер телефона нашего агентства и поставили кнопку заказа обратного звонка, помогающую конвертировать посетителя в следующий шаг воронки;
• торгового предложения (оффера), содержащего непосредственно само предложение и его выгоду. Здесь важно указать преимущества вашего товара / услуги, отстроившись от конкурентов. Обычно в оффере делается упор на конкретные цифры («доставка по городу в течение 1 дня», «сроки запуска рекламных кампаний — от 3 дней»);
• CTA (формы обратной связи). В качестве заголовка указывается выгода, которую вы предлагаете посетителю. Например, в нашем случае это предложение получить больше клиентов, что должно побудить посетителей лендинга заполнить форму обратной связи прямо сейчас. В CTA не стоит размещать много полей, достаточно двух — с именем и телефоном / электронной почтой. Они нужны для установления контакта с потенциальным клиентом. Кнопка CTA содержит призыв к действию, показывающий, чего ожидать потенциальному клиенту после её нажатия.

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

Средняя часть лендинга

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

• о товаре или услуге. Блок включает в себя презентацию продукта. Здесь необходимо рассказать о товаре / услуге и показать отличия вашего предложения от аналогов конкурентов. Если товар важно показать, используйте фотографии / видеоролики. Блок о товаре / услуге можно дополнить блоком с информацией о его комплектации, чтобы рассказать пользователю, что входит в состав продукта, и что клиент получит за заплаченные деньги;
• о том, какие задачи решает товар / услуга. В этом блоке важно рассказать, кому и когда нужен продукт: описать ситуации и привести сценарии его применения;
• о выгодах покупателя и преимуществах товара или услуги / компании. Блок представляет собой перечень основных преимуществ продукта, которые должны быть сформулированы в виде выгод для клиента. Для его оформления используются три формата: список, иконки с поясняющими их подписями и плитки с изображениями, на которых располагается текст. Блок обычно помещается после блока с описанием товара / услуги либо в конце посадочной странице, чтобы подтолкнуть пользователя к покупке;
• о компании / производителе. В блоке приводятся факты и ключевые преимущества сотрудничества, которые помогут пользователю принять решение о покупке продукта. Здесь важна любая информация, которая докажет вашу компетентность (стаж / опыт работы, место на рынке, количество магазинов, результаты деятельности). Блок поможет повысить доверие покупателей к компании / производителю, что особенно важно в высококонкурентных нишах. Если информации много, лучше разбить её на несколько блоков;
• о результатах, которые получит клиент. В блоке показывается, что клиент получит в итоге, купив продукт. Вашим преимуществом здесь могут стать фотографии до / после, которые подтолкнут пользователя сделать выбор в пользу вашего товара / вашей услуги. Такой подход хорошо работает, например, при рекламе продуктов сферы красоты и здоровья, где можно показать наглядный результат;
• содержащую основной призыв к действию. В целом предполагается разработка минимум трёх блоков, размещаемых в каждой части одностраничника: на первом экране (после торгового предложения / оффера), в средней части и в футере (в самом конце). По желанию их содержание может меняться, с учётом смыслов блоков, после которых они размещаются. Чаще всего основной призыв к действию состоит из двух частей: описания выгоды и самого призыва. Существует одно важное правило: при продаже сложного / дорогого продукта или в B2B потенциального покупателя нужно выводить на контакт с менеджером. Поэтому в качестве призыва к действию в этом случае звучат предложение записаться на бесплатную консультацию / подключить бесплатный тестовый период продукта / рассчитать стоимость заказа;
• включающей альтернативный призыв к действию. Применяется для продажи сложных товаров / услуг, предполагающих длительный цикл принятия решения. Альтернативным призывом к действию может стать предложение получить полезные материалы (чек-лист, статью, книгу), подписаться на рассылку от компании или заказать аудит.

Чем завершить лендинг

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

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

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

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

Вместо выводов

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

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