Что такое Above the fold

Above the fold (англ. Above the Fold – выше линии сгиба) – это часть веб-страницы, которую пользователь видит немедленно при открытии, без необходимости прокручивать вниз. Термин пришёл из газетной вёрстки, где самые важные материалы размещались на верхней половине первой полосы. В digital-маркетинге above the fold – наиболее ценная зона для размещения оффера и CTA.

Примеры Above the fold

Плохой пример (пустая зона above the fold): Посадочная страница открывалась большим декоративным баннером без текста и кнопок. Пользователь не понимал, что предлагает компания, и уходил. Показатель отказов составлял 78%.

Хороший пример (сильная зона above the fold): На первом экране разместили: заголовок с чётким оффером, подзаголовок с выгодой, кнопку «Получить расчёт» и блок доверия (логотипы клиентов). Показатель отказов снизился до 42%, конверсия выросла вдвое.

Почему это важно?

Исследования тепловых карт показывают, что до 80% времени на странице пользователь проводит именно в зоне above the fold. Если первый экран не захватывает внимание и не доносит ценность предложения, большинство посетителей уходят, не увидев основного контента. Работа над этой зоной даёт максимальный ROI среди всех задач по оптимизации конверсии.

Как работает Above the fold?

Граница «линии сгиба» зависит от устройства и разрешения экрана. На десктопе это примерно 600–900 пикселей от верха страницы, на мобильных – 500–700 пикселей. Проектируя first screen, дизайнеры ориентируются на наиболее распространённые разрешения аудитории сайта (данные из Google Analytics или Яндекс Метрики). Heatmap-инструменты помогают понять, как далеко листают реальные пользователи.

Советы и рекомендации

Как оптимизировать зону above the fold:

1. Разместите оффер в заголовке первого экрана – пользователь должен сразу понять, что вы предлагаете;
2. Добавьте CTA-кнопку выше линии сгиба – не заставляйте скроллить до призыва к действию;
3. Не перегружайте первый экран: один оффер, одна кнопка, один визуальный акцент;
4. Проверяйте отображение на мобильных устройствах отдельно – граница сгиба там ниже;
5. Анализируйте тепловые карты и скролл-глубину, чтобы понять, как пользователи взаимодействуют с первым экраном.

Связанные услуги: Разработка сайтов, Редизайн сайта

Связанные термины: CTA, Heatmap, CRO