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

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

Зачем первому экрану уделяют столько внимания

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

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

Из чего состоит удачный первый экран

У каждого сайта свои особенности, но в основе хорошего первого экрана почти всегда лежит один и тот же набор элементов.

Заголовок: что в нём должно быть

Сильный заголовок отвечает на вопрос «что я получу». Сравните два варианта для гостевого дома: «Добро пожаловать!» и «Гостевой дом в Адлере в пяти минутах от моря: номера с балконом и завтраком». Первый ничего не сообщает, второй сразу отсекает не тех и привлекает нужных. Хороший приём — прочитать заголовок вслух и спросить себя: «Подойдёт ли он любому конкуренту?». Если да, его нужно переписать.

Избегайте двух крайностей. Слишком общая фраза ничего не говорит. Слишком длинная, на три-четыре строки, никто не дочитает. Оптимально, когда заголовок помещается в две строки на десктопе и в три на телефоне.

Кнопка: чего ожидает человек

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

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

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

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

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

Типичные ошибки первого экрана

Слайдер с автопереключением

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

Стоковая картинка без смысла

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

Перегруженность

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

Низкий контраст и мелкий текст

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

Скрытые контакты

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

Тяжёлые видео и анимации

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

Первый экран на мобильном

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

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

Как собрать первый экран: пошаговый процесс

Чек-лист перед запуском

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

• Из заголовка понятно, что вы предлагаете и для кого.
• Кнопка заметна и подписана конкретным действием.
• Контакты или способ связи видны без прокрутки.
• Фото и изображения настоящие и подходят по смыслу.
• Текст читаем на любом фоне и при любой яркости экрана.
• Страница открывается быстро, а первый экран отрисовывается раньше остального.
• На телефоне ничего не обрезается и не перекрывается закреплёнными элементами.
• Нет автоматически прокручиваемых баннеров, мешающих чтению.

Как измерять результат

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

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

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

Итоги

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