Спор о порядке блоков почти всегда идёт не о порядке. Одна сторона хочет отзывы выше, другая — цену выше, и обе аргументируют тем, что «так лучше смотрится». Смотрится страница одинаково, а работает по-разному, и разница определяется единственной вещью: совпадает ли последовательность блоков с последовательностью вопросов, которые человек задаёт себе по дороге к решению.
Блоки идут в порядке вопросов, а не в порядке важности
Читатель движется по странице не по важности разделов, а по цепочке сомнений. Сначала он проверяет, туда ли попал. Убедившись, спрашивает, что именно предлагают. Поняв суть, интересуется условиями и ценой. Оценив цену, ищет причину поверить. И только после этого решает, делать ли шаг.
Отсюда рабочее правило: блок ставится туда, где возникает вопрос, на который он отвечает. Блок с гарантией, поставленный после кнопки, отвечает человеку, который уже ушёл. Отзывы на первом экране отвечают на вопрос, который ещё не появился, — доверять нечему, потому что предложение пока не сформулировано.
Из того же правила следует, что «важные» блоки не обязаны стоять наверху. Важность — свойство блока, а место определяется моментом. Раздел о том, что входит в стоимость, критически важен, но раньше самой стоимости бесполезен.
Проверить каркас можно, не открывая макет. Выпишите вопросы по порядку и подпишите под каждым блок, который на него отвечает. Вопросы без блока — дыры, из-за которых люди пишут в чат. Блоки без вопроса — балласт, который удлиняет прокрутку.
Первый экран решает одну задачу
Первый экран не продаёт. Он подтверждает попадание: человек пришёл по ссылке с определённым обещанием и за две секунды проверяет, продолжается ли обещание здесь.
Для этого достаточно трёх вещей. Заголовок, повторяющий формулировку запроса или объявления, — здесь H1 работает не столько на поиск, сколько на узнавание. Одна строка о том, что именно предлагается и кому. Точка входа в действие для тех, кто пришёл готовым.
Обычно на первый экран пытаются положить всё сразу: слоган, преимущества, форму, логотипы, слайдер. Каждый элемент по отдельности разумен, вместе они превращают проверку попадания в задачу на внимательность. Слайдер вреден отдельно: он подменяет одно сообщение чередой сообщений, из которых человек успевает прочитать половину первого.
Несовпадение обещания и заголовка — самая дорогая ошибка на странице, потому что она обесценивает всё, что стоит ниже. Человек, не узнавший своё, вниз не пойдёт. Как это связано с подбором запросов, разобрано в материале о семантическом ядре; техническую сторону — скорость появления первого экрана — в материале о скорости загрузки.
Каркас: блок, вопрос, цена ошибки
| Позиция | Блок | Вопрос читателя | Что происходит при неверном месте |
|---|---|---|---|
| 1 | Заголовок и подзаголовок | Я туда попал? | Уход в первые секунды, дальше не читают |
| 2 | Суть предложения | Что вы делаете и для кого? | Человек листает в поисках сути и устаёт |
| 3 | Условия и цена | Сколько это стоит и что входит? | Ниже цены страницу читают неохотно, вопросы уходят в чат |
| 4 | Как устроена работа | Что будет после моего шага? | Форма кажется прыжком в неизвестность |
| 5 | Доказательства | Почему вам можно верить? | Раньше цены — не читают, позже кнопки — не успевают |
| 6 | Ответы на возражения | А если у меня особый случай? | Возражение осталось, вместо заявки — молчание |
| 7 | Действие | Что мне сделать сейчас? | Единственная кнопка внизу теряет всех, кто решил раньше |
Таблица читается не как обязательный шаблон, а как проверка на пропуски. Строка без блока — вопрос без ответа, и такие вопросы возвращаются к вам в виде обращений в продажи.
Отдельно про пятую строку. Логотипы, цифры и отзывы работают как сигналы доверия только рядом с тем утверждением, которое они подтверждают. Собранные в одну галерею в подвале, они не подтверждают ничего конкретного.
Порядок зависит от типа страницы
Универсального каркаса нет, потому что первые вопросы у разных страниц разные.
Страница услуги. Вопрос о сути и цене идёт раньше всего остального, потому что человек выбирает подрядчика и сравнивает условия. Доказательства нужны сразу после цены — именно в этот момент возникает сомнение.
Карточка товара. Решение принимается по параметрам и наличию, поэтому характеристики, доставка и способ оплаты поднимаются выше любых текстов о компании. Отзывы здесь работают лучше, чем на услуге, потому что подтверждают конкретный предмет.
Каталог и раздел. Главный вопрос не «что вы предлагаете», а «как найти нужное». Первым идёт способ сузить выбор — фильтры, сортировка, поиск по сайту, — а описательный текст уходит вниз или вовсе не нужен.
Страница с одной целью. Здесь порядок жёстче всего: с неё нет выхода, кроме действия, поэтому цепочка вопросов должна закрываться полностью и без ветвлений.
Статья. Читатель пришёл за ответом, а не за предложением. Ответ идёт в начале, аргументация — ниже, любое коммерческое предложение — после того, как ответ выдан. Обратный порядок читается как обман.
На узком экране все раскладки схлопываются в одну колонку, и боковые блоки уезжают в конец. Поэтому порядок разумнее проектировать сразу в мобильной раскладке: то, что выживает в одной колонке, переживёт и десктоп.
Люди массово останавливаются на одном и том же блоке. Обычно это место, где возник вопрос без ответа: цена без объяснения, условие без деталей. Найти по глубине прокрутки, посмотреть записи сессий на этом экране и добавить ответ прямо здесь, а не ниже.
Прокрутили вниз и вернулись наверх. Человек искал то, что стоит не на своём месте, — чаще всего цену или состав услуги. Поднять блок к точке возникновения вопроса; повторять его дважды не нужно.
Заявок мало, а вопросы в чате повторяются. Ответ на странице есть, но стоит после места, где сомнение появляется. Переставить, а не дописывать ещё один блок в конец.
Первый экран красивый, отказов много. Заголовок не повторяет обещание источника перехода. Сверить формулировки объявления и заголовка дословно и убрать всё, что мешает их сопоставить.
Чем проверять порядок, кроме мнения
Спор о блоках заканчивается там, где появляются три источника данных.
Глубина прокрутки показывает, до какого места доходят и где обрывается путь. Это количественный сигнал: он называет экран, но не причину. Карты кликов и прокрутки добавляют, по чему люди пытались нажать — попытки клика по некликабельному элементу почти всегда означают, что человек ищет там ответ.
Записи сессий объясняют механику: видно, как человек мечется между экранами. Ограничение известное — одна запись показывает частный случай, поэтому по ней формулируют гипотезу, а не принимают решение.
Третий источник дешевле остальных и им регулярно пренебрегают: вопросы, которые задают в переписке. Повторяющийся вопрос — прямое указание, что ответ либо отсутствует, либо стоит после точки сомнения.
Дальше начинается обычная работа с конверсией: гипотеза, порог, изменение, проверка. Порядок блоков — как раз тот случай, где эффект бывает заметным, а направление неочевидным, поэтому его стоит проверять, а не решать голосованием. Условия и последовательность разобраны в материале про оптимизацию конверсии, а корректность самих замеров — в материале про настройку целей.
Границы: чего перестановка блоков не чинит
Порядок блоков — рычаг с небольшим ходом, и это стоит признать до того, как на него потратят квартал.
Отсутствующий ответ. Если цены нет нигде, её не появится ни в каком порядке. Сначала содержание, потом расположение.
Слабое предложение. Условия хуже соседних — страница может сделать это очевидным быстрее или медленнее, но не изменит.
Барьеры внутри действия. Длинная форма, непонятная ошибка ввода, обязательные поля не по делу — это работа с удобством и микротекстами, а не с очерёдностью секций.
Недоступность интерфейса. Если блок не читается с клавиатуры или контраст ниже порога читаемости, его позиция не имеет значения — часть людей до него не доберётся. Проверки собраны в материале про доступность.
Малый объём трафика. На нескольких десятках действий в месяц перестановку блоков нельзя ни подтвердить, ни опровергнуть. Тогда порядок выводят из логики вопросов и оставляют в покое.
Спорное место
Слабость подхода «блок отвечает на вопрос» в том, что вопросы придумывает тот же человек, который потом собирает страницу.
Список вопросов кажется объективным, пока не заметишь, что он выведен из представления команды о клиенте, а не из наблюдений. В нём почти всегда есть вопрос «почему мы» и почти никогда — «что будет, если мне не подойдёт». Первый удобен, второй неприятен, и структура получается вежливой к автору.
Второе возражение серьёзнее. Порядок вопросов у разных людей разный: один сначала ищет цену, второй — сроки, третий — доказательства, что задача вообще решаема. Единственная последовательность обслуживает усреднённого читателя, которого не существует. Отчасти это лечится тем, что длинную страницу читают выборочно — люди прыгают к нужному блоку, если он различим. Отсюда, кстати, следует практический вывод: заголовки блоков важнее их порядка, потому что именно по ним прыгают.
Честная формулировка такая. Порядок блоков стоит выстраивать по цепочке вопросов, потому что это лучший доступный способ рассуждения, но считать найденную последовательность единственно верной — самообман. Проверять её нужно на людях, которые не участвовали в её составлении, и первым делом искать вопросы, которые вы не захотели включить в список.
Частые вопросы
Сколько блоков должно быть на странице?
Нужно ли ставить цену в самом верху?
Один призыв к действию или несколько?
Как понять, что порядок блоков неудачный?
Отличается ли порядок блоков на мобильном?