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

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

Структура лендинга — это его деление на тематические блоки. Обычно лендинг строят так:

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

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

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

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

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

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

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

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

Статьи по теме:

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

Стартовый экран лендинга компании D’Addario сразу показывает пользу для клиента

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

Понятный призыв от приложения Calm

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

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

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

Хорошо Нормально Плохо
Фото товара или результата услуг

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

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

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

Простой флэт-дизайн без отвлекающих деталей

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

Фотосток — любые фото, картинки, видео, инфографика.

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

Скриншот из сервиса для иллюстрации его интерфейса и возможностей

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

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

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

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

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

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

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

Вместо оффера — название магазина

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

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

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

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

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

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

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

Скриншот из переписки с менеджером иллюстрирует качество сервиса

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

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

В структуре лендинга можно использовать видео. Так получится показать и объяснить гораздо больше.

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

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

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

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

Приятные преподаватели на лендинге SMM школы. У таких людей хочется учиться

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

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

Статья по теме:

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

К этому лендингу приложил руку Капитан Очевидность

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

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

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

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

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

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

Приложение TMetric встроило в структуру лендинга отзывы клиентов и рейтинга из каталога

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

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

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

Форма для сбора контактов на лендинге

Статья по теме:

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

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

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

Хорошая форма записи на лендинге с пояснениями

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

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

Экран FAQ

Скорее всего, клиенты будут задавать вам повторяющиеся вопросы. Если ответы на эти вопросы нет смысла или не получается поместить в раздел деталей, сформируйте из них блок FAQ — frequently asked questions.

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

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

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

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

Футер

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

Футер может выглядеть совсем просто:

Типичный футер

Или так:

Футер лендинга

А можно оформить футер как полноценную часть лендинга — с крутым артом:

Футер с крутым артом

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

Покажу три удачных примера лендингов из разных сфер.

iPhone 12

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

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

Лендинг новой модели айфона. Посмотреть в оригинале

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

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

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

Вместо рассказа о качестве фото на лендинг добавили сами фото

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

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

Откройте для себя чат-бота

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

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

«ФинТабло»

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

Лендинг сервиса по управлению финансами «ФинТабло». Посмотреть оригинал

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

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

Второй понравившийся элемент — визуальное сравнение эксель-таблиц и их проблем с «ФинТабло» и его преимуществами.

Удачный элемент в структуре лендинга — сравнение с другим продуктом

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

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

Лендинг поселка «Болотов.Деревня». Посмотреть оригинал

Здесь сильная сторона — визуал. Много снимков домов и территории поселка, сделанных в хорошую солнечную погоду.

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

Больше примеров лендингов — в нашей вдохновляющей подборке.

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

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

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

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

[Всего: 2   Средний:  5/5]

15 000 email сообщений бесплатно каждый месяц