Структура лендинга это не список блоков, а последовательность ответов на вопросы человека. Каждый экран должен снимать возражение, которое возникает у него именно на этом месте. Если порядок сбит, самые сильные аргументы читают уже после того, как вкладку закрыли.
Набор блоков у всех примерно одинаковый: оффер, выгоды, цены, отзывы, форма. Разница в том, в каком порядке они идут и что стоит между ними. Мы несколько раз переставляли блоки на готовых страницах, не трогая ни одного слова в текстах, и заявки менялись заметно.
Почему порядок важнее набора
Человек читает страницу не как каталог, а как разговор. У него есть очередь вопросов, и она почти всегда одна и та же: что вы предлагаете, зачем мне это, почему это сработает, сколько стоит, почему вам можно верить, что будет дальше.
Пока предыдущий вопрос без ответа, следующий блок не читается. Отзывы, поставленные до объяснения услуги, пролистывают: непонятно, кого хвалят и за что. Цена без состава работ выглядит просто как число, и его сравнивают с любым другим числом в поиске.
Отсюда правило проверки: возьмите любой блок и спросите, на какой вопрос он отвечает и возник ли этот вопрос к этому моменту. Отвечает на ещё не возникший вопрос значит двигать вниз.
11 блоков и задача каждого
Порядок ниже мы используем как стартовую схему для услуг со средним чеком и обсуждаемым решением. Под конкретный проект он правится, но начинаем всегда с него.
| № | Блок | Задача | Частая ошибка |
|---|---|---|---|
| 1 | Первый экран | Назвать услугу, выгоду и действие | Слоган вместо конкретики |
| 2 | Проблема клиента | Показать, что задачу понимают | Абстрактная боль, не своя |
| 3 | Решение | Связать проблему с услугой | Список из 12 выгод подряд |
| 4 | Как это работает | Снять страх непонятного процесса | Этапы без сроков |
| 5 | Состав и цены | Дать порядок суммы | Только "цена по запросу" |
| 6 | Доказательства | Подтвердить цифрами и кейсами | Отзывы без имён и деталей |
| 7 | О компании | Объяснить, кто исполнитель | Биография вместо фактов |
| 8 | Возражения | Ответить на "а если" | Только удобные вопросы |
| 9 | Гарантии | Снизить риск решения | Обещания без условий |
| 10 | FAQ | Добить мелкие сомнения | Пересказ верхних блоков |
| 11 | Финальный призыв | Дать простое действие | Форма на 8 полей |
Блоки 2 и 3 сливаются в один, если услуга понятная. Блоки 8 и 10 тоже часто объединяют: и там и там работа с сомнениями. А вот блок 4 выкидывают чаще всего, и напрасно: именно неясность процесса чаще всего оставляет человека в состоянии "потом разберусь".
Первый экран: три вопроса за пять секунд
На первом экране человек решает, читать ли дальше. Проверять его надо тремя вопросами: что это за услуга, для кого она, что делать дальше. Если хоть один ответ приходится искать, экран переделывается.
Что там должно быть: заголовок с услугой и главной выгодой, короткое пояснение на строку-две, одна кнопка действия и одна опора на факт. Опора это цифра, а не эпитет: "работаем с 2008 года", "срок 21 день", "уже 550 проектов". Слоганы вроде "создаём сайты, которые продают" не несут информации.
Одна главная кнопка сильнее двух равнозначных: когда рядом стоят "Заказать" и "Каталог", часть людей уходит в каталог и не возвращается. Вторую кнопку делаем визуально слабее. Про остальные промахи первого экрана мы писали в статье 11 ошибок в посадочной странице.
Холодный трафик и тёплый: что меняется местами
Одна и та же схема по-разному работает на разных источниках. Разница в том, насколько человек уже сформулировал свою задачу.
Холодный трафик из рекламы и соцсетей. Человек кликнул на объявление, но решение ещё не принял. Ему нужен блок про проблему: он должен узнать в описании себя. Здесь блоки 2 и 3 идут максимально высоко, цены опускаются ниже, а первый экран говорит на языке задачи, а не услуги. Про согласование объявления и посадочной страницы есть отдельный разбор про связку рекламы и лендинга.
Тёплый трафик из поиска. Человек уже набрал "монтаж вентиляции цена" и знает, чего хочет. Расписывать ему проблему бессмысленно, он её и так чувствует. Наверх поднимаются состав работ, вилка цены и сроки, а блок про боль сжимается до пары строк или уходит.
Если трафик смешанный, страницу собирают под холодный сценарий, но добавляют якорное меню, чтобы тёплый посетитель мог сразу прыгнуть в цены.
Сколько форм ставить и где
Одна форма внизу длинной страницы это потеря. Решение у человека созревает в разных точках, и в этот момент под рукой должно быть поле для телефона.
Рабочая раскладка на странице в 10-12 экранов: кнопка на первом экране, форма после блока с ценами, форма после доказательств, форма в финале. Плюс закреплённая кнопка звонка на мобильном.
Два правила важнее количества. Первое: форма везде одна и та же, с одинаковыми полями. Разные наборы полей ломают статистику, в отчёте не понять, какой блок сработал. Второе: полей минимум, имя и телефон. Каждое дополнительное поле стоит части заявок, а адрес и должность вы спросите в разговоре.
Отдельно стоит проверить, что все формы отдают согласие на обработку данных и ссылку на политику. Это не про конверсию, но штраф обходится дороже переделки. Про остальные способы поднять отдачу страницы собран разбор 14 способов поднять конверсию.
Навигация и мобильный порядок
Лендинг на 12 экранов без навигации это ловушка: человек, который хотел посмотреть цены, скроллит четыре экрана и бросает. Решение простое и старое, якорное меню в шапке на 4-5 пунктов: услуга, как работаем, цены, кейсы, контакты. Меню липкое, кнопка заявки в нём же.
На мобильном порядок меняется сам собой, потому что колонки схлопываются в одну. Что здесь важно:
- Первый экран короче: заголовок, строка пояснения, кнопка. Всё остальное вниз.
- Таблицы цен разворачиваются в карточки, а не превращаются в горизонтальную прокрутку с мелким шрифтом.
- Длинные блоки со схемами и этапами сжимаются: на телефоне четыре шага читаются, восемь пролистываются.
- Кнопка звонка закрепляется внизу экрана: на мобильном звонят чаще, чем пишут.
Проверять надо на живом телефоне, а не в режиме разработчика: поле ввода уезжает под клавиатуру, а карта перехватывает скролл только на реальном устройстве.
Ошибки порядка, которые встречаются чаще всего
Цены раньше ценности. Прайс на втором экране заставляет сравнивать вас с рынком по одному числу. Сначала состав и результат, потом сумма.
О компании на втором экране. История с 2008 года и фото офиса интересны человеку, который уже понял, что вы решаете его задачу. До этого момента блок читается как "поговорим о нас".
Доказательства оторваны от обещания. Кейсы стоят в конце, а обещание "делаем за 21 день" в начале. Их надо ставить рядом: обещание, сразу под ним подтверждение.
Форма после блока с возражениями. Человек только что прочитал раздел про то, что может пойти не так, и в этом настроении заполняет заявку. Форму лучше ставить после гарантий.
FAQ вместо структуры. Когда блоки собраны как попало, ответы на вопросы сваливают в конец списком из 15 пунктов. Если вопрос в FAQ повторяет то, что должно быть в основном тексте, его надо поднимать наверх. Про то, как формулировать сами тексты блоков, есть пошаговый разбор продающего текста.
Как проверить структуру до вёрстки
Порядок правится в прототипе за час, в готовой вёрстке за несколько дней. Поэтому схему согласовываем до дизайна.
- Выпишите список возражений клиента: 10-15 штук, живым языком, из реальных разговоров и переписок. Не придумывайте, поднимите переписку менеджера.
- Отсортируйте их в том порядке, в каком они возникают у человека по ходу разговора.
- Присвойте каждому блоку одно-два возражения. Блок без возражения кандидат на удаление.
- Соберите прототип в виде серых прямоугольников с заголовками и текстом-рыбой только там, где объём принципиален.
- Покажите прототип трём людям не из бизнеса: пусть проговорят вслух, что видят и что непонятно. Первые пять секунд первого экрана самое ценное наблюдение.
- Проверьте, что после каждого сильного блока есть возможность оставить заявку.
- Сверьте мобильный порядок отдельно, прокрутив прототип на телефоне.
Этот прогон занимает день-два и обычно меняет схему на два-три блока. Дальше можно отдавать в дизайн. Как мы это делаем на проектах, описано на странице услуги разработка лендингов.
Что менять, если заявок мало
Работающая структура лендинга это порядок, в котором каждый экран отвечает на очередной вопрос читателя. Набор блоков вторичен, менять надо в первую очередь последовательность. Холодному трафику сначала нужны проблема и решение, тёплому состав и цена. Формы повторяются в местах, где решение уже принято, а не только внизу страницы.
Если перебирать порядок блоков в одиночку не хочется, посмотрите этапы, сроки и состав работ на странице разработка лендингов - прототип там идёт до дизайна, как и описано выше.
