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

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

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

Что человек решает за первые секунды

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

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

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

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

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

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

Элемент	Зачем он нужен	Как проверить, что он работает
Заголовок с услугой и городом	Отвечает на «туда ли я попал» и «мой ли это регион»	Закройте всё остальное. По одному заголовку понятно, что продаётся и где?
Подзаголовок с конкретикой	Уточняет условия: сроки, выезд, гарантийные обязательства, формат работы	В нём есть факт, а не прилагательное? «Выезд в день обращения» — факт, «высокое качество» — нет
Цена или «от»	Отсекает тех, кому дорого, и удерживает тех, кому подходит	Цифра видна без прокрутки? Понятно, за что именно эта сумма — за метр, за час, за комплект?
Одна главная кнопка	Даёт очевидное следующее действие	Кнопок действия ровно одна и она отличается по цвету от остального?
Телефон в шапке	Для части аудитории звонок — единственный привычный способ	Номер виден без прокрутки и кликабелен на телефоне?
Подтверждение реальности	Опыт, число выполненных работ, лицензия, фото объектов — снимает недоверие	Это проверяемый факт, а не «более 1000 довольных клиентов» без источника?
Навигация или якоря	Показывает, что на сайте есть остальное: цены, работы, контакты	Из верхней зоны можно попасть в раздел с ценами за один клик?

Заголовок: услуга и город вместо слогана

«Создаём пространство для жизни» — красиво и бесполезно: по этому заголовку нельзя понять, это застройщик, дизайн-студия, мебельщики или агентство недвижимости. Рабочая формула проще: что вы делаете + для кого/где. «Натяжные потолки в Твери и области», «Ремонт холодильников на дому, Приморский район». Человек, пришедший по запросу, видит своими глазами тот же набор слов, который сам и ввёл, — и остаётся.

Цена: почему её прячут и что от этого теряют

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

Действие: одна кнопка, а не пять

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

Что убивает первый экран

Слайдер с автопрокруткой. Человек начинает читать первый баннер, на третьей секунде он уезжает. Вернуть его стрелкой догадывается не каждый. Слайдер существует не для посетителя, а для внутреннего компромисса: маркетолог хочет одно, владелец другое, директор третье — и все три сообщения ставят в карусель. Результат — ни одного прочитанного.

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

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

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

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

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

Мобильный первый экран — отдельная история

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

Элемент	Настольная версия	Телефон	Что делать
Заголовок с услугой и городом	Обязателен	Обязателен	Сократить до одной строки в две-три, без переноса на четыре
Подзаголовок	Обязателен	Желателен	Оставить один самый сильный факт, остальное ниже
Цена или «от»	Обязательна	Обязательна	Вынести в одну строку рядом с заголовком
Кнопка действия	Обязательна	Обязательна	Во всю ширину, палец попадает без прицеливания
Телефон	В шапке текстом	Иконка вызова	Сделать ссылкой для звонка в один тап
Блок доверия	Желателен	Убрать за сгиб	Перенести сразу под первый экран
Фоновая фотография	Можно	Осторожно	Проверить контраст текста, при сомнении — сплошной фон
Меню	Горизонтальное	Кнопка меню	Не прятать телефон внутрь меню

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

Как проверить свой первый экран за пятнадцать минут

Шаг первый. Откройте главную и ключевую страницу услуги на ноутбуке, сделайте скриншот без прокрутки. Повторите на телефоне. Получилось четыре картинки.

Шаг второй. Покажите каждую картинку человеку, который не знает вашего бизнеса: соседу, родственнику, знакомому из другой отрасли. Задайте три вопроса и записывайте ответы дословно. Что здесь продают? В каком городе? Что нужно сделать, чтобы это заказать?

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

Шаг четвёртый. Посмотрите в Метрике, докручивают ли люди страницу до следующего блока. Если карта скроллинга показывает, что основная масса уходит, не дойдя до второго экрана, проблема именно наверху. Как читать этот отчёт, подробно расписано в статье про карту кликов и скроллинга в Метрике.

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

Что происходит дальше: поведение и позиции

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

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

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

Когда первый экран не спасёт и когда нужен специалист

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

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

Не спасёт при технических проблемах. Страница, которая грузится семь секунд, теряет людей до того, как они увидят ваш заголовок. Здесь сначала скорость, потом смыслы.

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

Откуда на этот экран приходят люди

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

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

Частые вопросы

Какой высоты считать первый экран?

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

Нужен ли на первом экране блок с отзывами?

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

Можно ли оставить слайдер, если убрать автопрокрутку?

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

Что делать, если услуг много и все важные?

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

Стоит ли ставить онлайн-чат на первый экран?

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

Как понять, что изменения помогли?

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

Коротко

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

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

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

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

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

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