Первый экран - это то, что посетитель видит до скролла, и по данным Яндекс Метрики 40-60% решают остаться или уйти за 5-7 секунд, не докручивая страницу. Обязательный набор: заголовок с конкретной выгодой, подзаголовок с условиями, одна CTA-кнопка без прокрутки, визуальный якорь по теме продукта и хотя бы один элемент социального доказательства.
Почему первый экран решает всё
Первый экран это то, что посетитель видит до первого скролла. На мобильном это около 600 пикселей высоты, на десктопе 700-900. По данным Яндекс.Метрики, 40-60% посетителей принимают решение остаться или уйти за 5-7 секунд, то есть не докручивая страницу.
Если на первом экране нет главного оффера, дальше ничто не поможет. Можно написать гениальные отзывы в 5-м блоке, но до них никто не доберётся. Поэтому 80% внимания при проектировании идёт именно на верхние 700 пикселей.
Ниже 10 элементов, которые либо обязательны, либо сильно влияют на конверсию. Порядок по убыванию важности.
1. Заголовок с понятным обещанием
Главный продающий элемент страницы. Задача заголовка - за 3 секунды ответить на вопрос "что я тут получу". Не "о нас", не "добро пожаловать", а конкретная выгода или предложение.
Рабочие формулы:
- "Что получает клиент за что-то". Пример: "Продающий лендинг за 2 дня и 15 000 рублей".
- "Решение проблемы в цифрах". Пример: "Поток заявок в стоматологию от 3 000 рублей за лид".
- "Отстройка от конкурентов". Пример: "Ремонт квартир с фикс-ценой и сроком без изменений в смете".
Размер шрифта заголовка - от 40 пикселей на мобильном, от 56 на десктопе. Контраст с фоном минимум 7:1. Это не дизайнерский каприз, а физика восприятия.
2. Подзаголовок с уточнением условий
Под заголовком идёт подзаголовок из 1-2 строк. Он уточняет оффер: кому, на каких условиях, что входит. Подзаголовок читается после заголовка у 70% посетителей, ещё 20% читают только его.
Пример связки:
Заголовок: "Продающий лендинг за 2 дня и 15 000 рублей"
Подзаголовок: "Дизайн, вёрстка, копирайтинг, подключение домена и метрики. Гарантия возврата, если не уложусь в срок."
Подзаголовок должен снять первое возражение, которое возникает у читателя после заголовка. Если заголовок обещает быстро, подзаголовок объясняет, что именно влезает в этот срок.
3. CTA-кнопка без скролла
Главная кнопка целевого действия обязательно видна на первом экране без прокрутки. Иначе посетитель не сможет среагировать на оффер сразу, пока импульс свежий.
Требования к кнопке:
- Размер от 48×48 пикселей (минимум для пальца на мобильном).
- Яркий контрастный цвет относительно фона.
- Текст в активной форме: не "заказать", а "заказать лендинг за 2 дня".
- Только одна главная кнопка. Вторая рядом только если она повторяет главную другим каналом (Telegram / MAX / звонок).
Две кнопки разного веса на первом экране режут конверсию в 1,5-2 раза. Посетитель выбирает между ними вместо того, чтобы нажать.
4. Визуальный якорь
Это картинка, фото или иллюстрация, которая помогает понять суть продукта. Плохие варианты:
- Стоковое фото "счастливые люди в офисе с планшетом".
- Абстрактные "геометрические облака" без смысла.
- Огромный видеофон, который тормозит загрузку.
Хорошие варианты:
- Скриншот самого продукта или интерфейса.
- Фото выполненной работы (для услуг: отремонтированная квартира, готовая причёска, выточенный зуб).
- Кастомная иллюстрация, передающая суть процесса.
Визуал не должен отвлекать от заголовка. Соотношение 60/40 в пользу текстовой части работает лучше, чем 50/50.
5. Социальное доказательство сверху
Ещё до скролла желательно показать один элемент доверия. Это может быть:
- Счётчик "125 проектов с 2019 года".
- Логотипы известных клиентов.
- Короткая цитата из отзыва с фото автора.
- Рейтинг на Яндекс.Картах или Отзовик.
Один такой элемент сверху увеличивает конверсию в клик по CTA на 10-20%. Посетитель быстрее проникается доверием и готов действовать.
Что не работает как доказательство
- "Более 10 лет на рынке" без конкретики. Это слова без привязки.
- "Тысячи довольных клиентов" без цифры, источника и проверки.
- Анонимные отзывы с выдуманными фото из стока. Профессиональный посетитель считывает мгновенно.
6. Короткие выгоды или преимущества
Под главным оффером часто уместны 3-4 коротких буллета с конкретными выгодами. Каждый буллет - одна строка. Каждый с иконкой или маркером.
Пример:
- Договор и чек в день оплаты
- Возврат 100% при срыве срока
- Лично сам, без менеджеров
- Работаю с 2019 года, 140 проектов
Буллеты читаются быстрее, чем абзац текста, поэтому работают хорошо. Но 5+ пунктов превращаются в мусор, который никто не читает. Оптимум - 3-4 ключевых факта.
7. Шапка с навигацией или контактами
Вверху страницы шапка с минимальным набором: логотип, телефон, 1-2 пункта меню (только если они ведут к действию), и одна кнопка CTA (та же, что в главном блоке).
Спорный элемент - меню на лендинге. Если меню есть, оно должно вести либо к якорям внутри страницы, либо к целевому действию. Меню со списком услуг на лендинге - это антипаттерн, размывает фокус.
Что точно стоит держать в шапке
- Номер телефона кликабельным в tel-ссылке.
- Иконки мессенджеров (Telegram, MAX) с прямыми ссылками на чат.
- Маленький CTA-оффер напоминалкой.
8. Индикатор скролла или направляющий элемент
Часть посетителей не понимает, что страница длинная и ниже есть контент. Им кажется, что первый экран - это весь лендинг. Чтобы подсказать, что можно скроллить, используют:
- Стрелку вниз с анимацией "пульс".
- Короткий текст "ещё 12 блоков ниже".
- Небольшой отступ следующего блока, чтобы было понятно, что он есть.
Индикатор даёт прирост глубины просмотра на 15-25%. Это не прямое влияние на конверсию, но косвенно работает: больше людей доходят до отзывов и цен.
9. Без лишних элементов отвлечения
Часто первый экран перегружают элементами, которые растягивают внимание:
- Слайдер с 6 офферами. Посетитель видит только первый, остальные не докликивают.
- Попап на 3-й секунде с "подпишитесь на рассылку". Раздражает, снижает время на странице.
- Баннер "мы используем cookies" во весь экран. Закрывает половину контента, требует клика.
- Чат со смайликом "здравствуйте, чем помочь" в правом нижнем углу, который перекрывает CTA.
Всё это убирается с первого экрана. Cookies - узкая полоска снизу. Чат включается после 30 секунд на странице. Попапы - только на exit-intent, когда курсор ушёл к крестику.
10. Адаптация под источник трафика
Если лендинг получает трафик из Яндекс.Директа по ключу "ремонт ванной недорого", заголовок первого экрана должен упоминать ремонт ванной и вилку цен. Если по ключу "дизайн кухни" - кухню.
Техническая реализация - мультилендинг с подменой контента по UTM-метке. Сервисы типа Yagla делают это из коробки. Рост конверсии после настройки 20-40% на тех же рекламных объявлениях.
Для небольшого бизнеса альтернатива проще: 2-3 отдельных лендинга под разные ключевые группы, каждый со своим акцентом на первом экране.
Какие ошибки первого экрана дороже всего обходятся?
| Ошибка | Потеря конверсии |
|---|---|
| Заголовок "Добро пожаловать" без оффера | до 60% |
| CTA-кнопка ниже скролла | до 30% |
| Стоковое фото вместо продукта | до 20% |
| Меню со списком услуг | до 15% |
| Слайдер с 5+ слайдами | до 25% |
| Нет подзаголовка под заголовком | до 15% |
| Попап в первые 5 секунд | до 20% |
Эти потери суммируются. Первый экран с 3 ошибками из списка может терять до 70% потенциальной конверсии против оптимального варианта.
Как проверить свой первый экран?
- За 3 секунды ясно, что предлагает сайт.
- На первом экране видна кнопка целевого действия.
- Под заголовком есть подзаголовок с условиями.
- Визуал показывает продукт, а не абстракцию.
- Есть минимум один элемент социального доказательства.
- На мобильном всё помещается без горизонтального скролла.
- Нет попапов в первые 5 секунд.
- Кнопки отзывчивы сразу, а не через 2 секунды на загрузку JS.
- Текст читается на обоих цветах фона (день/ночь темы браузера).
- Загрузка первого экрана меньше 1,5 секунд на 4G.
Частые вопросы
Можно ли использовать видео на первом экране вместо статичной картинки?
Можно, но только лёгкое и без звука, и обязательно с постером на случай медленного интернета. Видео длиннее 5-7 секунд в цикле начинает отвлекать от заголовка сильнее, чем помогает.
Нужно ли тестировать первый экран на реальных пользователях, а не только показывать знакомым?
Полноценный A/B-тест на лендинге с небольшим трафиком часто не набирает статистической значимости месяцами. Быстрее и честнее показать скриншот пяти-семи людям из целевой аудитории и засечь, за сколько секунд они поймут оффер.
Можно ли обойтись без социального доказательства, если бизнес совсем новый?
Можно, но тогда усильте заголовок и подзаголовок конкретикой: цифрами, сроком, условиями гарантии. Пустое место без счётчика проектов лучше, чем выдуманная цифра "тысячи клиентов", которую легко поймать на неправде.
Сколько времени обычно занимает переделка первого экрана?
Сама формулировка заголовка и подзаголовка - 3-5 часов вместе с примеркой вариантов. Если меняется ещё и визуал, добавьте время на поиск или съёмку подходящей картинки: от пары часов до нескольких дней.
Короткий итог
Первый экран - это не "красиво выглядит", а "понятно за 5 секунд и есть одна кнопка". Всё остальное вторично.
Если сомневаетесь в своём первом экране, откройте лендинг на мобильном, сделайте скриншот, покажите человеку, который не знает ваш продукт. Пусть за 5 секунд скажет, что вы предлагаете. Если не может - перерисовывайте первый экран.
Инвестиция 3-5 часов в правильную формулировку заголовка и подзаголовка окупается в 2-3 раза быстрее, чем любое улучшение нижних блоков.
