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