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

Правило 5 секунд

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

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

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

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

Отдельная сложность возникает, когда на одну и ту же страницу ведут разные рекламные кампании с разными обещаниями — например, одно объявление делает акцент на цене, другое на скорости доставки. В таком случае помогает динамическая подмена заголовка первого экрана в зависимости от источника трафика, чтобы соответствие сообщения сохранялось для каждого канала отдельно.

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

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

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

• Заголовок — что за продукт/услуга и для кого
• Подзаголовок — конкретизация выгоды или механики
• CTA — понятный призыв к действию
• Визуал — фото продукта, скриншот интерфейса или иллюстрация, поясняющая суть предложения

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

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

Формула заголовка первого экрана

Рабочий шаблон: [Результат] + [для кого] + [за счёт чего/без чего]. Например: «Заявки с сайта в 2 раза дешевле для онлайн-школ — без смены рекламного агентства». Заголовок описывает выгоду читателя, а не характеристики продукта — «AI-платформа для маркетинга» хуже, чем «Экономьте 10 часов в неделю на рутинной аналитике».

Полезный приём при написании заголовка — сначала перечислить 5-10 вариантов без редактуры, а потом выбрать лучший, а не пытаться сразу написать идеальную формулировку. Часто третий или четвёртый по счёту вариант оказывается точнее и конкретнее первого, который обычно получается слишком общим.

Чего не должно быть на первом экране

• Автозапускающиеся видео или слайдеры с несколькими сообщениями подряд — размывают фокус
• Popup сразу при загрузке страницы — перекрывает оффер до того, как его прочитали
• Больше одного равнозначного CTA — выбор между двумя кнопками снижает клики по каждой
• Общие стоковые фото без связи с продуктом — не помогают понять оффер
• Слишком мелкий или бледный текст заголовка — если его приходится вчитываться, «правило 5 секунд» уже нарушено

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

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

Мобильный первый экран

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

На мобильном также стоит проверить, не «съедает» ли верхняя панель браузера и адресная строка критически важную часть экрана — то, что на десктопном макете выглядит отлично помещающимся блоком, на реальном телефоне может обрезаться до заголовка без CTA.

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

Примеры структур первого экрана по типу продукта

Общий принцип во всех примерах — акцент первого экрана отражает то, что важнее всего именно для этого типа покупательского решения. Для SaaS важно увидеть продукт (снизить неопределённость), для B2B-услуги — увидеть доказательство надёжности, для e-commerce — сам товар и выгодные условия.

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

Тестирование первого экрана

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

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

При планировании теста стоит менять один элемент за раз — заголовок, изображение или расположение CTA — а не переделывать весь экран целиком. Тест «до/после» с несколькими изменениями сразу показывает, что новая версия лучше или хуже, но не объясняет, какое именно изменение сыграло решающую роль, что затрудняет перенос вывода на будущие страницы.