У вас есть примерно 5 секунд, чтобы посетитель решил: остаться или нажать «Назад». Именно столько уходит на первичную оценку первого экрана. При этом большинство лендингов тратят это драгоценное время на красивые слайдеры, корпоративные фотографии и абстрактные слоганы. В этой статье разберём, что именно должно быть на первом экране, чтобы конвертировать, а не просто выглядеть.

Почему первый экран критичен

Первый экран (above the fold) - это область страницы, видимая без прокрутки сразу после загрузки. По данным тепловых карт, 70-80% пользователей принимают решение об уходе или продолжении просмотра именно здесь.

Если первый экран не отвечает на вопросы «Что это?», «Для кого?» и «Почему стоит остаться?» - человек уходит. Прокрутку делают только те, кого первый экран зацепил.

Для трафика из Яндекс Директа это особенно критично: человек уже сформулировал запрос, уже кликнул, уже ожидает конкретного ответа. Задержка или несоответствие - и клик стоимостью 50-200 рублей потрачен впустую.

Обязательные элементы первого экрана

Заголовок H1 - главный элемент

Заголовок должен в одном-двух предложениях ответить: что вы предлагаете, для кого и какая главная выгода. Не «добро пожаловать» и не название компании.

Структура сильного заголовка для лендинга: [Продукт/услуга] + [главная выгода] + [конкретика]

Примеры: - «Натяжные потолки в Москве - замер и монтаж за 1 день» - «Бухгалтерский учёт для ООО от 4 900 руб/мес - без штрафов и отчётных ошибок» - «Ремонт квартир под ключ - фиксированная смета без скрытых доплат»

Что делает заголовок слабым: - «Мы рады вам помочь» - нет конкретики - «Профессиональные услуги» - нет предмета - «Компания X - ваш надёжный партнёр» - нет выгоды для клиента

Подзаголовок (лид)

Уточняет и дополняет заголовок. Может содержать: - Уточнение целевой аудитории: «Для собственников квартир в новостройках» - Второстепенную выгоду: «Гарантия 3 года, выезд в течение 2 часов» - Конкретные цифры: «Уже 847 клиентов в Москве и области»

Объём - 1-3 предложения. Не больше. Не пытайтесь вместить всё в подзаголовок.

Форма или CTA-кнопка

Целевое действие должно быть видно без прокрутки. Это аксиома. Если пользователь хочет связаться - он не должен искать, куда нажать.

Выбор между формой и кнопкой зависит от стратегии: - Короткая форма (имя + телефон) - выше вовлечённость, пользователь сразу оставляет данные - Кнопка «Получить консультацию» - меньше трений, но затем нужна ещё одна страница или попап

Для большинства ниш на первом экране лучше работает мини-форма с 1-2 полями и кнопкой. Полноценную форму с 5+ полями оставьте для следующего блока.

Визуальный элемент

Изображение на первом экране влияет на восприятие качества и доверие. Правила выбора:

  • Показывайте результат, а не процесс: не «инструменты на столе», а «готовая кухня в интерьере»
  • Реальные фото лучше стоковых: люди чувствуют разницу интуитивно
  • Для услуг хорошо работают фото команды или специалиста
  • Изображение должно поддерживать заголовок, а не конкурировать с ним

Контактный телефон в шапке

Значительная часть аудитории принципиально не заполняет формы - они звонят. Особенно это характерно для возрастной аудитории 45+ и для срочных запросов («ремонт на вызов», «эвакуатор»).

Телефон должен: - Быть виден в шапке без прокрутки - На мобильных - быть кликабельным (тег tel:) - Иметь рядом часы работы или пометку «звонок бесплатный»

Что убрать с первого экрана

Слайдер/карусель. Исследования раз за разом показывают: слайдеры снижают конверсию. Они замедляют загрузку, рассеивают внимание и часто не видны пользователем - люди воспринимают движущиеся баннеры как рекламу и игнорируют.

Видео с автозапуском. Особенно со звуком - это раздражает. Видео как дополнительный элемент работает, но не в качестве центрального на первом экране.

Большое главное меню. Навигация уводит с лендинга. Если меню нельзя убрать - сделайте его минималистичным, только якорные ссылки внутри страницы.

Счётчики и анимации. «Уже 5000 клиентов» с крутящимся счётчиком привлекает внимание, но нередко перегружает страницу и отвлекает от формы.

Логотип компании размером на полэкрана. Название компании интересует посетителя в последнюю очередь. Он пришёл решить свою проблему.

Различия для десктопа и мобильных

На десктопе первый экран - широкий прямоугольник. Элементы можно расположить в две колонки: текст слева, форма или изображение справа.

На мобильном - вертикальная лента. Важен порядок: 1. Заголовок (крупный шрифт, читаемый) 2. Подзаголовок 3. CTA-кнопка или мини-форма 4. Изображение (под кнопкой, не между кнопкой и заголовком)

На мобильном первый экран - это примерно 600-700 пикселей по высоте. Всё главное должно влезть. Проверяйте на реальных устройствах, а не только в режиме эмуляции в браузере.

Примеры хорошей и плохой компоновки

Плохой первый экран: - Большой слайдер с тремя красивыми фото - Маленький подзаголовок «Профессиональные услуги для вас» - Кнопка «Узнать больше» в нижнем правом углу - Меню с 8 пунктами

Хороший первый экран: - H1: «Установка кондиционеров в Москве - выезд в день обращения» - Подзаголовок: «Гарантия 3 года. Работаем с 8:00 до 22:00 без выходных» - Форма: два поля (имя, телефон) + кнопка «Рассчитать стоимость» - Телефон в шапке - Фото мастера с установленным кондиционером справа

Заключение

Первый экран - это точка принятия решения. Его задача не восхитить визуально, а быстро и чётко ответить: «Ты попал туда, куда надо, и вот что тебе нужно сделать».

Чек-лист первого экрана: - [ ] Заголовок с конкретной выгодой виден без прокрутки - [ ] CTA (форма или кнопка) видна без прокрутки - [ ] Телефон кликабельный в шапке - [ ] Нет слайдера, нет автовидео - [ ] Изображение поддерживает оффер - [ ] Страница загружается быстро (проверить на мобильных)

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