Первый экран сайта: как сделать, чтобы посетитель не ушёл за 5 секунд

Что такое первый экран и почему от него зависит конверсия

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

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

Цифра «5 секунд» в заголовке — образ, а не норматив: никакого официального порога нет. Но в Яндекс Метрике есть близкий по смыслу показатель. Отказом считается визит, в котором был не больше одного просмотра страницы, длительность меньше заданного порога (по умолчанию 15 секунд) и не зафиксировано специальное событие «неотказ». То есть по умолчанию Метрика считает «ушедшим сразу» того, кто провёл на странице меньше 15 секунд и никуда не перешёл. Решение уйти человек принимает ещё раньше.

Для рекламы цена ошибки особенно высока: каждый клик оплачен. Если первый экран не цепляет, вы платите за посетителей, которые ушли, не дочитав заголовок.

Из чего состоит первый экран: 5 элементов

1. Оффер (главный заголовок)

Оффер — это предложение, сформулированное с точки зрения клиента. Не «ООО „Чистый дом“ — ваш надёжный партнёр», а «Уберём квартиру после ремонта за один день — с вывозом мусора». Хороший оффер отвечает на вопрос «что я получу» и сразу отсекает тех, кому вы не подходите.

2. Подзаголовок

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

3. Визуал

Фото или изображение, которое показывает результат или процесс: готовый ремонт, улыбку после лечения, блюдо, интерьер. Лучше всего работают реальные фото ваших работ и вашей команды. Стоковая картинка с офисными людьми в костюмах не добавляет ни смысла, ни доверия.

4. Кнопка действия

Кнопка с понятным следующим шагом: «Рассчитать стоимость», «Записаться на консультацию», «Получить смету за 15 минут». Слово «Отправить» или «Подробнее» не говорит, что произойдёт после нажатия. Для срочных услуг рядом с кнопкой стоит дать телефон, по которому можно позвонить в одно касание.

5. Признаки доверия

Короткие факты, которые снимают вопрос «а вам можно верить?»: опыт в годах, число выполненных проектов, рейтинг на картах, гарантия, лицензия, известные клиенты. Тут важна конкретика: «12 лет, 1 400 квартир» работает, «большой опыт» — нет. И только правда: всё, что вынесено на первый экран, клиент может проверить.

Формула оффера: как написать заголовок, который удерживает

Рабочая формула:

Результат для клиента + для кого или в какой ситуации + конкретное условие

Где условие — это то, что отличает вас и снимает главный страх: срок, цена или «цена от», гарантия, формат, место.

Ниже — примеры «было → стало» для условных ниш. Это иллюстрации подхода, а не реальные сайты.

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

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

Важное ограничение: в оффер можно писать только то, что вы действительно выполняете. Обещание «за один день» на первом экране, которое не выдерживается в жизни, обернётся плохими отзывами быстрее, чем принесёт заявки.

Как проверить оффер без дизайнера

Закройте название компании и покажите первый экран человеку, который вас не знает, на 5 секунд. Затем спросите: что здесь продают, кому это подходит и что нужно сделать дальше. Если он не может ответить на все три вопроса — оффер нужно переписать.

Первый экран под рекламу: соответствие объявлению

Если на страницу ведёт реклама в Директе, оффер должен продолжать объявление. Человек кликнул по «уборке после ремонта» — на первом экране он ожидает увидеть именно уборку после ремонта, а не общий список услуг.

Это требование есть и в правилах Директа: страница перехода должна соответствовать тексту объявления, а если в объявлении упомянута скидка, акция или конкретный товар — информация об этом должна явно присутствовать на странице. Там же перечислены ограничения, которые касаются первого экрана: на странице не должно быть всплывающих окон (допускаются формы связи), а рекламные блоки, если они есть на странице, не должны занимать больше половины первого экрана.

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

Если ваш первый экран сейчас не проходит проверку «5 секунд» или вы не уверены, что он совпадает с рекламой, — мы можем нарисовать новый вариант под вашу нишу бесплатно.

Типовые ошибки первого экрана

Первый экран на телефоне: отдельная проверка

На телефоне в первый экран помещается гораздо меньше, чем на компьютере. Часто дизайн согласовывают на большом мониторе, а потом выясняется, что на смартфоне видно только логотип, меню и половину заголовка.

Что проверить на телефоне:

• заголовок читается целиком и не разбит на десять коротких строк;
• кнопка действия видна без прокрутки;
• телефон для срочных услуг кликабелен — нажатие сразу запускает звонок;
• картинка не вытесняет оффер вниз;
• ничего не перекрывает текст: баннер о cookie, чат-виджет, кнопки соцсетей.

Смотреть стоит не только в эмуляторе браузера, но и на настоящих телефонах — своём и пары знакомых с другими моделями.

Как проверить первый экран: Вебвизор, карта скроллинга и другие отчёты Метрики

Мнения коллег и собственный вкус — плохой ориентир. Лучше смотреть на поведение реальных посетителей. В Яндекс Метрике для этого есть набор инструментов.

Как включить инструменты

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

Учтите срок хранения: записи Вебвизора хранятся 15 дней, включая текущий день. Данные карты скроллинга — тоже 15 дней. Если хотите сравнить старый и новый первый экран, смотрите данные вовремя и сохраняйте выводы.

Вебвизор: смотрим, что человек делал на первом экране

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

Что искать в записях:

• уходит ли человек, не прокрутив страницу — значит, первый экран не дал причины остаться;
• куда он кликает — частые клики по некликабельным элементам (картинке, иконке, цене) показывают, что человек ждёт от них действия;
• ищет ли он что-то — быстрые прокрутки вверх-вниз часто означают, что нужной информации не видно;
• как ведёт себя на телефоне — дошёл ли до кнопки, не мешает ли что-то.

Смотрите не 2–3 записи, а 20–30 визитов с нужной страницы входа: по одной записи легко сделать неверный вывод.

Карта скроллинга: сколько людей дошло дальше первого экрана

Карта скроллинга показывает, как распределяется внимание по областям страницы: при наведении на участок видно среднее время его просмотра и количество просмотров. Есть два режима: тепловая карта (время просмотра выделено зонами разного цвета) и карта прозрачности (менее просматриваемые области затемнены).

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

Карта кликов: работает ли кнопка

Карта кликов показывает, куда нажимают посетители. Если на первом экране кликают по чему угодно, кроме главной кнопки, — кнопка либо незаметна, либо её текст не мотивирует.

Аналитика форм: если форма на первом экране

Если форма заявки стоит прямо на первом экране, подключите аналитику форм. Отчёт показывает, сколько посетителей видели страницу с формой, сколько начали с ней взаимодействовать и сколько отправили. Если многие начинают заполнять и бросают — форма слишком длинная или на каком-то поле человек спотыкается.

Пример с цифрами: сколько стоит слабый первый экран

Допустим (пример условный), студия маникюра тратит на рекламу 30 000 ₽ в месяц и получает 1 000 переходов. Конверсия в запись — 1,5%, то есть 15 заявок по 2 000 ₽.

После переделки первого экрана — конкретный оффер с ценой, реальные фото работ, кнопка «Записаться онлайн» видна на телефоне — конверсия выросла, допустим, до 3%. При том же бюджете это 30 заявок по 1 000 ₽.

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

Чек-лист первого экрана

1. Заголовок — оффер с результатом для клиента, а не название компании.
2. В оффере есть конкретное условие: срок, цена, гарантия или отличие.
3. Из заголовка понятно, для кого предложение.
4. Подзаголовок добавляет новый аргумент, а не повторяет заголовок.
5. Визуал показывает результат или процесс — свои фото, не сток.
6. Есть одна главная кнопка с понятным действием («Получить смету», «Записаться»).
7. Есть 2–3 конкретных признака доверия: опыт, число клиентов, рейтинг, гарантия.
8. Для срочных услуг — кликабельный телефон рядом с кнопкой.
9. На телефоне заголовок и кнопка видны без прокрутки.
10. Ничего не перекрывает оффер при входе: всплывающие окна, баннеры, виджеты.
11. Первый экран совпадает с текстом рекламных объявлений, которые на него ведут.
12. Страница быстро загружается, нет тяжёлого фонового видео.
13. В Метрике включены Вебвизор, карта скроллинга и аналитика форм, настроены цели на заявки.
14. Через 1–2 недели после изменений вы посмотрели записи и карты и сравнили конверсию с прошлым периодом.

Первый экран — то, с чего мы начинаем работу над любым сайтом. Если хотите, чтобы мы разобрали ваш сайт и предложили новый первый экран, — оставьте заявку.