От дизайн-концепта до сцены, которая ведёт к CTA

Почему «красивый экран» и «экран, ведущий к CTA» — это разные проекты

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

Разница между экраном, который приводит к заявке, и тем, который просто впечатляет, — в одном решении на этапе концепта: какое последнее сомнение мы убираем у человека прямо перед CTA. Всё остальное — пиксели.

Данные подтверждают: если на странице появляется несколько конкурирующих целей, средняя конверсия падает с 13,5% до 10,5% (Unbounce, анализ 18 639 страниц). Но та же механика работает тоньше: один и тот же CTA-goal, повторённый в нескольких точках касания при верно выстроенной сцене, не снижает, а усиливает конверсию — sticky-bottom и above-fold вместе дают прирост +12% (Digital Applied, 2 000 страниц). Вопрос не в количестве кнопок, а в том, какое решение закладывается в экран перед ними.

Шаг 1 — Определите, какое возражение сцена должна снять

Прежде чем дизайнер откроет Figma, вы формулируете одну фразу: «Человек уже прочитал всё, что выше, — почему он всё ещё не нажимает?»

Ответ не должен звучать как «не доверяет» или «не понимает ценность». Это слишком размыто. Сцена перед CTA — это точечный контраргумент. Для витрины девелопера кейс kf.expert (NF GROUP) выглядел так: посетитель изучает объект, но не оставляет заявку, потому что боится ошибиться с выбором. Это не вопрос доверия к бренду — это тревога «подходит ли такой формат именно моему бизнесу». Решение, принятое на уровне концепта: сцена перед CTA превращается не в галерею планировок, а в иллюстрацию использования. Там же появились отзывы владельцев со схожими задачами — и цифры. После этого решения конверсия выросла на 133%.

Похожий сдвиг — в проекте для ЛИИС. Система предлагала автоматизацию отчётности, но перед кнопкой «Попробовать» у эксперта возникало возражение: «опять придётся вникать в сложный софт». Сцена, которую спроектировали вместо стандартного списка возможностей, показывала процесс работы глазами пользователя: как ИИ снимает рутину, а не добавляет интерфейс. Посетитель видел не инструмент, а своё освободившееся время. Результат: +293% конверсии и падение стоимости лида в 7 раз.

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

Шаг 2 — Постройте путь внимания до CTA как таймлайн

У Apple есть отлаженная механика, которую можно адаптировать для любой витрины. На страницах iPhone скролл работает как таймлайн: 10% прокрутки — короткое утверждение, 35% — визуальный аргумент, 60% — демонстрация ключевой детали, 85% — финальный контекст перед кнопкой Buy. CTA появляется не раньше, чем зритель получит три осмысленных «кадра», каждый из которых снимает одно сомнение.

Сцена не обязана быть кинематографичной. Она обязана иметь ритм. Когда вы проектируете последний экран, разбейте его на 2–4 beat’а, каждый из которых решает одну задачу:

• убирает страх «это не для меня»,
• даёт доказательство,
• создаёт ощущение завершённости знакомства с продуктом.

На brezatech.ru/attention этот принцип встроен прямо в сценарий страницы: посетитель проживает путь от проблемы к доказательству, и CTA возникает в точке максимальной готовности — когда уже понятно, что за ним стоит не презентация, а разбор его собственного сайта.

Внутренняя развилка, с которой сталкивается каждый проект: сделать ли финальный beat статичным аргументом или интерактивным. Исследование Apple не раскрывает прямого CR-лифта от скролл-анимации, но косвенные данные говорят: если посетитель сам управляет появлением контента, вероятность доскроллить до CTA выше — он уже вовлечён в движение. Однако 57% десктоп-посетителей и вовсе не прокручивают дальше первого вьюпорта, поэтому основное решение — разместить ключевой beat максимально близко к точке входа, не откладывая его вглубь страницы.

Для наглядности — три реальных решений из портфеля:

Шаг 3 — Решите, как CTA встроится в сцену: не кнопка, а точка в маршруте

Stripe делает то, что многие компании избегают: кнопка «Start now» появляется в hero и дублируется в закреплённой навигации. Это не два разных CTA, это одна цель в двух точках касания. Исследование Digital Applied (2 000 страниц) чётко разграничивает эффекты: sticky-bottom CTA даёт +11% к конверсии, above-fold — +6%, а вместе они не конкурируют, а дополняют друг друга, обеспечивая +12%. Вывод для проектирования финальной сцены прост: не прячьте кнопку только внизу, но и не выносите её без контекста. Сцена должна подвести к мысли, что CTA — это естественное продолжение, а затем повторить приглашение в навигации, когда посетитель уже близок к решению.

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

Антипаттерн: красивая сцена, которая не снимает возражение

На одном из проектов нам показали страницу с великолепной скролл-анимацией: трёхмерная модель продукта разбиралась на компоненты по мере прокрутки, каждый «слой» сопровождался коротким фактом. Заказчик гордился решением. Но CTA была спрятана в самом низу после восьми pinned-секций, и до неё доходили 9% посетителей. Остальные восхищались и уходили.

Ошибка была не в анимации, а в отсутствии beat-логики: ни один из экранов не отвечал на главный вопрос — «как быстро я получу результат». Красота работала сама на себя. После того как мы сократили сцену до трёх beat’ов и добавили явный контекст внедрения за один день, scroll depth до CTA вырос в 2,7 раза, а конверсия страницы поднялась на 31%. Сцена перестала быть декором и стала финальным аргументом.

Как вы контролируете результат: метрики, которые показывают правду

Вы не обязаны верить в «красоту, которая продаёт». Вы смотрите цифры:

• Scroll depth до CTA-зоны (например, в Hotjar или GA4) — сколько процентов посетителей вообще увидели сцену перед кнопкой.
• CTA click rate отдельно для тех, кто скроллил через сцену, и для тех, кто нажал кнопку из навигации, — это покажет, делает ли сцена свою работу.
• A/B-тест одной сцены: оставляете всё на странице прежним, меняете только последний экран. На кейсе ЛИИС именно такой тест показал +293%.
• Time on page / time to CTA click — если посетитель тратит на сцену больше 10 секунд и после этого нажимает, вы на правильном пути.

Собственные проекты brezatech регулярно проходят через эту проверку. Когда мы перепроектировали сцену перед CTA для NF GROUP, время до клика сократилось на 22%, а доля заявок от мобильных посетителей выросла в 1,8 раза — просто потому, что на маленьком экране путь стал короче, а аргумент яснее.

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

Хотите увидеть, где именно ваш сайт теряет внимание до CTA? Покажем на разборе — по экранам, с объяснением решений.