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

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

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

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

Что должен понять посетитель за первые секунды

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

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

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

Анатомия первого экрана

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

Шапка

Логотип, меню, контакт. Для локального бизнеса, где клиенты предпочитают звонить, телефон в шапке обязателен и должен быть кликабельным на мобильных. Для онлайн-сервисов достаточно кнопки входа или регистрации. Шапка не должна занимать больше 10–12% высоты экрана, иначе она съедает место для главного.

Заголовок

Самый важный текстовый элемент. Он формулирует, что вы предлагаете и для кого. Хороший заголовок конкретен и написан с позиции выгоды клиента. Сравните:

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

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

Целевое действие

Кнопка или короткая форма. Формулировка должна описывать результат, а не процесс: «Рассчитать стоимость», «Записаться на замер», «Подобрать тур», а не абстрактное «Отправить» или «Подробнее». Основное действие одно, допускается второе, менее заметное, — например, «Посмотреть работы».

Визуальная часть

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

Элементы доверия

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

Типичные ошибки, которые мы видим на аудитах

За время работы студии мы провели аудит нескольких десятков сайтов малого бизнеса. Ошибки первого экрана повторяются с удивительной регулярностью.

Слайдер вместо смысла

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

Огромная картинка без текста

Красивое фото на весь экран с логотипом посередине. Выглядит эффектно на презентации, но ничего не сообщает. Человек должен прокрутить, чтобы понять, куда он попал, — а прокручивают не все.

Перегрузка

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

Всплывающие окна с порога

Предложение подписаться или получить скидку, которое появляется через секунду после загрузки и перекрывает содержимое. Человек ещё не понял, что вы продаёте, а его уже просят оставить телефон. На мобильных такие окна особенно раздражают, а поисковые системы учитывают их при оценке удобства страницы.

Медленная загрузка

Видео в фоне весом 15 МБ или несжатое фото на 4 МБ. Пока первый экран грузится, человек видит белую страницу. Каждая лишняя секунда ожидания заметно увеличивает долю тех, кто закрывает вкладку, не дождавшись.

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

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

У экрана смартфона площадь примерно в 4–5 раз меньше, чем у ноутбука. Уместить туда всё то же самое невозможно, поэтому приходится расставлять приоритеты:

• Заголовок и кнопка целевого действия обязательно видны без прокрутки.
• Фоновое изображение можно заменить на компактное или убрать совсем, если оно мешает читать текст.
• Элементы доверия переносятся во второй экран или сокращаются до одного.
• Меню сворачивается в иконку, телефон остаётся видимым или выносится в отдельную кнопку звонка.
• Размер кнопки — не меньше 44–48 пикселей по высоте, чтобы попадать пальцем без промахов.

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

Первый экран внутренних страниц

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

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

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

В статье блога первый экран — заголовок, краткое вступление, которое обещает пользу, и начало основного текста. Посетитель должен увидеть, что здесь есть ответ на его вопрос.

Как проверить эффективность

Интуиция и вкус дизайнера важны, но окончательный ответ дают данные. Вот что мы смотрим, оценивая первый экран:

• Глубина просмотра и показатель отказов в Яндекс Метрике для главной и ключевых посадочных страниц. Если отказы выше 40–50% и время на странице меньше 15 секунд, первый экран, скорее всего, не справляется.
• Карта скроллинга. Показывает, какая доля посетителей доходит до каждого участка страницы. Резкий обрыв сразу после первого экрана — тревожный сигнал.
• Карта кликов. Нажимают ли на целевую кнопку, или люди кликают на некликабельные элементы, ожидая от них реакции.
• Записи Вебвизора. Десяток записей реальных сессий дают больше понимания, чем любой отчёт. Видно, где человек задумался, что пытался найти и в какой момент ушёл.
• A/B-тест. Если трафика достаточно — от нескольких сотен посетителей в день, — можно сравнить два варианта заголовка или кнопки. При меньшем трафике тест займёт слишком много времени, и полезнее опираться на качественный анализ.

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

Пошаговый подход к проектированию

Когда мы разрабатываем первый экран нового сайта, действуем в таком порядке:

1. Определяем основной источник трафика. Посетитель из контекстной рекламы по конкретному запросу и посетитель, который перешёл по ссылке из соцсетей, нуждаются в разном первом экране.
2. Формулируем одно главное сообщение. Не три, не пять — одно. Остальное поддерживает его или уходит ниже.
3. Выбираем одно целевое действие. Что самое важное для бизнеса: звонок, заявка, переход в каталог?
4. Пишем текст до дизайна. Заголовок, подзаголовок и надпись на кнопке. Несколько вариантов, из которых выбираем лучший.
5. Подбираем визуал под смысл, а не наоборот.
6. Рисуем мобильную версию одновременно с десктопной.
7. Тестируем на людях — тот самый пятисекундный тест на 5–7 человеках вне проекта.
8. Запускаем и смотрим аналитику через 2–4 недели, при необходимости корректируем.

Выводы

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

• Ясный заголовок, из которого понятно, что вы предлагаете и кому.
• Одно главное действие с понятной надписью на кнопке.
• Визуал, который показывает результат, а не абстракцию.
• Пара коротких фактов, повышающих доверие.
• Отдельное внимание мобильной версии.
• Быстрая загрузка без тяжёлых видео и слайдеров.
• Регулярная проверка по данным аналитики.

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