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

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

01Зачем первому экрану столько внимания

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

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

02Формула: что отвечает первый экран

Хороший первый экран укладывается в простую проверку. Посетитель должен мгновенно понять:

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

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

03Обязательные элементы

На практике первый экран собирается из нескольких устойчивых блоков.

Заголовок-оффер

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

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

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

Целевое действие

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

Подкрепление доверия

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

04Частые ошибки первого экрана

Большинство слабых экранов спотыкаются об одни и те же грабли:

• Абстрактный заголовок. «Решения для вашего бизнеса» не говорит ни о чём. Чем конкретнее, тем лучше.
• Огромная картинка без смысла. Красивое фото на весь экран без оффера — потерянное место.
• Несколько целей сразу. Когда на экране пять кнопок, посетитель не нажимает ни одну.
• Оффер ниже сгиба. Если главное видно только после прокрутки, до него часто не доходят.
• Перегруз текстом. Абзац мелким шрифтом никто не читает в первые секунды.

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

05Первый экран и устройства

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

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

06Как первый экран влияет на заявки

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

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

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

Официальная документация по теме — Справка Яндекс.Вебмастера.