Структура продающего лендинга глазами заказчика

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

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

Что такое продающий лендинг

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

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

Когда одной страницы мало, а когда одна страница заменяет несколько, видно по первым двум примерам ниже.

Структура лендинга: блоки по порядку

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

На нашей странице о разработке сайтов записаны четыре правила конверсионного дизайна: «один экран — одно действие, понятное предложение, аргументы по порядку, минимум шагов до заявки». Так и собирается структура лендинга с высокой конверсией: каждый следующий блок отвечает на вопрос, который появился после предыдущего. Что такое конверсия и как её считают, мы объяснили в отдельной статье.

Первый экран: оффер и форма заявки

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

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

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

Кому подходит и что получает клиент

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

Что обычно стоит здесь:

• для кого предложение: отрасль, тип объекта, объём заказа;
• что клиент получает в итоге: товар с документами, готовую работу, расчёт под свою задачу;
• чем это лучше привычного варианта, через конкретику, а не через оценки.

Как идёт работа

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

Доказательства: кейсы, отзывы, партнёры, документы

Здесь страница подтверждает то, что пообещала на первом экране. Работают проверяемые вещи:

• кейсы с названием объекта и описанием того, что сделали;
• отзывы с именем, должностью и компанией;
• партнёры и поставщики, если их можно назвать;
• сертификаты, соответствие ГОСТ, лицензии, разрешительные документы.

Фраза «нам доверяют» без имён ничего не доказывает. Как её заменить на факты, видно в первом примере ниже.

Условия

Блок отвечает на вопрос «во что мне это обойдётся и как всё оформят»: как считается цена, способы оплаты, доставка, гарантия, минимальный объём заказа. Для покупателя в Казахстане сюда же относятся цены в тенге, работа с НДС и доставка по регионам. Если цена зависит от задачи, блок объясняет, от чего именно, и предлагает расчёт.

Вопросы и ответы на самой странице

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

Призыв к действию и обратный звонок

Финальный блок — одно действие и понятное следствие: что произойдёт после нажатия кнопки. Призыв называет результат для посетителя, например «Получить расчёт», а не «Отправить». Рядом стоят альтернативы для тех, кто не любит формы: обратный звонок, WhatsApp, чат.

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

Подвал с контактами

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

Что проверить у подрядчика в лендинге: таблица блоков

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

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

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

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

Лендинг под контекстную рекламу: первый экран под запрос

Человек вводит запрос, видит объявление и нажимает на него. Если первый экран говорит о другом или о чём-то общем, человек возвращается к выдаче. Поэтому первый экран страницы под рекламу продолжает объявление: тот же товар, те же слова, то же предложение.

Если реклама идёт, а заявок мало, сначала сравните объявление и первый экран. Обещает ли страница то же, что объявление? Видит ли человек товар, который искал?

Лендинг для работы с рекламой отличается от обычного обвязкой — набором инструментов вокруг страницы:

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

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

Сами рекламные кампании и их настройку этот раздел не разбирает: как мы готовим лендинг под контекстную рекламу и ведём рекламу, описано на странице услуги.

Куда уходит заявка с формы лендинга

Заявка с формы может уйти на почту, в мессенджер или в CRM — систему, где менеджеры ведут сделки. От этого зависит, увидят ли её вовремя и поймёте ли вы, откуда она пришла.

Что спросить у подрядчика до запуска:

• кто получает заявку и куда: на общую почту, в чат отдела продаж, в карточку сделки;
• сохраняется ли источник — реклама, поиск, мессенджер;
• приходит ли прикреплённый файл вместе с заявкой;
• что происходит, если менеджер в отпуске или на выходном;
• отправлена ли тестовая заявка с каждой формы перед запуском.

Заявки разных покупателей можно развести ещё на странице. У поставщика труб Снаб Пром, чьи лендинги разобраны в примерах ниже, есть отдельная форма для розничных объёмов: такие обращения уходят в отдельный поток в Битрикс24, и оптовые менеджеры их не видят. Опт и розница не мешают друг другу.

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

Примеры структуры продающего лендинга

Ниже — три проекта из опубликованных кейсов Diple. В каждом структура лендинга — пример того, как порядок блоков следует из продукта и покупателя, а не из шаблона. Цифры результатов мы оставляем на страницах кейсов.

Снаб Пром: два лендинга вместо одного сайта. Компания продаёт стальные трубы и производит ППУ-изолированные — трубы в теплоизоляции из пенополиуретана для теплотрасс. Два продукта с разной аудиторией жили на одном сайте. Мы сделали два отдельных лендинга — для стальных труб и для ППУ-труб, — и каждый говорит со своим покупателем.

Что в них устроено иначе, чем в шаблоне:

• оба лендинга длинные, и формы стоят по всей длине страницы: «каждая форма появляется там, где посетитель уже получил достаточно информации для следующего шага»;
• к заявке можно прикрепить файл — снабженцы работают со спецификациями в Excel;
• для тех, кому удобнее переписка, есть WhatsApp;
• на лендинге ППУ-труб вместо фразы «нам доверяют» стоит таблица реальных контрактов с названиями компаний и суммами.

Подробнее — в кейсе лендинг ППУ-труб Снаб Пром. Как у Снаб Пром разведены розничные и оптовые заявки, мы показали в разделе о заявках выше.

ЦСС Кабель: один лендинг под много запросов. У компании был многостраничный сайт с каталогом кабеля, и реклама вела на страницы видов кабеля. Мы сделали мультилендинг — одну страницу, которая меняет первый экран под запрос: «каждая рекламная кампания ведёт на один и тот же лендинг, но с параметром в ссылке». По параметру собирается первый экран: заголовок, изображение товара, предложение. «Человек искал силовой кабель ВВГ — на первом экране видит силовой кабель ВВГ».

Многостраничный сайт при этом остался: он работает для поиска, а лендинг — для рекламы. Подробнее — в кейсе мультилендинг ЦСС Кабель.

GB Global: лендинг для завода. Описание кейса: «Лендинг для завода железобетонных изделий по ГОСТ в Казахстане. Каталог продукции, расчёт КП в течение часа, приём чертежей на индивидуальное производство». Здесь страница отвечает на три задачи покупателя завода: посмотреть, что производят, получить коммерческое предложение и отправить чертежи на нестандартное изделие. Кейс — лендинг завода ЖБИ GB Global.

Общее у трёх проектов: страницу собирали вокруг того, с чем приходит покупатель, — спецификации, конкретного запроса, чертежа.

Ошибки в структуре продающего лендинга

Ошибки ниже касаются не дизайна, а порядка и содержания блоков.

• Шаблонные заголовки. Типичная схема веб-студии — блоки «О компании», «Наши преимущества», «Каталог продукции». Такие заголовки подходят любой компании и ничего не говорят покупателю. Заголовок, который называет суть, звучит иначе — допустим, «Трубы со склада с документами» вместо «Наши преимущества».
• Общий первый экран. Слоган или слайдер вместо предложения, о котором шла речь в блоке первого экрана. Посетитель не понимает, туда ли он попал.
• Одна страница на разных покупателей. Два продукта с разной аудиторией на одной странице — и каждый покупатель читает половину чужого текста. Иногда честнее сделать две страницы, как в примере Снаб Пром.
• Лишние поля в форме. Каждое поле, без которого менеджер может ответить, — лишний повод не отправлять форму.
• Реклама ведёт на общий каталог. Человек искал конкретный товар, а видит список разделов; как этого избежать — в разделе о первом экране под запрос.
• Заявка уходит в никуда. Форму не проверили перед запуском, или заявки падают на почту, которую никто не читает; вопросы для проверки — в разделе о заявках.

Вопросы и ответы о продающем лендинге

Как сделать продающий лендинг?

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

Чем отличается сайт от лендинга?

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

Какие есть примеры лендинга?

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

Какой должен быть размер лендинга?

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

Заключение

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

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