Посетитель открывает страницу и принимает решение почти мгновенно: остаться или закрыть вкладку. За эти несколько секунд он не читает текст, а сканирует: видит заголовок, картинку, кнопку, общее впечатление. Если из этого не складывается ответ на вопрос «мне сюда?», он уходит. И неважно, насколько хороши остальные блоки страницы — до них он не доберётся.
Поэтому первому экрану мы уделяем больше времени, чем любому другому блоку. Здесь не работают общие рецепты вроде «большая красивая картинка и слоган», зато работает дисциплина: каждый элемент должен отвечать на конкретный вопрос посетителя. Разберём, как это устроено.
Пять вопросов, на которые отвечает первый экран
Когда человек попадает на сайт, у него в голове крутятся вопросы. Не обязательно осознанно, но первый экран должен закрыть их все.
- Что это? Чем занимается компания или что за продукт.
- Для кого? Подходит ли это мне — моему бизнесу, моей задаче, моему городу.
- Чем это лучше? Почему стоит выбрать именно вас.
- Можно ли доверять? Есть ли признаки реальной, надёжной компании.
- Что делать дальше? Куда нажать, чтобы продвинуться.
На каждый вопрос отвечает свой элемент: заголовок, подзаголовок, визуал, знаки доверия и кнопка. Пропустите один — и в восприятии появится дыра.
Заголовок: конкретика вместо лозунга
Заголовок — главный элемент первого экрана. Худшие заголовки, которые мы видим на аудитах, — абстрактные: «Мы делаем мир лучше», «Решения для вашего бизнеса», «Качество, проверенное временем». Они подходят любой компании и не говорят ничего.
Рабочий заголовок называет, что именно вы предлагаете. Иногда — для кого и с каким результатом. Несколько формул, которые часто помогают:
- Что + для кого: «Бухгалтерское сопровождение для интернет-магазинов».
- Что + результат: «Утепление фасадов с гарантией на десять лет».
- Что + где + условие: «Ремонт квартир в Москве по фиксированной смете».
- Проблема + решение: «Склад переполнен? Вывезем и утилизируем за один день».
Заголовок не обязан быть остроумным. Он обязан быть понятным. Если человек, ничего не знающий о вашей компании, прочитает его и не сможет сказать, чем вы занимаетесь, заголовок не работает.
Заголовок и источник трафика
Важный момент, о котором часто забывают: заголовок должен соответствовать тому, с чем человек пришёл. Если он кликнул по объявлению «Доставка цветов за час», а на сайте видит «Цветочная мастерская с душой», возникает разрыв. Он не уверен, что попал туда, куда хотел. Для посадочных страниц под рекламу мы подстраиваем заголовок под группы запросов, а при работе с контекстной рекламой это даёт заметный рост конверсии без увеличения бюджета.
Подзаголовок: уточнение и аргумент
Подзаголовок раскрывает то, что не поместилось в заголовок. Он отвечает на вопросы «для кого» и «чем лучше». Одно-два предложения, не больше. Например, после заголовка «Бухгалтерское сопровождение для интернет-магазинов» — «Ведём учёт, считаем налоги и сдаём отчётность, а вы занимаетесь продажами. Первый месяц — с аудитом текущего учёта бесплатно».
Вместо подзаголовка или в дополнение к нему иногда хорошо работают два-три коротких пункта с ключевыми преимуществами. Это удобно для сканирования: человек пробегает глазами и сразу видит главное. Но пунктов должно быть немного, иначе первый экран превращается в список.
Кнопка: одно главное действие
На первом экране должно быть одно главное действие. Возможно, второе — менее заметное — для тех, кто ещё не готов. Например, «Рассчитать стоимость» как основная кнопка и «Посмотреть работы» как второстепенная. Три и больше равноценных кнопок рассеивают внимание.
Текст кнопки — продолжение предложения. Вместо «Подробнее» или «Отправить» — то, что человек получит: «Получить расчёт», «Записаться на пробное занятие», «Подобрать тур». Если есть возможность снять тревогу коротким пояснением рядом с кнопкой — «Это бесплатно и ни к чему не обязывает», «Ответим за 15 минут», — стоит это сделать.
Визуал: показывать, а не украшать
Изображение на первом экране — не декор, а аргумент. Лучше всего работают визуалы, которые показывают сам продукт, результат работы или реальных людей.
| Тип визуала | Когда работает | Когда нет |
|---|---|---|
| Фото продукта | Физические товары, оборудование, интерьеры | Если продукт невзрачен на фото |
| Скриншот интерфейса | Сервисы и программы | Если интерфейс перегружен и непонятен без контекста |
| Фото команды или специалиста | Экспертные услуги, медицина, образование | Если это постановочное стоковое фото |
| Результат работы | Ремонт, дизайн, строительство, красота | Если результат не отличается от конкурентов |
| Иллюстрация | Абстрактные услуги, сложные процессы | Если она не связана со смыслом |
Стоковые фотографии улыбающихся людей в костюмах — худший вариант. Их узнают мгновенно, и они снижают доверие: если компания не может показать своих сотрудников или работы, что-то не так.
Ещё одна частая проблема — видео или анимация на фоне. Они эффектны, но тяжелы для загрузки, особенно на мобильных, и отвлекают от заголовка. Если видео действительно нужно, лучше дать его по кнопке.
Доверие в одной строке
На первом экране обычно мало места для развёрнутых доказательств, но одна строка с ключевым фактом может сыграть решающую роль. Варианты:
- Цифра, которая важна аудитории: количество выполненных проектов, лет работы, клиентов, объектов.
- Рейтинг на независимых площадках с количеством отзывов.
- Логотипы клиентов или партнёров, если их можно показывать.
- Наличие лицензии, гарантии, членства в профильной организации.
Одного-двух таких фактов достаточно. Остальные доказательства можно разместить ниже.
Типичные ошибки первого экрана
Собрали ошибки, которые встречаются на аудитах чаще всего.
Слайдер. Несколько сменяющихся баннеров с разными сообщениями. Посетитель видит первый, второй — мельком, остальные — никогда. Внимание рассеивается, ни одно сообщение не запоминается.
Всплывающее окно сразу при входе. Человек ещё не понял, куда попал, а ему уже предлагают подписаться или оставить телефон. Первый экран закрыт, первое впечатление испорчено.
Шапка на полэкрана. Огромный логотип, две строки меню, телефоны, адреса, кнопки соцсетей. На содержательную часть первого экрана места почти не остаётся, особенно на ноутбуках с невысоким экраном.
Нет ни одного призыва к действию. Красивая картинка и слоган — и всё. Человек не понимает, что делать дальше, кроме как прокручивать.
Первый экран на мобильном — это просто уменьшенный десктоп. Заголовок мелкий, кнопка уехала вниз, картинка занимает весь экран. Мобильный первый экран нужно проектировать отдельно.
Как проверить первый экран
Есть простой тест, который мы используем постоянно, — тест пяти секунд. Показываете первый экран человеку, который ничего не знает о вашей компании, на пять секунд, затем убираете и спрашиваете: чем занимается эта компания? для кого? что можно сделать на сайте? Если ответы неуверенные или неправильные, первый экран нужно дорабатывать.
Для этого теста не нужны специальные сервисы: достаточно пяти-семи человек из окружения, не связанных с проектом. После запуска на помощь приходит аналитика: доля отказов, глубина прокрутки, клики по кнопке первого экрана. Если большая часть посетителей уходит без прокрутки, проблема почти наверняка здесь.
Из практики: на сайте компании, которая занимается климатическим оборудованием для офисов, на первом экране стоял заголовок с названием бренда и фото здания бизнес-центра. В тесте пяти секунд большинство респондентов решили, что это сайт управляющей компании недвижимости. Мы заменили заголовок на «Кондиционирование и вентиляция для офисов под ключ» и поставили фото смонтированного оборудования. Доля отказов на главной заметно снизилась уже в первые недели.
Вывод
Первый экран должен за несколько секунд объяснить, что вы предлагаете, для кого, почему вам стоит доверять и что делать дальше. Для этого нужен конкретный заголовок вместо лозунга, подзаголовок с уточнением, одна главная кнопка с понятным текстом, визуал, который показывает реальный продукт или результат, и хотя бы один знак доверия. Слайдеры, ранние попапы и раздутые шапки лучше убрать.
Если у вас есть ощущение, что сайт теряет людей на входе, начните с теста пяти секунд. А если нужен взгляд со стороны — мы проводим аудит сайта и начинаем его как раз с первого экрана ключевых страниц.
