Что разместить на первом экране сайта: элементы, структура, примеры

Почему первый экран решает больше, чем остальная страница

Термин «above the fold» пришёл из газетного дела: самые важные новости редакторы помещали на верхнюю половину первой полосы - ту, что была видна на лотке ещё до того, как покупатель возьмёт газету в руки. В веб-дизайне логика та же.

По данным Nielsen Norman Group, критически важные элементы страницы должны быть видны в первом экране - до того, как пользователь начнёт прокрутку. Если посетитель не понял за первые секунды, куда попал и зачем, он закрывает вкладку. Никакой полезный контент ниже его уже не удержит.

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

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

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

Заголовок

Это главный текст, который читается первым. Он должен однозначно отвечать на вопрос: «Что здесь происходит?». Хороший заголовок содержит ответ для конкретной аудитории, а не абстрактный слоган.

Плохой вариант: «Мы делаем ваш бизнес лучше». Рабочий вариант: «Сайты для строительных компаний - с заявками через 30 дней».

Разница очевидна: первый вариант ничего не сообщает, второй сразу сужает аудиторию и называет результат.

Ценностное предложение

Заголовок обозначает тему, ценностное предложение её раскрывает. Это 1-3 предложения под заголовком, которые объясняют: что именно вы предлагаете, для кого и чем это отличается от альтернатив.

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

Призыв к действию

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

CTA должен быть:

• визуально заметным - выделяется цветом или размером;
• конкретным по формулировке - «Получить аудит сайта» лучше, чем «Узнать больше»;
• логически связанным с заголовком - посетитель понимает, что произойдёт после клика.

Визуальный якорь

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

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

Навигация

Меню в шапке - часть первого экрана. Оно помогает посетителю, который не готов к целевому действию прямо сейчас, быстро найти нужный раздел. Перегруженная навигация с 8-10 пунктами работает хуже, чем лаконичная структура из 4-6 позиций.

Что добавить дополнительно - в зависимости от типа сайта

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

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

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

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

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

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

Размытый заголовок без конкретики

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

Перегруженный экран

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

Нет очевидного следующего шага

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

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

Абстрактные фотографии разрушают доверие: посетитель видит их на десятках других сайтов. Реальные фото команды, офиса, готовых объектов или производственного процесса работают на доверие, а не против него.

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

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

Как сформулировать заголовок и оффер

Хорошая формула для заголовка:

[Что вы делаете] + [для кого] + [ключевой результат или условие]

Примеры по отраслям:

• Строительство: «Проектирование и строительство промышленных объектов - от эскиза до сдачи под ключ»
• Медицина: «Диагностика и лечение спины без очередей - запись онлайн»
• Логистика: «Грузоперевозки по России и СНГ - расчёт стоимости за 15 минут»
• E-commerce: «Запчасти для иномарок с доставкой на следующий день»

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

Если сложно сформулировать с нуля, ответьте на три вопроса:

1. Что конкретно получает клиент?
2. За какое время или на каких условиях?
3. Почему именно у вас, а не у конкурентов?

Ответы на эти вопросы - и есть материал для заголовка и оффера.

FAQ