Посетитель, пришедший по рекламе, не читает страницу — он её сканирует. За первые секунды он пытается понять три вещи: куда попал, что здесь предлагают и подходит ли это ему. Если хотя бы на один вопрос ответа нет, палец уже тянется к кнопке «назад». Именно поэтому первый экран лендинга — самая дорогая площадь в интернете. За каждый показ этого экрана вы заплатили рекламной системе, и от того, что на нём написано и нарисовано, зависит, окупятся ли эти деньги.
В этой статье мы разберём, из каких элементов состоит сильный первый экран, какие ошибки встречаются чаще всего и как проверить свою страницу без дорогих исследований.
Почему именно восемь секунд
Цифра условная, но она хорошо отражает реальность. По данным веб-аналитики большинства наших проектов, основная масса отказов происходит в первые пять–десять секунд визита. Человек не успевает даже прокрутить страницу. Это значит, что всё, что находится ниже первого экрана, для него просто не существует.
Отсюда простой вывод: первый экран должен работать как самостоятельное рекламное объявление. Даже если посетитель не увидит ничего больше, у него должно сложиться понимание предложения и желание узнать подробности.
Шесть элементов сильного первого экрана
1. Заголовок с выгодой
Главный заголовок отвечает на вопрос «что я получу». Не «Компания СтройМастер — ваш надёжный партнёр», а «Каркасный дом под ключ за 60 дней с фиксированной сметой». В первом случае посетитель узнаёт название компании, которое ему ничего не говорит. Во втором — получает конкретное обещание с цифрами.
Мы проверяем каждый заголовок по 4U-технологии: полезен ли он, уникален ли, конкретен ли и есть ли в нём срочность. Идеальный заголовок редко содержит все четыре свойства, но хотя бы два-три должны присутствовать обязательно.
2. Подзаголовок, который снимает главный вопрос
Заголовок цепляет, подзаголовок объясняет. Это место для ключевой детали, которая не поместилась в заголовок: для кого предложение, в каком городе, на каких условиях. Хороший подзаголовок короткий — одна строка, максимум две.
3. Буллиты с фактами
Три-четыре коротких пункта, каждый из которых усиливает обещание. Здесь работают цифры и конкретика: «гарантия 10 лет», «бесплатный замер в день обращения», «оплата после монтажа». Буллиты сканируются глазами за секунду, поэтому каждое слово в них на счету.
4. Призыв к действию
Одна главная кнопка с понятным текстом. Не «Отправить» и не «Подробнее», а действие с результатом: «Рассчитать стоимость», «Получить консультацию», «Записаться на замер». Кнопка должна контрастировать с фоном и быть видна без прокрутки на любом устройстве.
5. Визуал, который подтверждает слова
Картинка на первом экране не украшение. Она должна мгновенно показать, о чём страница. Фото готового объекта, продукт в использовании, довольный клиент, яркая иллюстрация-метафора. Стоковые фотографии улыбающихся людей в офисе не работают: их видели тысячи раз, и мозг их просто пропускает.
6. Микроэлемент доверия
Небольшой, но заметный знак того, что вам можно верить: количество клиентов, рейтинг, логотипы известных заказчиков, «работаем с такого-то времени» без конкретной даты, а через срок в годах. Это не основной элемент, но он снижает тревожность.
Первый экран должен работать как самостоятельное объявление: даже если человек больше ничего не увидит, он должен понять, что вы предлагаете и почему это стоит его внимания.
Пять частых ошибок
Название компании вместо предложения
Самая распространённая ошибка. Владелец бизнеса гордится названием и логотипом и ставит их в центр экрана. Но посетитель пришёл не за названием, а за решением своей задачи. Логотип — в шапку, на первый план — выгода.
Слайдер из пяти баннеров
Карусель на первом экране — компромисс, когда не удалось договориться, что главное. Статистика однозначна: второй и последующие слайды почти никто не видит. Лучше выбрать одно сильное предложение.
Абстрактные слова
«Качество», «надёжность», «профессионализм», «индивидуальный подход». Эти слова пишут все, поэтому они ничего не значат. Каждое такое слово стоит заменить фактом: вместо «надёжность» — «гарантия 5 лет в договоре».
Перегруженность
Три кнопки, два телефона, форма из шести полей, бегущая строка и всплывающее окно. Когда на экране слишком много элементов, взгляд не знает, за что зацепиться. Принцип простой: одна мысль, одно действие.
Несовпадение с рекламой
Человек кликнул по объявлению «Ремонт ванной под ключ от 90 тысяч», а попал на страницу «Все виды ремонтных работ». Ожидание не совпало с реальностью — и он уходит. Заголовок лендинга должен продолжать мысль объявления.
Как проверить свой первый экран
Есть простой тест, который можно провести за пять минут. Покажите первый экран своей страницы человеку, который ничего не знает о вашем бизнесе. Дайте ему посмотреть пять секунд и закройте. Затем спросите: что здесь предлагают, кому это подходит и что нужно сделать дальше. Если он не может ответить хотя бы на два вопроса из трёх — экран нужно переделывать.
Второй способ — данные веб-аналитики. В Метрике посмотрите карту скроллинга: какой процент посетителей видит второй экран. Если меньше шестидесяти процентов при целевом трафике, проблема почти наверняка на первом экране. Записи вебвизора покажут, как люди ведут себя в первые секунды: двигают ли мышь к заголовку, пытаются ли прокрутить, сразу ли закрывают вкладку.
Третий способ — A/B-тест. Если трафика достаточно, запустите две версии первого экрана с разными заголовками. Через пару недель станет понятно, какой вариант работает лучше. Именно поэтому мы всегда готовим пять вариантов заголовка: угадать победителя заранее невозможно.
Мобильная версия — отдельная задача
На смартфоне первый экран в три раза меньше, и элементы, которые прекрасно смотрелись на компьютере, начинают конкурировать за место. Заголовок переносится на четыре строки, картинка уходит вниз, кнопка оказывается за пределами экрана.
Мобильный первый экран нужно проектировать отдельно. Обычно мы сокращаем заголовок, убираем часть буллитов и делаем кнопку крупнее. Иллюстрация либо уменьшается до фоновой, либо переносится ниже кнопки. Главное правило: без прокрутки на телефоне должны быть видны заголовок и кнопка.
Что делать после первого экрана
Если первый экран справился с задачей, посетитель прокручивает страницу. Дальше начинается работа с возражениями: почему стоит доверять, сколько это стоит, что входит в цену, какие есть гарантии. Но всё это имеет смысл только тогда, когда человек решил остаться. Поэтому, улучшая лендинг, всегда начинайте сверху — изменения первого экрана дают самый большой эффект при минимальных затратах.
Вместо заключения
Первый экран — это не место для экспериментов со стилем и не витрина для логотипа. Это рабочий инструмент, который должен за несколько секунд объяснить, почему человеку стоит остаться. Выгода в заголовке, конкретика в буллитах, понятная кнопка и визуал, подтверждающий слова, — вот формула, которая работает в любой нише.
Если вы не уверены, справляется ли ваш первый экран, пришлите нам ссылку. Мы бесплатно проведём экспресс-аудит и подскажем, что можно улучшить уже сегодня.