Какой должна быть главная страница сайта: новый взгляд

Встречают по одежке. И для интернета это тоже верно – пользователь формирует мнение о сайте за 5 секунд. Что он успевает увидеть за это время? Часть страницы, называемую above-the-fold (выше сгиба) – ту, что видна без прокрутки. Поэтому над ней так «трясутся» дизайнеры и маркетологи.

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

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

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

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

Пример главной страницы сайта от Apple

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

Аbove-the-fold сейчас

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

Да и определить линию сгиба все сложнее. В итоге оптимальный вариант – «страничный» дизайн, когда информация распределяется порциями по нескольким экранам.

Главная страница со страничным дизайном

Исследования показывают, что элементы ниже сгиба привлекают такое же внимание.

Пример работы элементов ниже линиии сгиба

По данным Charybeat, самая высокая аудитория – у части между 600 и 1 000 пикселями от начала страницы. В целом 66% внимания приходится на контент ниже сгиба.

Что делать?

При всем этом первый экран по прежнему сильно воздействует на пользовательский опыт. Это сочетание эстетики и ценностного предложения – выгоды пользователя обратиться именно к вам. Продвинутые маркетологи говорят: «Сайт – больше не витрина вашего бизнеса. Это и есть ваш бизнес».

Да, пользователь не останавливается на первом экране и прокручивает страницу, но дальше его должно что-то зацепить, подтолкнуть к конверсии (звонку или заявке).

Рассматривайте страницу как повествование, историю. Кульминация рассказа – ваш CTA, призыв к действию.

Добавьте веб-элемент на нижней границе экрана

Например, внизу главной страницы VWO (сервис A/B тестирования) – кнопка СТА «Посмотрите как легко можно провести А/В тесты для вашего сайта»:

Добавление кнопок CTA внизу главной страницы

Прямо предложите прокрутить страницу

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

Прямо предложите прокрутить страницу

Размещайте выше сгиба информацию о своих преимуществах

В некоторых случаях размещение отзывов, гарантий, партнерских логотипов дает увеличение конверсии.

Как в этом примере:

Размещайте выше сгиба информацию о своих преимуществах

Во втором варианте сделан акцент на плюсах компании: что она известна в стране, дает гарантию возврата денег и так далее. Пользователям нравится, когда все сразу разложено по полочкам. 

Готовьте качественный контент 

Привлекательные картинки и грамотный дизайн могут привлечь пользователя и побудить его задержаться на странице. Но конечное время просмотра и целевое действие зависят только от контента. О том как это сделать с помощью Уникального торгового предложения читайте в этой статье.