Коротко. Первый экран сайта — это витрина: посетитель решает «остаюсь или ухожу» за 3–5 секунд, ещё до того, как начнёт читать. Работающий экран отвечает на «что это и зачем мне» сразу: чёткий заголовок, подзаголовок-выгода, одна заметная CTA, доказательство в одну строку и честный визуал. В нашем кейсе ниже правка одного только первого экрана подняла конверсию лендинга с 0,8% до 2,4% — без единой новой строчки кода в остальной части сайта.
Представьте витрину магазина в торговом центре. Мимо за минуту проходят сотни людей, и каждый за долю секунды решает: зайти или пройти мимо. Никто не останавливается прочитать мелкий текст на двери — решение принимается по общей картинке.
Сайт устроен так же, только проходящих видно в аналитике. Первый экран — это та самая витрина. Если за 5 секунд человек не понял, что вы продаёте и зачем это ему, он закрывает вкладку — и в отчёте это выглядит как «показатель отказов 70%», хотя на деле это закрытая дверь.
Дальше разберём по косточкам: почему именно 5 секунд, какие шесть элементов держат первый экран, как читается взгляд по F-паттерну, какие ошибки убивают конверсию и как собрать свой первый экран за шесть шагов. Со сквозным кейсом и чек-листом в конце.
Почему всё решается за 5 секунд
По данным Nielsen Norman Group, у сайта меньше 10 секунд, чтобы донести ценность. Но «жёсткое» решение остаться или уйти мозг принимает ещё раньше — в первые 3–5 секунд. Это не осознанный выбор, а инстинкт: мозг сканирует визуальную иерархию и ищет знакомые паттерны.
Если первый экран не даёт мгновенного ответа на вопрос «что здесь и зачем мне это?» — выносится вердикт «не то место», и человек уходит. Причём уходит он не потому, что вы плохи, а потому что не успел этого понять.
Отдельная история — F-паттерн чтения. Айтрекинг той же NN/g показывает: на текстовых страницах взгляд движется буквой F — сначала по верхней строке слева направо, потом короче по второй строке, потом вертикально вниз по левому краю. Вывод простой и неудобный: правый нижний угол первого экрана почти не виден. Поэтому заголовок и оффер живут вверху и слева, а не «красиво по центру внизу под видео».
Шесть элементов работающего первого экрана
Хороший первый экран — не вопрос вкуса, а сборка из шести деталей. Каждая закрывает один вопрос в голове посетителя.
1. Заголовок — что и для кого, одной мыслью
Не «Добро пожаловать» и не «Мы рады видеть вас». Конкретно: что вы делаете и для кого. «Разработка сайтов для медицинских клиник в Москве», «Юридическое сопровождение сделок с недвижимостью». 7–12 слов, ноль абстракций. Заголовок «Мы № 1 на рынке» не работает: так пишут все и никто этому не верит.
2. Подзаголовок — выгода, а не история компании
Одно-два предложения о том, какую проблему вы снимаете и что получает клиент. Не «наша компания на рынке с 2015 года», а «делаем сайты, которые попадают в топ-3 Яндекса за 4–6 месяцев». Заголовок цепляет — подзаголовок объясняет, почему именно вы.
3. CTA — одна, заметная, конкретная
Не «Подробнее» и не «OK». «Получить бесплатный расчёт», «Записаться на замер», «Оставить заявку за 2 минуты». Кнопка обязана быть видна без скролла, контрастного цвета, и её текст отвечает на вопрос «что я получу, если нажму». Одна главная CTA — не три равнозначных, между которыми посетитель будет выбирать и в итоге не нажмёт ни одну.
4. Доказательство — одна строка фактов
«Более 200 проектов», «Работаем с 2018 года», «★★★★★ 4.9 — 120 отзывов в Google», логотипы клиентов. Одна строка под подзаголовком, а не абзац про миссию. Цифру можно проверить и запомнить — абстрактное «лидер отрасли» нельзя.
5. Визуал — по теме и честный
Реальное фото команды, продукта в работе или объекта бьёт любой сток. Стоковые «улыбчивые менеджеры» считываются мозгом как реклама и включают баннерную слепоту — их просто не замечают. Нет своих фото — берите скриншот результата, понятную графику или аккуратную иллюстрацию, но не «незнакомца в галстуке».
6. Навигация — компактная и не главная
Меню нужно, но оно не должно перетягивать внимание с оффера. Если навигация занимает 40% первого экрана — оставьте 4–6 ключевых пунктов, остальное уберите в подвал. Витрина — это товар, а не схема проходов между полками.
Хороший первый экран против плохого
Разница не в красоте, а в том, отвечает экран на вопросы посетителя или заставляет догадываться. Вот те же шесть элементов в двух версиях.
| Элемент | Зачем нужен | Частая ошибка |
|---|---|---|
| Заголовок | Что и для кого — за 1 секунду | «Добро пожаловать», «Мы № 1» |
| Подзаголовок | Выгода и причина выбрать вас | История компании с 2015 года |
| CTA | Одна, видна без скролла, конкретна | Нет кнопки или три «Подробнее» |
| Доказательство | Цифры и отзывы в одну строку | «Лидер рынка» без фактов |
| Визуал | Реальное фото / по теме | Сток, тяжёлое видео-фон |
| Навигация | 4–6 пунктов, не доминирует | Меню на пол-экрана, слайдер |
Ошибки, которые убивают первый экран
Слайдер-карусель из трёх баннеров. Их игнорируют: баннерная слепота из исследований Nielsen распространяется и на карусели, а до второго слайда долистывают единицы. Вместо трёх слабых сообщений по очереди — одно сильное. Карусель обычно значит, что внутри команды не смогли договориться о главном.
Видео-фон. Красиво ровно до момента, когда оно крадёт внимание у текста и убивает скорость загрузки на мобильных. Оправдано только если видео напрямую показывает продукт.
Слишком мелкий заголовок. H1 — минимум 28–36px на мобильных и 40–60px на десктопе. Заголовок, который приходится «вычитывать», не читают вовсе.
Размытый оффер. «Комплексные решения для вашего бизнеса» не говорит ни о чём. Чем конкретнее ниша и результат, тем сильнее экран.
Нет CTA на первом экране. Если ближайшая кнопка — после трёх прокруток, вы теряете тех, кто был готов нажать сразу.
Сквозной кейс: как +1,6% конверсии взялись из первого экрана
К нам пришёл клиент — мастерская корпусной мебели на заказ. Трафик с рекламы шёл, а заявок почти не было: конверсия лендинга 0,8%. Первый экран встречал посетителя слайдером из трёх стоковых кухонь, заголовком «Мебель вашей мечты» и кнопкой «Подробнее» где-то справа внизу.
Мы не трогали остальной сайт — только витрину. Заголовок стал конкретным: «Кухни и шкафы на заказ по вашим размерам — замер и проект за 1 день». Подзаголовок добавил выгоду про срок и гарантию. Слайдер заменили на одно реальное фото готовой кухни из их же портфолио. Под подзаголовок встала строка «230 проектов · 4.9★ на Яндекс.Картах». CTA «Подробнее» превратилась в «Рассчитать стоимость за 2 минуты» и переехала вверх-влево, в зону F-паттерна.
Через три недели конверсия дошла до 2,4% — в три раза больше при том же бюджете на рекламу. Ни новых страниц, ни редизайна — только честная витрина вместо нарядной двери. Это и есть главная мысль: первый экран часто меняет всё, не меняя ничего больше. Поэтому разработку лендинга мы начинаем именно с него, а не с картинки.
Соберите свой первый экран за 6 шагов
Возьмите свой текущий первый экран и пройдите по шагам — по порядку, не перескакивая.
- Сформулируйте оффер в одну строку. Что вы делаете, для кого и с каким результатом. 7–12 слов, без «лидеров» и «комплексных подходов».
- Добавьте подзаголовок-выгоду. Одно-два предложения: почему вы и что получит клиент. Уберите всё про «компанию с такого-то года».
- Поставьте одну CTA. Конкретный глагол + результат, контрастный цвет, видна без скролла. Остальные кнопки — вторичными или ниже.
- Дайте доказательство в строку. Цифры, рейтинг, логотипы клиентов. Один факт сильнее абзаца самопохвалы.
- Замените визуал на честный. Реальное фото, скриншот результата или тематическая графика вместо стока и тяжёлого видео.
- Проверьте по F-паттерну и на телефоне. Заголовок и CTA — вверху и слева; на мобильном всё помещается в первый экран без горизонтального скролла.
Как проверить, что первый экран работает
Самый честный тест бесплатный и занимает десять минут. Сделайте скриншот первого экрана и покажите его на 5 секунд 3–5 людям из целевой аудитории, которые не знают вашу компанию. Потом задайте два вопроса:
- «Чем занимается эта компания?»
- «Чем она отличается от конкурентов и что предлагает сделать?»
Если правильно отвечают четверо из пяти — витрина справляется. Если меньше — оффер размыт, и его надо переписывать, а не «делать покрасивее». Это тот же принцип, по которому книгу снимают с полки по обложке: у вас есть обложка и пять секунд, остальное прочитают потом.
И последнее, что стоит проверить до правок: доходит ли до первого экрана нужный человек. Если посетители уходят за три секунды, не скроллив, дело не в заголовке — они пришли не за этим, и лечится это на стороне источника, а не на странице. Если же доходят и уходят дальше по тексту — тогда да, читайте восемь причин, по которым заявки не доходят.
Хотите проверить свой заголовок прямо сейчас — спросите наш ИИ-консультант: он работает на этом сайте и скажет, что в нём непонятно человеку со стороны.
Коротко: что запомнить
- Первый экран — это витрина: решение «остаюсь или ухожу» принимается за 3–5 секунд, до чтения.
- Шесть несущих элементов: заголовок (что и для кого), подзаголовок-выгода, одна CTA, доказательство в строку, честный визуал, компактная навигация.
- Взгляд идёт по F-паттерну — заголовок и CTA держите вверху и слева, а не по центру под видео.
- Главные убийцы конверсии: размытый оффер, стоки, слайдеры-карусели, отсутствие CTA и «мы № 1» без фактов.
- Конкретная цифра сильнее любой самопохвалы: её можно проверить и запомнить.
- Проверка за 10 минут: покажите скриншот на 5 секунд незнакомым людям из ЦА — поняли оффер четверо из пяти, значит работает.
Частые вопросы
Сколько на самом деле времени есть у первого экрана?
По данным Nielsen Norman Group, у сайта меньше 10 секунд, чтобы донести ценность, но решение «остаюсь или ухожу» мозг выносит за первые 3–5 секунд. Это инстинктивная реакция, а не осознанный выбор: человек сканирует визуальную иерархию и ищет ответ на вопрос «что здесь и зачем мне это». Если ответа нет — вкладка закрывается ещё до того, как он начнёт читать.
Что обязательно должно быть на первом экране?
Шесть элементов: чёткий заголовок (что и для кого), подзаголовок с выгодой, одна заметная CTA-кнопка, конкретное доказательство в одну строку (цифры, отзывы), визуал по теме и компактная навигация. Уберите любой из них — и посетитель либо не поймёт оффер, либо не найдёт, куда нажать. Это не украшения, а несущая конструкция.
Можно ли ставить слайдер или карусель баннеров на первый экран?
Лучше не нужно. Исследования Nielsen показывают, что пользователи игнорируют карусели как рекламные баннеры, а до второго и третьего слайда долистывают единицы. Вместо трёх слабых сообщений по очереди дайте одно сильное, которое видно сразу. Карусель почти всегда означает, что внутри команды не смогли договориться о главном оффере.
Почему стоковые фото на первом экране — это плохо?
Улыбчивые менеджеры из фотобанка считываются мозгом как реклама и включают баннерную слепоту: их просто не замечают, а доверие к сайту падает. Реальное фото команды, продукта или объекта работает на порядок лучше. Если своих фото пока нет — берите скриншот результата, понятную графику или аккуратную иллюстрацию, но не «незнакомца в галстуке».
Как быстро проверить, работает ли мой первый экран?
Сделайте скриншот первого экрана, покажите его на 5 секунд 3–5 людям из целевой аудитории, которые не знают вашу компанию, и спросите: «Чем занимается эта компания и чем отличается от других». Если правильно отвечают четверо из пяти — первый экран справляется. Если меньше — оффер размыт, и его нужно переписывать.
Заголовок «Мы № 1 на рынке» — это сильный оффер?
Нет, это пустая фраза, которой пользуются все и которой никто не верит. Сильный заголовок конкретен: что вы делаете, для кого и с каким результатом — например «Сайты для медицинских клиник, которые приносят запись на приём». Цифру или факт всегда легче проверить и запомнить, чем абстрактное превосходство.
