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

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

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

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

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

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

Заголовок с оффером. Не название компании и не «Добро пожаловать», а то, что вы делаете для клиента: услуга, товар, результат. Хороший заголовок совпадает с запросом, по которому пришёл человек. Если реклама ведёт на страницу «ремонт АКПП», заголовок должен говорить о ремонте АКПП, а не об автосервисе вообще.

Подзаголовок. Одна-две строки, которые уточняют предложение: для кого, на каких условиях, чем вы отличаетесь. Здесь работает УТП — конкретное, проверяемое отличие, а не «высокое качество и индивидуальный подход».

Одна главная кнопка. Действие, которого вы ждёте от посетителя: «Рассчитать стоимость», «Записаться», «Получить консультацию». Если кнопок три равнозначных, человек не выбирает ни одну.

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

Контакты. Телефон, мессенджер или кнопка звонка в шапке. Часть посетителей вообще не заполняет формы, им проще позвонить.

Визуал по теме. Фото результата работы, товара или процесса. Стоковые картинки с улыбающимися людьми в офисе информации не несут.

Первый экран на телефоне

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

Что проверить на телефоне:

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

Подробнее о требованиях к мобильным страницам — в статье о требованиях поисковых систем к мобильной версии сайта.

Что лучше убрать с первого экрана

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

Как проверить первый экран в Яндекс Метрике

Мнение команды о первом экране — гипотеза. Проверяют её на поведении реальных посетителей.

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

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

Меняйте первый экран по одному элементу и сравнивайте показатели за сопоставимые периоды. Иначе не поймёте, что именно сработало.

Чек-лист первого экрана перед запуском рекламы

Перед тем как вести на страницу платный трафик, пройдитесь по короткому списку. Проще всего делать это вдвоём: один человек открывает страницу впервые, второй задаёт вопросы.

1. Можно ли за пять секунд понять, что предлагают на этой странице?
2. Совпадает ли заголовок с запросами и объявлениями, которые ведут на страницу?
3. Понятно ли, чем вы отличаетесь от конкурентов из той же выдачи?
4. Есть ли одна главная кнопка и понятно ли, что произойдёт после нажатия?
5. Видны ли телефон или мессенджер без прокрутки?
6. Все ли факты на первом экране реальны и подтверждаются документами или карточкой в картах?
7. Не перекрывают ли оффер всплывающие окна на телефоне?

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