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

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

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

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

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

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

Какие блоки нужны на лендинге

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

Блок	Вопрос посетителя	Зачем нужен
Первый экран	Что это и туда ли я попал?	Предложение: что вы делаете, для кого и чем отличаетесь; главная кнопка
Для кого и какую задачу решает	Это про меня?	Человек узнаёт свою ситуацию и видит, что решение подходит именно ему
Как это работает	Что будет после заявки?	Шаги от обращения до результата, сроки, что потребуется от клиента
Примеры работ	Как это выглядит в деле?	Доказательство вместо обещаний: фотографии, проекты, результаты
Цены или порядок расчёта	Сколько стоит?	Цена или ориентир «от», что в неё входит и от чего зависит итог
Доверие: отзывы, гарантии, документы	Почему вам можно верить?	Отзывы с именами, условия гарантии из договора, лицензии и сертификаты — если они есть
Вопросы и ответы	А как же…?	Последние сомнения: оплата, сроки, возврат, нестандартные случаи
Форма заявки	Что сделать дальше?	Короткая форма, понятная кнопка и запасные каналы — телефон, мессенджер

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

Как порядок блоков зависит от «тёплого» и «холодного» трафика

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

«Тёплый» посетитель

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

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

«Холодный» посетитель

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

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

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

Как цена решения меняет структуру

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

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

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

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

Где ставить кнопки и формы

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

• после цен или порядка расчёта;
• после примеров работ и отзывов;
• в конце страницы, рядом с ответами на вопросы.

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

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

Саму форму делают короткой: каждое лишнее поле — повод бросить её на полпути. Рядом пишут, что будет после отправки. И для любой формы нужны политика обработки персональных данных и согласие посетителя — этого требует 152-ФЗ.

Как проверить структуру до запуска и после

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

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

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

Частые ошибки

• Структура скопирована у конкурента или из шаблона, а вопросы своих клиентов никто не выяснял.
• Страница начинается с истории компании и миссии, а не с предложения.
• «Наши преимущества» — шесть иконок с подписями «качество», «надёжность», «опыт», которые ничего не доказывают.
• Цены спрятаны за кнопкой «Узнать стоимость», и человек, который хотел прикинуть бюджет, уходит.
• Отзывы и гарантии собраны в самом низу дорогой страницы, хотя сомнения появились гораздо раньше.
• Три равноценных действия — купить, подписаться, скачать, — и посетитель не выбирает ни одного.
• Одна страница с одним первым экраном и для тёплой, и для холодной рекламы.
• В блоке вопросов — то, что никто не спрашивает: «Почему стоит выбрать нас?»

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