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

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

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

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

Три вопроса, на которые нужно ответить сразу

Посетитель, попавший на сайт, неосознанно ищет ответы на три вопроса:

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

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

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

Заголовок: главный элемент экрана

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

Слабые заголовки выглядят так:

«Добро пожаловать на наш сайт»;
«Мы — команда профессионалов»;
«Качество, проверенное временем»;
«Решения для вашего бизнеса».

Такие фразы можно поставить на сайт любой компании, и они ничего не говорят о конкретном предложении. Сильный заголовок, напротив, конкретен. Он называет услугу или продукт, результат для клиента и, если возможно, отличие от конкурентов. Например: «Натяжные потолки за один день с гарантией 10 лет» или «Бухгалтерия для ИП на упрощёнке — от 3 000 ₽ в месяц».

Под заголовком обычно ставится подзаголовок — одна-две строки, которые уточняют предложение или добавляют важное условие: географию, сроки, формат работы.

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

Однажды к нам обратилась компания, которая занимается грузоперевозками. На первом экране у них был слоган «Двигаемся вперёд вместе с вами» на фоне грузовика. Мы заменили его на «Перевозка грузов по Москве и области от 2 часов — подача машины за 40 минут». Графика осталась прежней, но время на странице и доля людей, дошедших до калькулятора, заметно выросли.

Обязательные элементы первого экрана

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

Логотип и название компании — чтобы было понятно, чей это сайт.
Навигация — компактное меню, которое показывает основные разделы.
Контакты — телефон или кнопка связи в шапке, особенно для локального бизнеса.
Заголовок и подзаголовок — суть предложения.
Кнопка основного действия — «Рассчитать стоимость», «Записаться», «Выбрать тариф».
Визуал — фотография продукта, результата работы или команды, иллюстрирующая предложение.
Короткий аргумент доверия — число выполненных проектов, гарантия, известные клиенты, рейтинг.

Это не значит, что все элементы должны быть одинаково заметны. Главное место — у заголовка и кнопки. Остальное поддерживает их и не должно отвлекать внимание.

Визуал: картинка должна работать

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

Что работает лучше:

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

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

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

Первый экран на смартфоне

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

Что мы проверяем в мобильной версии:

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

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

Смотрите на первый экран с реального телефона, а не в режиме эмуляции в браузере. Живой экран в руке меняет восприятие сильнее, чем кажется.

Соответствие ожиданиям посетителя

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

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

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

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

Как проверить, что первый экран работает

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

Вот инструменты, которые мы используем:

Процент отказов и время на странице — если люди уходят за несколько секунд, первый экран не удерживает внимание.
Карта скроллинга — показывает, какая доля посетителей прокручивает страницу ниже первого экрана.
Карта кликов — видно, нажимают ли на кнопку действия или на элементы, которые некликабельны.
Тест пяти секунд — быстрый опрос нескольких людей со стороны.
A/B-тест — сравнение двух вариантов заголовка или оффера на реальном трафике.

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

Коротко о главном

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

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