Деконструкция hero-секции: promise, proof, action

Действуй как старший landing-page designer. Hero — это не «красивый блок сверху», это 5 секунд, чтобы юзер ответил на 3 вопроса: «что это?», «для меня ли?», «что делать?». Если хоть один вопрос остался без ответа — hero провален.

Источник: {{url_or_screenshot}} Продукт: {{product_one_liner}} Primary action: {{primary_action}}

Закон hero: triple-P

Если одной части нет — юзер уйдёт на этапе её отсутствия.

Разбор по 7 критериям

1. Headline

• Конкретный, не абстрактный. «Modern productivity for teams» — мёртв. «Plan, ship, and track projects in one place» — живой.
• Юзер узнаёт себя. Если headline подходит 50 продуктам — переписать.
• 5-12 слов. Длиннее — не помещается на mobile, не читается за 2 секунды.

2. Sub-headline

• Раскрывает 1 деталь headline'а: для кого / как / почему лучше.
• 15-25 слов максимум.
• НЕ должна повторять headline другими словами.

3. Visual (hero image / video / mockup)

• Показывает продукт в действии, не stock-фото абстрактных людей.
• Если screenshot — то с реальными данными, не lorem ipsum.
• Не «бесконечный 3D-рендер», который не говорит, что внутри продукта.

4. Primary CTA

• Один. Не 3 одинаково-ярких. Один primary, один secondary.
• Глагол первый: «Start free trial», «Book demo», «Download». Не «Learn more».
• Размер заметный: button height 48-56px на desktop, full-width на mobile.

5. Secondary CTA / no-friction option

• Опционально: «See it in action» (видео), «Read docs», «See pricing».
• Для skeptic'ов и researchers. Не должен конкурировать с primary.

6. Above-the-fold real estate

• На typical desktop (1366×768) — primary CTA должен быть видим без скролла.
• На typical mobile (375×667) — headline + sub + CTA в первый viewport.
• Если CTA на 4-м экране — это уже не hero, это «pre-landing».

7. Trust signals (опционально, но усиливают)

• Логотипы клиентов под hero (без них = ниже).
• Цифра: «10,000+ teams», «4.9★ on G2».
• Рейтинг, security badges — если в домене это важно.

Что сделать

Шаг 1. Декомпозиция текущего hero

Перечисли:

• Headline: дословный текст
• Sub-headline: дословный текст
• Visual: что изображено (1 предложение)
• Primary CTA: текст + позиция
• Secondary CTA: текст + позиция (если есть)
• Trust signals: что есть (если есть)
• Что выше fold на desktop / mobile

Шаг 2. Ответы на 3 вопроса

За 5 секунд просмотра, может ли «холодный» юзер ответить:

• Что это? — оцени 1-10. Если ≤6 — headline провален.
• Для меня ли? — оцени 1-10. Если ≤6 — нет signal'а аудитории.
• Что делать? — оцени 1-10. Если ≤6 — CTA не очевиден.

Шаг 3. Проблемы по triple-P

Шаг 4. План переделки

Для каждой проблемы:

• Замена / переписать / убрать
• Конкретно: исходный текст → новый текст (или: «убрать <элемент>, перенести в <раздел>»)
• Обоснование: какой из 3 вопросов закрывает

Шаг 5. Mobile-проверка

Что меняется на 375px:

• Все ли элементы помещаются в первый экран?
• Headline сжимается грамотно (не 6 переносов)?
• CTA full-width и большая?
• Visual viewable или скрыт?

Формат вывода

Брифинг

3-5 предложений: что главное не так, главное изменение.

Текущий hero (декомпозиция)

Headline: "..."
Sub-headline: "..."
Visual: ...
Primary CTA: "..." (position)
Secondary CTA: "..." or none
Trust signals: ...

Оценка по 3 вопросам

What is this? — X/10
Is it for me? — X/10
What do I do? — X/10

Проблемы по triple-P

Markdown-таблица.

Переделка

Каждое изменение:

• Element
• Now: «текущий текст / описание»
• New: «новый текст / описание»
• Why: какой вопрос закрывает
• Risk: если есть

Mobile-spec

Что меняется на 375px.

Что хорошо — оставить

2-3 пункта.

Anti-patterns (НЕ делать)

• ❌ Headline «Welcome to <product name>». Юзер уже здесь — не нужно его приветствовать.
• ❌ Абстрактный headline без конкретики: «Unleash your potential», «Reimagine work». 0 информации.
• ❌ 4 CTA одной яркости («Start free», «See demo», «Read more», «Contact sales»). Юзер парализован.
• ❌ Stock-фото счастливых людей с ноутбуками. Покажи продукт.
• ❌ Hero высотой 100vh с одним заголовком и без CTA. Юзер скроллит, не видя зачем.
• ❌ Video, автоплеящееся со звуком. Юзер закроет вкладку.
• ❌ «Trusted by» с одним размытым логотипом. Если 0-2 логотипа — лучше убрать.
• ❌ Sub-headline, повторяющий headline другими словами. Это пустота.
• ❌ Mobile-hero, где CTA на 3-м экране. Mobile-юзер не доскроллит.