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

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

Почему первый экран решает так много

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

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

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

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

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

1. Что это? Какой продукт или услуга здесь предлагается. Не «инновационные решения», а «ремонт квартир под ключ» или «доставка готовых обедов в офис».
2. Для кого? Подходит ли это мне. Указание на аудиторию или географию сразу отсекает лишних и притягивает своих: «для частных клиентов в Москве», «для небольших производств».
3. Чем это лучше? Одно-два ключевых преимущества: сроки, гарантия, цена, опыт, особый подход.
4. Сколько стоит? Хотя бы ориентир. Фраза «от 15 000 руб.» снимает главный страх — «наверное, это очень дорого».
5. Что делать дальше? Одна заметная кнопка с понятным действием: «Рассчитать стоимость», «Записаться», «Смотреть каталог».

Обязательные элементы и их оформление

Заголовок

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

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

Уточняет и усиливает заголовок: добавляет выгоду, условие или аудиторию. Например: «Бесплатный замер, договор с фиксированной ценой, гарантия на фурнитуру». Одно-два предложения, не больше.

Кнопка целевого действия

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

Изображение

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

Шапка с навигацией и контактами

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

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

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

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

Первый экран для разных типов сайтов

Набор элементов зависит от задачи сайта. Вот ориентиры для самых распространённых форматов.

Тип сайта	Главная задача первого экрана	Что вынести обязательно
Landing Page	Получить заявку на одну услугу	Оффер, выгода, цена «от», кнопка заявки
Корпоративный сайт	Объяснить, чем занимается компания, и направить в нужный раздел	Направления деятельности, ключевой факт о компании, контакты
Интернет-магазин	Быстро привести к товару	Поиск, каталог, акции, условия доставки
Сайт-портфолио	Показать уровень работ	Специализация, лучшие работы, способ связи
Сайт-визитка	Дать базовую информацию и контакт	Кто вы, что делаете, где находитесь, как связаться

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

Мобильный первый экран: отдельная задача

На смартфоне площадь экрана в несколько раз меньше, а посетитель ещё менее терпелив. Здесь действуют свои правила.

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

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

Как проверить и улучшить первый экран

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

1. Посмотрите в Метрике долю отказов для главной и ключевых посадочных страниц отдельно для компьютеров и телефонов.
2. Изучите карту скроллинга: какая часть посетителей вообще прокручивает первый экран.
3. Посмотрите несколько записей Вебвизора: где задерживается взгляд, куда кликают, не пытаются ли нажать на некликабельные элементы.
4. Сформулируйте гипотезу — например, «добавление цены в подзаголовок снизит отказы» — и внесите одно изменение.
5. Сравните показатели через несколько недель. Если трафика достаточно, используйте A/B-тест.

Вывод

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

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