Структура лендинга: почему порядок блоков решает больше, чем их набор

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

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

Разберём структуру не как список секций, а как разговор.

Лендинг это диалог, в котором говорит только одна сторона#

Представьте, что человек зашёл к вам в офис. Он не начинает с вопроса «а в каком году вы основаны?». Он спрашивает по-другому и в определённой очерёдности:

1. Я вообще туда попал?
2. Вы решаете именно мою задачу?
3. Как это будет выглядеть?
4. Почему вам можно верить?
5. Сколько это стоит?
6. Что произойдёт, если я напишу?

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

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

Вопрос 1. «Я туда попал?» - первый экран#

У первого экрана ровно одна работа: за несколько секунд подтвердить, что человек пришёл по адресу. Не восхитить, не продать, а подтвердить.

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

Что должно быть на первом экране:

• Что вы делаете, человеческими словами. «Сайты для производственных компаний» понятнее, чем «цифровые решения для вашего бизнеса». Второе можно написать про что угодно, а значит, оно не про вас.
• Уточнение, отсекающее не ваших. Город, ниша, объём, формат. Это не сужение аудитории, а фильтр, который экономит вам время на нецелевых заявках.
• Одно действие. Кнопка, форма или явный якорь вниз. Три равнозначные кнопки на первом экране - это отсутствие выбора, а не свобода выбора.

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

Вопрос 2. «Это про мою ситуацию?» - блок задачи#

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

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

Работают три формата:

• Описание ситуации. «Сайт есть, но заявки приходят раз в месяц, и непонятно, откуда». Человек читает и узнаёт себя.
• Список задач. Три-четыре сценария, с которыми к вам приходят. Читатель находит свой и понимает, что попал по адресу.
• Симптомы. То, что человек замечает у себя, но не умеет назвать. Полезно там, где клиент не знает профессиональных терминов.

Чего здесь быть не должно - абстрактных болей уровня «хотите больше клиентов?». Хотят все. Такой блок не отделяет вашего клиента от чужого, а значит, не работает.

Вопрос 3. «Как это будет выглядеть?» - решение и процесс#

Дальше человек хочет представить картинку. Не список услуг сухими строчками, а как именно всё пройдёт.

Здесь хорошо ложатся два блока подряд, и порядок между ними тоже важен:

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

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

Отдельно про этапы: они работают, когда в них есть время и точки участия клиента. «Аналитика - дизайн - вёрстка - запуск» без сроков ничего не сообщает. «Бриф на 40 минут, через 3 дня прототип на согласование, через 10 дней готовый сайт» - сообщает многое, в том числе то, что вы этот путь проходили не раз. Как это выглядит у нас, расписано в этапах разработки сайта.

Вопрос 4. «Почему вам можно верить?» - доказательства#

Только теперь, а не вторым экраном, наступает время говорить о себе. И говорить не словами «профессионализм и индивидуальный подход», а тем, что можно проверить.

По силе доказательства выстраиваются так:

1. Работы, которые можно открыть. Ссылка на живой сайт сильнее любого скриншота, потому что её можно проверить. У нас, например, витрина работ открыта целиком, и это осознанное решение.
2. Цифры, за которые вы отвечаете. Не «более 500 довольных клиентов», а конкретика с проверяемой привязкой. Круглая непроверяемая цифра снижает доверие, а не повышает.
3. Отзывы с именем, компанией и деталью. Отзыв без фамилии и без конкретики читается как написанный вами же. Одна деталь - что именно делали, сколько заняло, что изменилось - превращает его в свидетельство.
4. Лица и живые фото. Стоковый мужчина в костюме с планшетом работает против вас: он сообщает, что настоящих фото у вас нет.

Вопрос 5. «Сколько это стоит?» - деньги#

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

При этом «назвать цену» не значит поставить одну цифру. Рабочих вариантов три:

• Вилка. «От 80 000 ₽», и рядом - что входит в эту сумму, а что нет.
• Состав за конкретную сумму. Один-два типовых пакета с перечнем работ. Человек примеряет на себя.
• От чего зависит. Три-четыре фактора, которые двигают цену вверх. Это заодно снимает половину вопросов на первом созвоне.

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

Вопрос 6. «Что будет, если я напишу?» - форма и финал#

Последний барьер - не цена, а неизвестность. Человек не знает, что произойдёт после нажатия кнопки: позвонят ли завтра, продадут ли по телефону, придётся ли объяснять всё заново.

Поэтому у формы должно быть три вещи:

• Понятный следующий шаг. Не «отправить», а что случится: «напишем в течение дня и зададим четыре вопроса».
• Минимум полей. Каждое лишнее поле - это причина закрыть. Имя и один контакт закрывают 90% случаев, остальное выясняется в разговоре.
• Честное согласие на обработку данных. Не декоративная галочка, а реальный чекбокс, без которого форма не отправляется. Это требование 152-ФЗ, и проверяется оно элементарно. Разбор того, что именно должно быть на сайте, - в проверке на соответствие закону.

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

Четыре перестановки, которые чаще всего дают эффект#

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

1. «О компании» - вниз. Если этот блок стоит вторым или третьим, опустите его после доказательств. Место освободится под блок задачи.
2. Цены - выше. Если цена внизу, поднимите её сразу после блока с решением. Человек, который не понимает порядок суммы, не дочитывает до отзывов.
3. Результат перед процессом. Если этапы работы стоят раньше примеров - поменяйте местами.
4. Форма после каждого крупного блока. Не одна внизу, а три-четыре по ходу.

Ни одно из этих действий не требует дизайнера. Это перестановка секций, и её видно в аналитике: карта скроллов покажет, докуда доходят, а цели в Метрике - откуда именно отправляют форму. Как настроить эти цели, разобрано в настройке Яндекс Метрики.

Чего в структуре быть не должно#

Короткий список того, что регулярно занимает место и не приносит ничего:

• Блок «Наши преимущества» из иконок с общими словами. Скорость, качество, надёжность. Это не преимущества, а слова, которые пишут все.
• Таймер обратного отсчёта, который перезапускается. Человек возвращается через день и видит те же «осталось 3 часа». Это дороже, чем кажется: подрывается доверие ко всему остальному на странице.
• Длинная история компании. Если она не объясняет, почему вы делаете работу лучше, ей место на отдельной странице.
• Всплывающее окно на второй секунде. Оно перекрывает ответ на первый вопрос ровно в тот момент, когда человек его читает.
• Слайдер на первом экране. Три сменяющихся сообщения вместо одного означают, что вы не выбрали главное. Человек тоже не выберет.

Структура меняется под источник трафика#

Один и тот же набор блоков работает по-разному в зависимости от того, откуда пришёл человек.

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

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

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

Отсюда практический вывод: под разные каналы часто нужны разные посадочные с одним ядром, но разным порядком. Чтобы понимать, кто откуда пришёл, трафик размечают - как именно, разобрано в статье про UTM-метки.

Как проверить свою структуру за двадцать минут#

Без аналитики и подрядчиков:

1. Выпишите блоки своего лендинга в столбик, по одному названию на строку.
2. Напротив каждого поставьте номер вопроса из шести, на который он отвечает.
3. Блоки без номера - кандидаты на удаление.
4. Посмотрите, идут ли номера по возрастанию. Каждое место, где порядок сбивается, - кандидат на перестановку.
5. Проверьте, есть ли форма после каждого блока с ответом на вопросы 3, 5 и 6.

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

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

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

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

Можно ли скопировать структуру у конкурента, у которого хорошо идёт? Можно посмотреть, но копировать нечего: вы не знаете, что у него в аналитике. Внешне красивый лендинг вполне может не приносить заявок, и это не видно снаружи.

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

Соберём лендинг, у которого блоки стоят в правильном порядке#

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

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