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

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

Три четверти сайтов используют это место одинаково: ставят карусель из пяти слайдов с красивыми картинками и надписями вроде «Качество, проверенное временем». Слайды сменяют друг друга каждые пять секунд, человек не успевает прочитать ни один и прокручивает вниз.

Разберём, что на самом деле должно быть на первом экране, почему карусели почти не работают и в каких случаях уместно сразу поставить форму.

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

Требования к первому экрану сводятся к четырём вопросам.

Куда я попал? Название компании и вид деятельности. Не «Мы создаём будущее», а «Изготовление корпусной мебели на заказ».

Это то, что мне нужно? Конкретная услуга или товар, а не общие слова. Человек искал «шкаф-купе на заказ» — он должен увидеть слово «шкаф-купе».

Где вы находитесь? Город и район, если это имеет значение. Для услуг с выездом — обязательно.

Что делать дальше? Один понятный призыв: позвонить, рассчитать, посмотреть каталог, записаться.

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

Дополнительно на первом экране хорошо работают: одна проверяемая цифра о компании (год начала работы, число выполненных объектов), цена «от», срок исполнения. Всё, что отвечает на возражения до того, как они возникли.

Почему карусели не работают

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

Что с ним не так:

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

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

Движение мешает читать. Взгляд цепляется за движущийся объект, и человек не может сосредоточиться на содержании.

Люди принимают слайдер за рекламу. Крупный баннер с картинкой и надписью выглядит как рекламный блок, и взгляд его пропускает.

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

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

Нет главного. Пять равнозначных сообщений означают отсутствие сообщения.

Вывод простой: если у вас пять важных вещей, выберите одну. Остальные разместите ниже по странице — там они будут прочитаны с большей вероятностью, чем на втором слайде.

Вариант первый: статичный экран с предложением

Самый универсальный вариант и подходит большинству компаний.

Устройство простое:

Заголовок. Что вы делаете, для кого и где. «Кухни на заказ в таком-то городе по вашим размерам».

Подзаголовок. Одна-две строки конкретики: сроки, цена от, состав. «Замер бесплатно, изготовление от трёх недель, гарантия на фурнитуру».

Одна кнопка. Основное действие: «Рассчитать стоимость» или «Вызвать замерщика».

Одна фотография. Своя, а не стоковая: готовая работа, бригада, продукция.

Контакт. Телефон крупно, нажимаемый.

Один-два факта доверия. «Работаем с такого-то года», «более такого-то числа объектов».

Такой экран решает все четыре задачи и не отвлекает. Он же лучше всего работает на телефоне, где место ограничено.

Вариант второй: сразу форма или калькулятор

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

Когда уместно. Услуги с расчётом по параметрам: окна, натяжные потолки, грузоперевозки, печать, изготовление изделий по размерам. Или ниши, где спрос срочный: аварийный ремонт, эвакуатор, вскрытие замков.

Как устроено. Слева короткий заголовок с сутью, справа форма из двух-трёх полей или калькулятор с ползунками. Внизу строка, снимающая опасение: «Расчёт бесплатный, звоним только по вашей заявке».

Чего избегать. Формы из семи полей на первом экране. Обязательных полей, без которых расчёт невозможен, но которые человек не знает. Требования почты, если вы будете звонить.

Хорошо работает квиз. Три-четыре вопроса с вариантами ответов, после которых человек видит примерную сумму и оставляет контакт для точного расчёта. Он вовлекает и одновременно отсеивает тех, кому вы не подходите.

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

Вариант третий: сразу каталог или услуги

Подходит интернет-магазинам и компаниям с широким перечнем услуг.

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

Ошибка в этом варианте — ставить перед каталогом большой баннер про качество и сервис. Он отодвигает то, зачем человек пришёл, на второй экран.

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

Список того, что чаще всего занимает место зря:

Слоганы ни о чём. «Мы делаем мир лучше», «Ваш надёжный партнёр».

Абстрактные фотографии. Рукопожатия, небоскрёбы, люди в костюмах из фотобанка.

Огромное меню на весь экран.

Всплывающее окно, которое появляется сразу. Человек ещё не понял, куда попал, а его уже просят оставить телефон.

Согласие на сбор данных во весь экран. Оно должно быть компактным.

Видеофон. Тяжёлый, отвлекающий, на телефоне часто не воспроизводится.

Анимация появления блоков. Задерживает показ содержания на секунду-две.

Три равнозначные кнопки. Выбор из трёх равных вариантов — это отсутствие выбора.

Часы обратного отсчёта акции, которые обнуляются при обновлении страницы. Их узнают и перестают доверять сайту.

Особенности мобильной версии

На телефоне первый экран — это примерно шестьсот точек по высоте, из которых часть занимает шапка. Места очень мало.

Правила:

Заголовок короче. То, что на компьютере занимает строку, на телефоне занимает три.

Кнопка звонка сразу видна. С телефона чаще звонят, чем пишут.

Одна кнопка, не три.

Форма не длиннее двух полей.

Фотография может быть меньше или вовсе не показываться. Место важнее украшения.

Проверяйте на настоящем телефоне. Уменьшение окна браузера на компьютере не показывает реальную картину.

Следите за весом. Первый экран должен появляться за одну-две секунды на мобильном интернете, а не на офисном.

Заголовок первого экрана: как его сформулировать

Заголовок — самый нагруженный элемент. От него зависит, останется человек или нет. Разберём подробно.

Формула, которая работает: что делаем + для кого или с чем + где + отличие или условие.

Примеры: «Кухни на заказ по вашим размерам в таком-то городе, замер бесплатно». «Ремонт промышленных холодильников на объекте заказчика, выезд в течение суток». «Бухгалтерское сопровождение небольших компаний, фиксированная стоимость в месяц».

Чего избегать:

Обещаний без содержания: «Ваш надёжный партнёр», «Работаем на результат».

Превосходных степеней: «Лучшие», «Номер один», «Ведущая компания». Их пишут все, поэтому они не различают.

Абстрактных выгод: «Решения для вашего бизнеса».

Слишком общих формулировок: «Строительные работы» вместо «Отделка квартир в новостройках».

Длины больше двенадцати слов.

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

Вторая проверка: прочитайте вслух. Если фраза звучит как речь живого человека, объясняющего свою работу, она подходит. Если как строка из презентации — нет.

Подзаголовок и факты рядом

Под заголовком место для одной-двух строк, которые снимают первые возражения.

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

Цена или диапазон. «От такой-то суммы за квадратный метр». Самое сильное, что можно написать.

Срок. «Изготовление от трёх недель», «выезд в день обращения».

Условие входа. «Замер бесплатный», «расчёт за один день», «работаем без предоплаты за материалы».

География. «Работаем по городу и области».

Опыт в цифрах. «С такого-то года, более такого-то числа объектов».

Что туда не ставить: перечисление всех услуг сразу, длинное описание компании, лозунги.

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

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

Простая процедура, которую можно сделать за полчаса.

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

Тест на замену названия. Закройте логотип и подставьте название конкурента. Если ничего не изменилось, на экране нет ничего вашего.

Тест на телефоне. Откройте на своём смартфоне по мобильному интернету. Засеките время до появления содержания.

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

Карта кликов. Показывает, куда нажимают на самом деле.

Записи визитов. Видно, как человек ведёт себя в первые секунды: читает, сразу листает, ищет телефон.

Как это связано с продвижением «3 в 1»

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

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

Яндекс.Справочник. Переход из карточки в Яндекс Бизнесе почти всегда идёт на главную страницу. Человек уже видел адрес, часы работы и цены в карточке — значит, на первом экране сайта он ищет подтверждение и следующий шаг. Хорошо, если данные совпадают: тот же город, тот же телефон, те же цены. Расхождение вызывает сомнение сразу.

2ГИС. То же самое, и с ещё большей долей мобильных переходов. Человек смотрит с телефона, часто на ходу. Первый экран должен грузиться быстро и содержать нажимаемый номер.

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

Что делать по шагам

1. Проверьте, отвечает ли первый экран на четыре вопроса: кто вы, что делаете, где, что дальше.
2. Уберите карусель, оставьте одно главное сообщение.
3. Перепишите заголовок на конкретику: услуга, для кого, где.
4. Добавьте подзаголовок со сроком, ценой или составом работ.
5. Оставьте одну основную кнопку с конкретным призывом.
6. Замените стоковую картинку своей фотографией.
7. Сделайте телефон крупным и нажимаемым.
8. Добавьте один-два проверяемых факта о компании.
9. Уберите всплывающее окно из первых секунд.
10. Сожмите изображения, уберите видеофон и анимацию появления.
11. Проверьте первые экраны страниц услуг, а не только главной.
12. Сверьте данные с карточками в Яндекс Бизнесе и 2ГИС.
13. Проверьте на настоящем телефоне по мобильному интернету.
14. Посмотрите карты прокрутки и кликов через месяц после правок.

Итог

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

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

И помните, что первых экранов у вас не один: у каждой страницы услуги свой, и на него приходит поиск. А из карточек на картах люди попадают на главную уже подготовленными — им нужно подтверждение, а не знакомство.

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