WebNeon.
3 мин чтения

Первый экран сайта: что на нём должно быть

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

Первый экран сайта: что на нём должно быть

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

Формула, которая работает

Четыре элемента, и порядок важен.

1. Что вы делаете и для кого

Заголовок должен отвечать на вопрос «куда я попал» за пару секунд.

Не работает: «Мы создаём будущее», «Инновационные решения для вашего бизнеса», «Мы больше чем студия».

Работает: «Разработка сайтов под ключ на Next.js», «Ремонт квартир под ключ в Челябинске», «Бухгалтерское сопровождение для ИП и ООО».

Скучно? Да. Понятно? Да. Второе важнее.

2. Конкретика, которая отличает

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

«От 30 000 ₽, запуск за 5 рабочих дней» говорит о вас больше, чем абзац про миссию.

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

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

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

Второе действие допустимо, но визуально слабее: посмотреть работы, скачать прайс.

4. Способ связи

Телефон и мессенджер видимы сразу, на мобильном — нажимаются в один тап. Часть аудитории не будет заполнять форму принципиально, и терять её из-за того, что телефон спрятан в подвале, обидно.

Что убрать

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

Абстрактные фразы. «Комплексный подход», «индивидуальные решения», «команда профессионалов». Это пишут все, значит это не говорит ничего.

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

Всплывающее окно через три секунды. Оно повышает подписки и портит всё остальное, включая поведенческие показатели.

Тяжёлое фоновое видео. Красиво на презентации, но грузится секундами и портит метрики скорости — а это прямая потеря посетителей, о чём подробно в статье Core Web Vitals.

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

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

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

Что часто ломается: заголовок в четыре строки съедает экран целиком, кнопка уезжает ниже сгиба, крупная картинка занимает верх, а текст оказывается вне видимости.

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

Разные экраны для разных страниц

Частая ошибка — считать, что первый экран есть только у главной.

Главная — кто вы, чем занимаетесь, куда идти дальше.

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

Лендинг под рекламу — точное совпадение с запросом, по которому пришёл человек. Если он искал «ремонт кофемашин Jura», в заголовке должно быть про Jura. Механика такой подмены — в статье что такое мультилендинг.

Проверка за три секунды

Самый практичный тест, для которого не нужны инструменты.

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

Три ответа из трёх — экран работает. Два — нужна доработка. Меньше — переделывать.

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

Итог

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

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

Частые вопросы

Что обязательно должно быть на первом экране?+

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

Нужен ли слайдер на первом экране?+

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

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

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

Стоит ли ставить видео на первый экран?+

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

Читайте также