Из чего состоит структура лендинга

Дата публикации: 07-12-2021       28

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

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

Структура посадочной страницы - это ее разделение на тематические блоки. Обычно целевая страница строится следующим образом:

  1. короткое предложение или УТП;
  2. детали и преимущества предложения;
  3. варианты ценообразования с призывом к действию;
  4. обзоры.

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

Правильная структура лендинга

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

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

Стартовый экран

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

Предложение или УТП написано ярко и крупно, а под ним, если необходимо, даются пояснения меньшим текстом.

D'Addario продает товары для музыкантов. Этот экран напрямую предлагает услугу «Уникальный дизайн для вашего оборудования». Призыв ниже означает: «Индивидуальные медиаторы и барабаны помогут вам выделиться на любой сцене».

 

 

 

Заставка целевой страницы D'Addario сразу показывает преимущества для клиентов

 

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

 

 

 

Четкий звонок из приложения Calm

 

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

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

Чем иллюстрировать экран оффера

Хороший Хороший Плохой
Фото товара или результата оказания услуг

Фотографии покупателей с товарами или в процессе (результате) оказания услуги

Фото сотрудников на работе

Скриншот из программы / приложения

Простой плоский дизайн, ничто не отвлекает

Фоновое видео товаров, услуг, работы (будет тормозить работу сайта, не все могут проиграть)

Фотоархив: любые фото, изображения, видео, инфографика.

CRM-система «Мегаплан» выбрала скриншот. Здесь мне как пользователю сразу понятно: выглядит просто и красиво, интерфейс не завёрнут, все функции видны.

 

 

 

Скриншот сервиса, иллюстрирующий его интерфейс и возможности

 

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

 

 

 

Удачная иллюстрация интерфейса приложения на главном экране целевой страницы

 

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

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

 

 

 

Слишком много деталей на главном экране - сложно выделить главное

 

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

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

 

 

 

Вместо предложения - название магазина

 

Говорить не о вас, а о том, как клиент решит свою проблему или устранит потребность с вашей помощью. Наша статья поможет вам определить потребности вашей аудитории.

Иллюстрации должны работать. Иногда кажется, что какая-то выдуманная графика будет смотреться лучше, чем скриншот из приложения. Это обманчивое впечатление - вы будете тратить время и деньги на проекты, которые вам никак не сработают. Например, вот скриншот с целевой страницы CRM-системы: человек с какими-то экранами и графикой, мегаполис. Само изображение интересное, но впечатление двоякое: почему именно город? Что, если я из маленького городка или живу в деревне, разве эта CRM не для меня?

 

 

 

Иллюстрация на главном экране не работает вместе с предложением

 

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

Автоматизация электронного маркетинга

Отправьте цепочку инициированных приветствий, брошенных корзин, сообщений о повторной активации, объединяя электронную почту, SMS и веб-push в одну цепочку.

Настроить триггерные рассылки

Экраны подробностей

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

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

 

 

 

Скриншот переписки с менеджером наглядно демонстрирует качество обслуживания

 

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

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

Вы можете использовать видео в плане вашей целевой страницы. Это покажет и объяснит гораздо больше.

 

 

 

RetailCRM использует видео, чтобы показать систему в действии

 

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

 

 

 

Семейное фото владельцев компании на лендинге Earnie Ball

 

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

 

 

 

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

 

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

 

 

 

Пример плохого копирайтинга в разделе деталей

 

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

 

 

 

Captain Obvious внес свой вклад в эту целевую страницу

 

Экран отзывов

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

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

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

  • Почему вы выбрали нас?
  • Что понравилось больше всего?
  • Для чего вы используете наш продукт?

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

 

 

 

В приложение TMetric интегрирована структура целевой страницы отзывов и рейтингов клиентов из каталога

 

Экран CTA и стоимости

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

Это может быть регистрационная форма, если ваша цель - привлечь потенциальных клиентов.

 

 

 

Форма сбора контактов на целевой странице

Или сравните цены на разные ставки с помощью соответствующей кнопки CTA.

 

 

Сравнение цен и покупка желаемого тарифа в форме на лендинге

 

Главное в этой форме - четкость. Например, как на скриншоте выше: у каждого тарифа после названия есть краткое описание, разница в функциях выделена жирным шрифтом. Или как в форме ниже: сначала - информация о программе, после - что будет, когда пользователь заполнит и нажмет кнопку «Зарегистрироваться».

 

 

 

Хорошая форма публикации на целевой странице с пояснениями

 

Вариант ниже не очень удачный. Нет ни приблизительной даты начала, ни объяснения того, что будет дальше.

 

 

 

Пример неправильной формы в структуре целевой страницы

 

Экран FAQ

клиенты часто задают вам повторяющиеся вопросы. Если ответы на эти вопросы не имеют смысла или вы не можете ввести их в разделе деталей, введите их в блок FAQ - часто задаваемые вопросы.

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

Удобная структура FAQ на лендинге

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

 

 

 

В таких FAQ неудобно искать нужный вопрос

 

Футер

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

Нижний колонтитул может показаться достаточно простым:

 

 

 

Типичный нижний колонтитул

 

Или вот так:

 

 

 

Целевая страница нижнего колонтитула

 

Или вы можете оформить нижний колонтитул как полноценную часть целевой страницы с красивой графикой:

 

 

 

Нижний колонтитул с красивым артом

 

Примеры удачной структуры лендинга

Я покажу вам три успешных примера целевых страниц из разных областей.

iPhone 12

Начнем с очень интересной целевой страницы для 12-го iPhone. Это длинная страница, но Apple может себе это позволить - у компании много поклонников, они не могут дождаться появления новых продуктов, и они будут рады их прочитать и посмотреть.

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

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

 

 

 

Для демонстрации водонепроницаемости телефон был показан в воде

 

Вместо того, чтобы описывать качество снимка, проще предоставить сами фотографии, сделанные с помощью телефона:

 

 

 

Вместо фоторепортажа на лендинг были добавлены сами фото

 

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

 

 

 

Разница в размерах моделей обыгрывается словами: «Большая новость - маленькая новость»

 

Проверьте чат-бота

Создавайте автоматические воронки продаж и отвечайте на вопросы пользователей с помощью чат-бота в Facebook, VK и Telegram.

Создать чат-бота

«ФинТабло»

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

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

 

 

 

Хороший пример макета экрана с оффером на лендинге

 

Второй пункт, который мне понравился, - это визуальное сравнение таблиц Excel и их проблем с FinTablo и его преимуществами.

 

 

 

Элемент успеха в структуре целевой страницы - сравнение с другим продуктом

 

«Болотов.Деревня»

Целевая страница поселка «Болотов .. Деревня» построена по стандартной схеме: сначала на экране предложение, потом детали: где он находится, какие есть проекты и варианты дома, инвестиционные возможности.

Посадочная страница поселка "Болотов. Деревня". Посмотреть оригинал

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

 

 

 

Красивые фото на посадочной странице дачного поселка

 

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

Структура лендинга: что стоит запомнить

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

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

Рассказать друзьям:

Cделайте первый шаг

Выберите готовый шаблон из более 1600+ бесплатных и премиум вариантов.

ШАБЛОНЫ САЙТОВ
Задать вопрос