Landed pages ✈️ 4 продающих блока посадочной страницы

landed page что это

Если вы пришли узнать, что такое landed pages — то вас обманули. Здесь речь про landing page — рекламную страницу, которая обеспечивает бюджетный старт, повышенные чеки, положительную репутацию и конверсионность сайта. А вам, ведь, это важно, правда?

Тогда поехали: в этой статье кратко про суть landing page, его структуру и некоторые фишки. В конце я дам пример универсального лендинга с конкретными блоками.

Landed pages это и есть посадочная страница

Лично я обожаю лендинги. Я не представляю себе 70% B2B услуг и сервисов в формате скучных корпоративных сайтов. Именно поэтому в теме лендингов стоит разобраться.

Landing page — (от англ. «посадочная страница») отдельная страница сайта, используемая для «приземления» рекламного трафика.

Сейчас как только не называют landing page: лендинг, посадочная страница, страница приземления, продающая страница, страница посадки или просто «посадка» (отдает чем-то тюремным).

Термин у нас появился относительно недавно и характеризует страницы определенного стиля, где используется «триггерный» (trigger — побуждать) контент всех видов.

Кстати, более корректно использовать термин landing page в более широком смысле. Это просто страница для принятия рекламного трафика.

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

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

Разберем подробней базовые блоки лендинга.

4 блока успешного лендинга

Не зависимо от вида и размера бизнеса, все лендинги в том или ином виде содержат 4 смысловых раздела:

из чего состоит landing page
4 составляющие успешного landing page
  1. Что это? Кто это?
  2. Как это работает?
  3. Социальный доказательства
  4. Что дальше? / Оставить в раздумье

1. Что это? Для кого это?

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

Лучше всего разжевать в явном виде как для пришельцев: «Урюпинский завод металлоконструкций c доставкой по области». Напротив, когда товар понятен, достаточно какой-то бьющей в цель метафоричной картинки. Как с новым айфоном 2018: «Эти фото сделаны на iPhone 8 Plus».

Если у вас унылый, ничем не примечательный B2B, то надо выбрать главную характеристику продукта и донести её на языке вашей ЦА: в случае продажи кабеля это может быть диапазон марок кабеля, магазин софта — демо-версия или базовое решение проблемы, магазин зонтов – английские, долговечные зонты с широким радиусом и т.д.

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

Важные составляющие (триггеры) блока «Что это?» на странице:

  • дескриптор — объяснение, что за бизнес и продукт
  • изображение товара (в отсутствие фото просто небольшой текст)
  • призыв к действию
  • телефон или кнопка связи

2. Как это работает? Что я получаю с этим?

Этот смысловой раздел может состоять из нескольких блоков или экранов на странице. Функционально данный раздел раскрывают полезные свойства продукта.

Например, блок с цифрами, которые обычно хорошо работают на рациональном в человеке.

2.1 Преимущества и характеристики

Преимущества (по-английски Benefits) – это то, что покупатель получит имея ваш товар или услугу. Взгляд с его стороны.

Характеристики (англ. features) касаются вашего товара, это взгляд со стороны продавца или самого товара.

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

  • Широкий экран – возможность видеть полное изображение
  • Богатое меню – незабываемый вкус азиатской кухни
  • Английский для взрослых — свобода в общении в любом возрасте

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

Ещё по-умному преимущества называют deliverables – то, что покупатель получает в конечном итоге.

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

Инфографика, таблицы с ценами или акциями – это все очень хорошо работает на восприятие и мгновенно считывается. Нет какого-то стандартного рецепта для всех ниш, но при прочих равных, пропорция Парето – 20% текста 80% визуального ряда будет оптимальной.

При подобном подходе landing page будет содержать много маленьких подзаголовков H2-H4 с одним-двумя предложениями текста под каждым. Все заголовки должны по-максимуму быть человеко-читабельными и содержать ключевые слова, по которым вы планируете рекламу или продвижение.

Триггеры для блока Преимущества:

  • Видео от руководителя / представителя компании
  • Картинка или видео производства
  • Картинка или видео товаров в действии
  • Сравнение до и после услуги
  • Сравнительные таблицы с ценными и характеристиками схожих товаров
  • Слайд-презентации (SlideShare вам в помощь)
  • Частые вопросы

3. Блок социальных доказательств

Обобщенно этот раздел включает всё то хорошее, что кто-то говорит о вашей продукции или вашей компании. Кто-то, кроме вас самих.

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

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

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

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

Триггеры для блока социальных доказательств:

  • Профессиональные кейсы – видео результатов использования
  • Отзыв пользователя с фото ссылкой на социальные аккаунты
  • Бренды больших заказчиков
  • Толпа народа с представителем бренда
  • Мнения знаменитостей (даже фото рядом со знаменитостями)
  • Патенты, свидетельства, награды
  • Ссылки на статьи в крупных СМИ
  • Цитаты с цифрами указанием прямой пользы, а также нестандартным выражением эмоций
  • Мнения друзей

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

4. Что дальше? Оставить в раздумье

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

В нижней части landing page, когда посетитель уже загружен информацией и несколько убаюкан монотонным её изложением, надо дать ему встряску, шоковый разряд – чтобы он, в конце концов, выполнил то, зачем пришел:

  • Оставил вам заявку или позвонил
  • Добавился в группу
  • Установил приложение
  • Подписался на рассылку

В блоке «Что дальше?» нужно повторить ваше первое предложение в формате ODC (Offer, Deadline, Call-to-Action): суть оффера, ограничение по времени и что нужно сделать?

В качестве мотиватора может быть раздача слонов в виде какого-то PDF-файла с ценной информацией или ссылкой на закрытое видео. Или скидка за быстрое принятие решения.

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

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

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

призыв к действию на landed page
Хороший повод для заявки: видим чужие косяки — хотим проконсультироваться

Триггеры для блока «Оставить в раздумье»:

  • Изображение человека, соответствующего целевого аудитории по полу, возрасту, расе, социальному статусу и занятию
  • Взгляд или невербальный жест персонажа на фото, направленный в сторону кнопки или телефона
  • Руки готовые к целевому действию звонку или написанию сообщения
  • Цитата и фотография сотрудника компании с подписью имени и должности
  • Фото плохо выполненных работ (чужих)
  • Девушки – ну куда же без них!

Пример универсального landing page для любого бизнеса

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

Например, короткие тезисы с цифрами (преимущества), бренды заказчиков (соц. доказательства), таблица с ценами (снова преимущества).

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

блоки для landing page
Рекомендованная IT-Agency структура лендинга для практически любого бизнеса

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

Во-вторых, страница визуально разбита на блоки с разным фоном и оформлением.

Первый экран

Это ответ вопросы кто мы? что мы? и что дальше делать? Отдельно подумайте, какие элементы для связи / вовлечения поместить сюда: социальные иконки, телефон, кнопка с вызовом формы или карта.

Сравнение

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

Акции и скидки

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

Частые вопросы

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

Лицензии, награды, сертификаты

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

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

Блок Что дальше?

НЛП-шный блок, программирующий на совершение желаемого действия. Моё мнение, это работает в 1 случае из 10 – когда не до конца ясен процесс услуги и уместно его раскрыть. Причём раскрыть нужно по простому, не отягощая подробностями, иначе клиент может испугаться.

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

Отзывы и кейсы

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

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

О компании

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

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

Социальные иконки и мессенджеры

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

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

  • VK — vk.me/userName
  • Telegram — t.me/userName
  • Email — mailto:info@email.com

Контакты и карта

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

В целом, я не сторонник карт на лендинге, К тому что они негативно отражаются на скорости загрузки страницы. А вот телефон, Емейл, ИНН/ОГРН должны быть указаны. Тем более, что ОГРН является требованием для рекламы в Яндекс Директ.

Футер (последний экран)

Это наш старый добрый 4-ый столп «Что дальше?». Вы все пролистали — извольте нам написать (форма), позвонить (телефон) или выполнить другое целевое действие (ссылка приложение, соцсети, саппорт и пр.).

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

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

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

Требования к лендингу

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

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

Вот вопросы из моего брифа PotokLab, которые я задаю своим заказчикам landing page:

  1. Компания и продукт
    1. Доменное имя сайта или URL-адреса посадочных страниц, названия разделов сайта
    2. Тема лендинга (общее направление)
    3. Точная цель/задача (продажа отдельного товара/услуги; продажа бесплатной опции (какой?); инфо-поддержка других ресурсов; другое – уточнить)
    4. Как планируете продвигаться? (SEO; контекстная реклама; таргетированная реклама в соцсетях; продвижение в мессенджерах)
    5. Реальные преимущества или достижения вашего бизнеса (если нет, то честно напишите, что нет):
  2. Наполнение сайта
    1. Сайты-ориентиры (название, почему вы их считаете конкурентом, слабые и сильные стороны, ссылки на их сайты и группы и на сайты, которые вам нравятся):
    2. Наличие готового контента (описание товара/услуги, условия акций, отзывы, фотографии продуктов, сотрудников и клиентов, другие медиа-материалы). Приветствуются ссылки на облако!
    3. Есть ли люди, которые уже сейчас могут оставить отзыв о вашем товаре или услуге? Если есть, то готовы ли они предоставить свои фотографии; контакты, ссылки на соц. аккаунты?
    4. Моменты, которые обязательно должны быть отражены на сайте (сроки акции, предупредительные надписи, опции оплаты и доставки, другие тех. требования)
    5. Структура сайта (для лендинга – примерное количество блоков, для сайта – структура меню и/или названия разделов сайта)
    6. Срочность заказа (есть/нет дедлайн, плавающий/фиксированный срок)
  3. Дополнительная информация
    1. Краткое название организации
(которое может фигурировать в тексте)
    2. Целевая аудитория (краткая характеристика)
    3. Основные ключевые слова (если есть)
    4. Требование по стилю (строгий, молодежный, минимализм, дорогой и пр.)

Если вы исполнитель – то-есть веб дизайнер или верстальщик – в таком случае среди основных требований к landing page я бы выделил:

  1. Адаптивность (responsive design) и соотвествующий UX/UI
  2. Чистая верстка (минимум HTML без тарабарщины как на шаблонизаторах)
  3. Быстрая скорость загрузки (минимум Javascript и тяжелых файлов)
  4. Чистый дизайн (баланс текстов и пропусков, выровненные вертикали, удачные шрифты, аскетичная цветовая схема и пр.)
  5. Внимание к мелочам — секси-кнопки (должны быть заметными!), анимированные иконки, подсказки, проработанные калькуляторы

Как создать landing page?

Посмотрите моё видео в котором я оцениваю варианты создания сайтов на WordPress, на фреймворке Webflow и Tilda:

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

Для себя я нашел решение в создании лендингов на Вебфлоу, код откуда экспортируется используется либо прямо на хостинге, либо вставляется в существующую страницу на CMS типа WordPress.

Надеюсь, вы получили N-ное количество инсайтов по теме landing page. Хотите больше маркетинговой прокачки — узнайте, как управлять рекламой с большими бюджетами.