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

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

Почему порядок блоков важнее дизайна

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

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

Из каких блоков состоит лендинг

Базовый скелет — шесть обязательных блоков и несколько дополнительных. Каждый отвечает на свой вопрос посетителя.

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

Первый экран: что на нём должно быть

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

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

Если посетитель пришёл по рекламе, заголовок должен продолжать объявление, по которому он кликнул. Обещали в объявлении «кухни за две недели» — на первом экране должно быть именно это, а не общие слова о мебели на заказ.

Выгоды вместо характеристик

Люди покупают результат, а не список свойств. «NVMe-диски и защита от DDoS» — это характеристика. «Сайт грузится быстро и не падает в час пик» — это выгода. Первое интересно инженеру, второе — клиенту. По возможности переводите одно в другое: сначала выгода, следом, если нужно, характеристика как доказательство.

Проверить формулировку просто: после каждой фразы задайте вопрос «и что мне с того?». Если ответа в тексте нет, фраза описывает вас, а не пользу для клиента. Трёх-пяти выгод достаточно — длинный список из двенадцати пунктов никто не читает.

Доказательства: чем подтвердить свои слова

После выгод у посетителя появляется сомнение: обещать может кто угодно. Блок доказательств отвечает на него фактами.

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

Выдуманные отзывы и стоковые «клиенты» работают против вас: их распознают. Как собрать и оформить настоящие, рассказано в статье отзывы и кейсы на лендинге.

Как отработать возражения

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

• Цена. Если назвать точную сумму нельзя, дайте диапазон, цену «от» или примеры с расчётом. Полное молчание о цене читается как «дорого».
• Сроки. Сколько времени проходит от заявки до результата и от чего это зависит.
• Гарантии. Что будет, если результат не устроит: возврат, доработка, замена.
• «А мне подойдёт?» Для кого услуга и для кого нет. Честное «мы не берёмся за…» повышает доверие.
• Частые вопросы. Пять-семь вопросов, которые реально задают по телефону, с короткими ответами.

Форма и призыв к действию

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

Целевое действие на лендинге одно, но кнопок под него несколько: на первом экране, после доказательств и в самом конце. Формулировка может меняться по ходу страницы, действие остаётся тем же.

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

Как меняется структура под трафик и продукт

Универсального скелета нет: порядок и объём блоков зависят от того, насколько посетитель готов к покупке и насколько сложен продукт.

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

Как спроектировать структуру: пошагово

1. Определите одно целевое действие. Заявка, звонок, запись или покупка — но что-то одно.
2. Выпишите вопросы клиентов. Лучший источник — менеджеры, которые отвечают на звонки: они знают, о чём спрашивают до покупки и что мешает решиться.
3. Разложите вопросы в том порядке, в каком они возникают у человека, впервые увидевшего предложение.
4. На каждый вопрос назначьте блок и напишите его содержание обычным текстом, без дизайна. Получится прототип.
5. Прочитайте подряд только заголовки блоков. Из них должна складываться связная история — многие читают страницу именно так.
6. Расставьте кнопки: на первом экране, после доказательств, в конце.
7. Отдайте прототип в дизайн и вёрстку и проверьте результат на телефоне: рекламные страницы чаще всего открывают именно с него.
8. После запуска посмотрите в Яндекс Метрике, до какого блока долистывают и где уходят. Настройка целей описана в статье Яндекс Метрика с нуля.

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

Чего на лендинге быть не должно

• Длинных абзацев, которые никто не читает.
• Меню с десятком ссылок, уводящих со страницы (лендинг ведёт к одному действию).
• Форм с кучей полей — чем короче форма, тем больше заявок.
• Стоковых картинок «улыбающиеся люди в костюмах» вместо реальных фото.
• Нескольких разных призывов на одном экране: «позвоните», «подпишитесь» и «скачайте» одновременно.
• Блока «О компании» сразу после первого экрана. Сначала польза для клиента, потом рассказ о себе.
• Всплывающих окон, которые закрывают текст в первые секунды.
• Блоков «для объёма»: миссия, ценности и приветствие директора заявок не приносят.

Чек-лист готовой структуры

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

Коротко

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

Спроектируем и соберём лендинг под вашу услугу: от структуры и текста до вёрстки и подключения аналитики.