Определение
Hero Section — это первый экран сайта или лендинга, который пользователь видит сразу после загрузки страницы, без прокрутки. В русскоязычном DTC- и e-commerce-контексте его чаще называют «главный экран», «первый экран» или «баннер-хиро». Это ключевая зона конверсии: именно здесь происходит «первое касание» с брендом, и именно здесь посетитель за 3–5 секунд решает — остаться или уйти.
В отличие от западной практики, где hero section часто выполняет имиджевую функцию, в российском DTC главный экран почти всегда несёт прямую коммерческую нагрузку: оффер, цена, кнопка «Купить», УТП и социальное доказательство. Это связано с более прагматичным поведением аудитории и высокой стоимостью трафика в Яндекс.Директ и таргете.
Аналогия
Представьте витрину магазина в торговом центре. Пока человек идёт по галерее, у него есть ровно 3 секунды, чтобы понять: «Что здесь продают? Почему мне это выгодно? Зачем заходить внутрь?» Если витрина пустая, перегруженная или непонятная — он проходит мимо.
Hero Section — это та же витрина, только цифровая. И если в офлайне прохожий хотя бы замедлит шаг из любопытства, то в онлайне отказ происходит мгновенно: по данным Google, если страница грузится дольше 3 секунд, 53% мобильных пользователей закрывают её. А согласно исследованию Nielsen Norman Group, среднее время удержания внимания на первом экране — 10–15 секунд, и за это время пользователь сканирует всего 20–28% текста.
Формула
Эффективность главного экрана можно условно описать так:
CR (hero) = (Релевантность оффера × Ясность УТП × Сила CTA) / (Время загрузки + Визуальный шум)
Где:
- Релевантность оффера — совпадение с запросом/рекламным объявлением (message match)
- Ясность УТП — понятность за 3 секунды
- Сила CTA — контрастность, глагол действия, срочность
- Время загрузки — LCP (Largest Contentful Paint) в секундах
- Визуальный шум — количество конкурирующих элементов
Целевые бенчмарки для российского e-commerce:
- Конверсия первого экрана в скролл: ≥ 65%
- CTR по CTA в hero: 3–7% (для холодного трафика)
- LCP: ≤ 2,5 сек
- Bounce rate лендинга с сильным hero: 35–45%
Сравнение: Hero Section vs. другие блоки
| Параметр | Hero Section | Middle Section (середина) | Footer / подвал |
|---|---|---|---|
| Цель | Захватить внимание, дать оффер | Убедить, снять возражения | Дожать, дать контакты |
| Время контакта | 3–15 сек | 30–90 сек | 10–20 сек |
| Основной элемент | Заголовок + CTA + визуал | Выгоды, отзывы, кейсы | Реквизиты, соцсети, повтор CTA |
| Конверсия в целевое действие | 3–7% | 8–15% | 2–4% |
| Тип трафика | Холодный | Тёплый | Горячий |
| Типичная ошибка | Перегрузка смыслами | Слабая аргументация | Отсутствие повторного CTA |
Сценарии применения
1. DTC-бренд косметики (запуск новинки)
Hero с одной моделью, крупный заголовок «Сыворотка с ретинолом: эффект через 14 дней», CTA «Забрать со скидкой 30%», под ним — таймер обратного отсчёта. Конверсия в корзину: 6,2%.
2. Магазин электроники (распродажа)
Первый экран с баннером «Чёрная пятница: скидки до 70%», слайдер из 3 категорий, кнопка «Смотреть акции». CTR: 4,8%. LCP: 1,9 сек.
3. Подписочный сервис (SaaS/DTC)
Hero с УТП «Доставка фермерских продуктов за 2 часа», CTA «Попробовать за 1 ₽», социальное доказательство «12 000 семей уже с нами». Конверсия в триал: 9,1%.
4. Локальный бренд одежды
Hero с видео-лукбуком, заголовок «Капсула осень-зима 2025», CTA «Смотреть коллекцию». Время на экране: 22 сек, глубина скролла: 78%.
Частые ошибки
1. Слайд-шоу на 5+ слайдов. Пользователь не успевает считать ни один. Оптимально — 1 статичный баннер или максимум 2–3 слайда с автопрокруткой не быстрее 7 сек.
2. Заголовок-загадка. «Мы меняем представление о качестве» — не работает. Работает: «Кроссовки из экокожи за 4 990 ₽. Доставка за 1 день».
3. CTA ниже сгиба. Кнопка должна быть видна без скролла на мобильном (viewport 360×640).
4. Тяжёлое видео на фоне. Убивает LCP. Если видео — то ≤ 1,5 МБ, с постером и lazy-load.
5. Отсутствие message match. Реклама про «скидку на диваны», а hero — про «мебель для офиса». Конверсия падает в 2–3 раза.
6. Мелкий шрифт и низкий контраст. По WCAG контраст текста к фону — минимум 4.5:1. На мобильном кегль заголовка — от 28 px.
7. Нет социального доказательства. В российском e-commerce наличие рейтинга, числа отзывов или логотипов партнёров повышает доверие на 18–25%.
Связанные термины
- CTA (Call to Action) — призыв к действию, ключевой элемент hero
- Above the Fold — зона до первого скролла
- LCP (Largest Contentful Paint) — метрика скорости загрузки главного изображения
- Message Match — соответствие рекламного объявления и первого экрана
- Bounce Rate — показатель отказов
- УТП (USP) — уникальное торговое предложение
- Social Proof — социальное доказательство
- A/B-тест первого экрана — метод оптимизации конверсии