~/wiki / ux-i-interfeisy / cac-ux-gde-dizayn-teryaet-polzovatelya

CAC и UX: где дизайн теряет пользователей в воронке привлечения

Основной чат

Чат для вайбкодеров: новости, гайды, поиск исполнителей, маркетплейс и разбор реальных кейсов.

$ cd раздел/ $ join vibe dev
CAC и UX: где дизайн теряет пользователей в воронке привлечения - обложка

CAC (Customer Acquisition Cost) — сколько стоит привлечь одного платящего пользователя. Для большинства бизнесов это одна из самых болезненных статей расходов.

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

Это и есть зона ответственности дизайнера в воронке привлечения: не привести пользователей, но не потерять тех, кого привели.


CAC: что это и как считать

Формула: CAC = Все расходы на привлечение за период / Количество новых клиентов за тот же период

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

Пример:

  • Рекламный бюджет за месяц: 500 000 ₽
  • Зарплаты маркетинговой команды: 300 000 ₽
  • Новых платящих клиентов: 100
  • CAC = 800 000 / 100 = 8 000 ₽

Ключевое соотношение — LTV/CAC. Нормой считается 3:1 и выше. Если LTV = 24 000 ₽ и CAC = 8 000 ₽ — соотношение 3:1, бизнес устойчив.


Где в воронке привлечения живёт дизайн

Воронка привлечения выглядит примерно так:

plaintext
Показ рекламы / Органический поиск
           ↓
Переход на лендинг / сайт
           ↓
Прочтение / просмотр контента
           ↓
Целевое действие (регистрация, заявка, покупка)
           ↓
Онбординг / первое использование
           ↓
Первая оплата

Маркетинг контролирует первый шаг — показ. Дизайн контролирует всё остальное.

Если конверсия из перехода на сайт в регистрацию — 2%, а можно сделать 4% — это вдвое снижает CAC без изменения рекламного бюджета.


Лендинг: первое касание и первые потери

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

Что убивает конверсию на лендинге

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

Работающая структура заголовка: [Что делает продукт] + [для кого] + [результат]. «Управляй командными проектами в одном месте — без лишних совещаний».

Несоответствие ожидания и реальности. Если в рекламе было «автоматизируй отчёты», а на лендинге — общие слова про «эффективность бизнеса» — пользователь чувствует несоответствие и уходит. Message match между рекламой и лендингом — один из самых сильных факторов конверсии.

Медленная загрузка. При задержке загрузки на 1 секунду конверсия падает на 7% (данные Akamai). После 3 секунд — значительная часть пользователей уже ушла. Это технический вопрос, но дизайнер влияет через: вес изображений, количество шрифтов, сложность анимаций.

Слишком много вариантов. Три CTA на экране — пользователь не знает куда нажать. Один чёткий следующий шаг конвертирует лучше, чем «зарегистрируйся», «посмотри демо», «прочитай кейсы», «скачай гайд».

Отсутствие социального доказательства в нужном месте. Отзывы и logos клиентов работают, но только если стоят в нужном месте — рядом с точками принятия решения, а не в самом низу страницы.

Нет ответа на главное возражение. «А вдруг не подойдёт?», «А вдруг сложно?», «А вдруг не смогу отменить?» — если лендинг не отвечает на главные страхи, часть пользователей уходит с неснятым возражением.

Структура высококонвертирующего лендинга

Это не универсальная формула — но рабочий каркас:

  1. Hero. Понятный заголовок + подзаголовок + один CTA. Никаких лишних элементов в первом экране.

  2. Social proof. Logos известных клиентов или цифры («используют 15 000 команд»). Сразу под hero — не в конце.

  3. Проблема. Опиши ту боль, которую решает продукт. Пользователь должен узнать себя.

  4. Решение. Как именно продукт решает эту проблему. Конкретно, без абстракций.

  5. Ключевые фичи/преимущества. Максимум 3–5. С акцентом на ценность, не на технические характеристики.

  6. Social proof глубокий. Кейсы, цитаты, результаты клиентов.

  7. Ответ на возражения. FAQ или отдельный блок с главными страхами.

  8. CTA. Повторение основного призыва к действию.


Форма регистрации: где теряются «тёплые» пользователи

Пользователь дочитал лендинг, кликнул на «Зарегистрироваться» — и вот он перед формой. Это уже тёплый, заинтересованный пользователь. Именно здесь обидно терять.

Типичные ошибки форм регистрации

Слишком много полей. Каждое дополнительное поле снижает конверсию. В исследовании Formstack сокращение формы с 11 до 4 полей увеличило конверсию на 120%.

Минимальная регистрация: email + пароль. Всё остальное — после.

Плохие сообщения об ошибках. «Неверный формат» не помогает пользователю. «Введите email в формате name@domain.com» — помогает. Ошибки должны быть рядом с полем, конкретными и подсказывать решение.

Слабые требования к паролю без объяснения. «Минимум 8 символов, включая цифру и специальный символ» — окей. Показывать это только после того, как пользователь уже ввёл пароль — плохо. Требования должны быть видны при фокусе на поле или до него.

Нет автозаполнения. Браузеры умеют автозаполнять email и пароли. Если форма блокирует это — пользователи раздражены.

Нет social login. «Войти через Google» конвертирует лучше для большинства B2C-продуктов, потому что убирает фрикцию пароля. Для B2B — зависит от аудитории.

Двойное подтверждение email. В 2026 году этот паттерн выглядит архаично. Проверка через single confirmation email достаточна.

Паттерны форм, которые работают

  • Одно поле на экране (особенно на мобайле)
  • Real-time validation: проверка прямо при вводе, а не при отправке
  • Progress indicator если регистрация многошаговая
  • «Назад» работает без потери введённых данных
  • Кнопка submit явно показывает, что произойдёт: «Создать аккаунт», а не просто «Далее»

Первый экран после регистрации: activation rate

Пользователь зарегистрировался. Теперь самое важное — что он видит следующим.

Большинство продуктов бросают пользователя на пустой главный экран с навигацией и без направления. Это прямой путь к нулевому D1 retention и высокому CAC (деньги потрачены, а пользователь ушёл ни с чем).

Первый экран должен:

  • Показывать конкретное первое действие
  • Не перегружать выбором
  • Иметь элементы guided setup или welcome-флоу

Паттерны первого экрана:

  • Welcome wizard. «Давайте настроим ваш аккаунт за 3 минуты». Структурированный онбординг с прогрессом.
  • Шаблон или пример. Вместо пустого холста — готовый пример для изучения. Так работает Notion с готовыми темплейтами.
  • Один CTA. Один чёткий первый шаг, остальное потом.

Лендинг для разных сегментов

Один лендинг не конвертирует одинаково для всех. Пользователь из LinkedIn с enterprise-запросом и пользователь по запросу «бесплатный таск-трекер» — разные люди с разными ожиданиями.

Что делать:

  • Создавай отдельные лендинги под разные каналы или сегменты (enterprise vs. SMB, индивидуальный vs. команда)
  • Используй message match: заголовок лендинга должен эхом повторять то, на что кликнул пользователь
  • Тестируй разные value proposition для разных сегментов

A/B-тесты для оптимизации CAC

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

Что тестировать в первую очередь:

  1. Заголовок (главная гипотеза: как сформулирована ценность)
  2. Основной CTA (формулировка кнопки)
  3. Social proof: logos клиентов vs. цитаты vs. цифры
  4. Наличие/отсутствие видео на hero
  5. Количество полей в форме регистрации

Приоритет тестирования: начинай с элементов «выше сгиба» (первый экран). Там самый большой трафик и самое большое влияние на конверсию.

Минимальный срок теста: до статистической значимости (p < 0.05). Обычно — минимум 1–2 недели для достаточного объёма данных.


Как считать вклад дизайна в снижение CAC

Это важно уметь показывать — как обоснование работы над лендингом или формой.

Пример расчёта:

Текущее состояние:

  • Переходов на лендинг в месяц: 10 000
  • Conversion rate (переход → регистрация): 3%
  • Новых пользователей в месяц: 300
  • Рекламный бюджет: 300 000 ₽
  • CAC = 300 000 / 300 = 1 000 ₽

После редизайна лендинга:

  • Переходов: те же 10 000
  • Conversion rate: 5%
  • Новых пользователей: 500
  • Рекламный бюджет: те же 300 000 ₽
  • CAC = 300 000 / 500 = 600 ₽

Снижение CAC на 40% без изменения рекламного бюджета — вот конкретный вклад дизайна.


Типичные точки потери пользователей в воронке: чеклист

Лендинг:

  • Заголовок понятен с первых 3 секунд (протестируй на ком-то, кто не знает продукт)
  • Message match: лендинг соответствует тому, на что кликнул пользователь
  • Один главный CTA на первом экране
  • Social proof видна на первых двух экранах
  • Главное возражение («А вдруг не подойдёт?») явно отработано
  • Скорость загрузки: Lighthouse score ≥ 90

Форма регистрации:

  • Минимальное количество полей (email + пароль для начала)
  • Ошибки конкретны и стоят рядом с полем
  • Real-time validation работает
  • Social login доступен (если аудитория B2C)
  • Кнопка submit описывает что происходит: «Создать аккаунт», а не «Далее»

Первый экран после регистрации:

  • Пользователь видит один конкретный следующий шаг, а не пустой экран с навигацией
  • Есть guided setup или welcome flow
  • Первое действие выполнимо за 2–3 минуты

Почему пользователи не верят лендингу: работа с доверием

Конверсия лендинга зависит не только от того насколько понятно и убедительно предложение — но и от того насколько пользователь доверяет тому что написано.

В интернете много обещаний. Пользователь приходит со скептицизмом. Задача лендинга — не только объяснить ценность, но и снять барьер недоверия.

Элементы доверия и где их размещать

Logos известных клиентов. Работают лучше всего в первом-втором экране — там, где пользователь ещё решает остаться или нет. «Нам доверяют Яндекс, Сбер, Тинькофф» — это сигнал, что продукт проверен серьёзными игроками.

Конкретные числа вместо прилагательных. «Более 10 000 команд» вместо «тысячи команд». «Экономит в среднем 4 часа в неделю» вместо «значительно экономит время». Конкретика = доверие.

Реальные имена и фото в отзывах. «Мария Иванова, руководитель проектов, Альфа-Банк» с фотографией — это совершенно другой уровень доверия, чем «Пользователь X, финансовая компания».

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

Безопасность данных. Для продуктов, работающих с данными пользователей — SSL-сертификат, упоминание о защите данных, соответствие GDPR или 152-ФЗ. Это особенно важно для B2B.

Гарантии. «30 дней бесплатно, карта не нужна» или «Вернём деньги если не подойдёт» — снимают главный страх: «потрачу деньги и окажется не то».

Анти-паттерны доверия

Стоковые фото вместо реальных. Пользователи научились различать стоковые изображения. Они снижают доверие, а не повышают.

Отзывы без верификации. «Отличный продукт! 10/10» без имени, компании и конкретики — не работает. Скорее вызывает подозрение.

Преувеличенные обещания. «Увеличит вашу продуктивность в 10 раз» воспринимается как маркетинговый буллшит и снижает доверие ко всему остальному что написано на странице.

Навязчивые pop-up'ы. «Только для вас скидка 50% следующие 10 минут» — пользователь видит это и думает «это не настоящая скидка». Срочность должна быть настоящей, иначе это manipulation pattern.


Mobile-first: где лендинги теряют мобильных пользователей

В 2026 году большинство трафика приходит с мобильных устройств. Но большинство лендингов всё ещё оптимизируются в первую очередь для десктопа, а мобайл — «потом как-нибудь».

Это дорогая ошибка.

Специфика мобильного поведения

Большой палец определяет дизайн. На мобайле пользователь держит телефон одной рукой. Зона досягаемости большого пальца — нижняя треть экрана. CTA-кнопки должны быть там, а не в середине или вверху.

Нет наведения курсора. Hover-эффекты не работают. Если на десктопе подсказка появляется при наведении — на мобайле её не существует.

Медленный интернет. Мобильные соединения нестабильны. Лендинг весом 5 МБ с десятком изображений на LTE грузится приемлемо, а на 3G — нет. Оптимизация под медленный интернет — не опциональная задача.

Короткое внимание. На мобайле пользователь часто смотрит в телефон между делами — в транспорте, в очереди. Ключевое сообщение должно считываться за 5–8 секунд.

Типичные проблемы мобильных лендингов

  • Мелкий текст, который невозможно прочитать без зума (< 16px)
  • Кнопки слишком маленькие для нажатия пальцем (< 44×44px)
  • Форма с полями, которые трудно заполнять на виртуальной клавиатуре
  • Горизонтальный скролл (таблицы, длинные строки кода)
  • Всплывающие окна, которые невозможно закрыть на маленьком экране
  • Автовоспроизведение видео со звуком

Воронка привлечения для B2B: особенности

B2B-продукты имеют принципиально другую воронку привлечения. Там не один пользователь принимает решение — там процесс согласования, демо, тендер.

Ключевые отличия B2B-воронки

Множество точек контакта. Пользователь видит продукт на конференции, потом ищет в Google, потом заходит на сайт, потом просит коллегу посмотреть, потом заказывает демо. Каждая точка — это потенциальный разрыв.

Разные роли принимают решение. Champion (тот, кто продвигает продукт внутри), Decision Maker (тот, кто подписывает), IT (тот, кто согласует безопасность). Каждому нужна своя информация.

Длинный цикл продажи. Между первым визитом на сайт и первым платежом может пройти 3–6 месяцев. Контент должен поддерживать интерес всё это время.

Что это значит для дизайна B2B-лендинга

Дай разные входы для разных ролей. «Для команд разработки», «Для менеджеров проектов», «Для IT-руководителей» — каждый находит своё.

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

Кейсы из вашей индустрии. «Как компания X из [сфера] увеличила [метрика] на [число]%» — это то, что читает B2B-покупатель. Не абстрактные testimonials, а конкретные кейсы.

Демо или trial без барьеров. Для B2B «попробовать» важно как никогда. Если trial требует корпоративного email и звонка от сейлза — большинство потенциальных клиентов уйдут к конкурентам с self-serve trial.


Что происходит с CAC при росте продукта

По мере роста продукта CAC имеет тенденцию расти — и дизайнер должен понимать, почему.

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

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

Что помогает держать CAC под контролем при росте:

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

Product-led growth. Пользователи привлекают других пользователей через product. Приглашения в командные продукты, шеринг результатов, публичные страницы — это вирусные механики с CAC близким к нулю. Всё это — дизайн-решения.

Viral coefficient. Если каждый новый пользователь в среднем приглашает 0.3 других пользователей — 30% роста идёт без маркетинговых затрат. Дизайн приглашений, sharing-механик и «made with X» брендинга напрямую влияет на этот коэффициент.

Brand awareness. Когда бренд известен — стоимость клика в рекламе ниже, конверсия с лендинга выше. Дизайн продукта, который хочется показывать другим, работает на brand awareness.


ИИ и CAC: как найти и устранить потери в воронке привлечения

ИИ помогает трёмя способами: анализировать лендинг текстом, считать финансовый эффект UX-изменений, и генерировать гипотезы для A/B-тестов.

Промпт: аудит лендинга на конверсию

Можно загрузить скриншот или описать структуру лендинга:

plaintext
Вот [скриншот / описание структуры] нашего лендинга.

Продукт: [что делает, для кого]
Целевое действие: [регистрация / заявка / покупка]
Текущий conversion rate: [%]
Основной источник трафика: [контекст / SEO / соцсети / и т.д.]

Проведи аудит лендинга с точки зрения конверсии:
1. Насколько понятен заголовок (rule of 5 seconds: понятно ли за 5 секунд кому это и зачем)?
2. Есть ли message match с вероятным источником трафика?
3. Насколько убедителен социальный proof и правильно ли он расположен?
4. Насколько чёткий и убедительный основной CTA?
5. Отработаны ли главные возражения?

Для каждого пункта: оценка и конкретная рекомендация.

Промпт: сгенерировать гипотезы для A/B-тестов на лендинге

plaintext
Лендинг: [описание или скриншот]
Текущий conversion rate: [%]
Бенчмарк для нашей ниши: [%] (если знаешь)
Данные из аналитики: [scroll depth, heatmap наблюдения, если есть]

Сгенерируй 10 гипотез для A/B-тестов. Для каждой:
— Что меняем (элемент)
— На что меняем (конкретная версия B)
— Почему это должно помочь (механика влияния на конверсию)
— Ожидаемый размер эффекта: большой / средний / малый

Отсортируй по потенциалу влияния × простоте реализации.

Промпт: рассчитать финансовый эффект улучшения конверсии

plaintext
Текущие данные:
— Трафик на лендинг в месяц: [число]
— Текущий conversion rate (посетитель → регистрация): [%]
— Конверсия из регистрации в платящего: [%]
— ARPU: [сумма] ₽

Рассчитай:
1. Текущее количество платящих в месяц
2. Текущий CAC, если рекламный бюджет: [сумма] ₽

Затем смоделируй три сценария улучшения conversion rate лендинга:
— Пессимистичный: +0.5%
— Базовый: +1%
— Оптимистичный: +2%

Для каждого сценария: новый CAC, снижение в % и в рублях, дополнительный доход за год.

Промпт: улучшить текст CTA и заголовка

plaintext
Вот текущий заголовок нашего лендинга: "[вставь]"
Текущий CTA: "[вставь]"

Продукт: [описание]
Аудитория: [кто целевой пользователь]
Главная боль аудитории: [что их беспокоит]

Предложи 5 вариантов заголовка и 5 вариантов CTA.

Для заголовка: каждый вариант должен быть понятен за 3 секунды и отвечать на вопрос "зачем мне это?"
Для CTA: каждый должен описывать действие и результат, а не просто команду ("Начать бесплатно", а не "Попробовать")
$ cd ../ ← назад к UX и интерфейсы