Первый экран в веб-дизайне¶
Первый экран (также начальный экран, above the fold, от англ. above the fold — «над сгибом») — это часть веб-страницы, которая видна пользователю сразу после загрузки, без прокрутки. Термин обозначает верхнюю область документа, попадающую в видимую область окна браузера или экрана устройства. Первый экран считается ключевой зоной восприятия: именно в нём пользователь за несколько секунд решает, остаться на странице или покинуть её.
¶Происхождение термина
Выражение above the fold пришло из газетного дела. В печатной прессе «сгибом» называли линию складывания полосы: самая важная информация — название издания, главный заголовок, сенсационный материал — размещалась в верхней половине, которую читатель видел на витрине или в развёрнутом виде. Нижняя часть считалась менее заметной.
С распространением интернета термин перенесли на веб-страницы. Здесь аналогом «сгиба» стала нижняя граница видимой области окна браузера. Всё, что находится выше неё, видно сразу; всё, что ниже, требует прокрутки. В русскоязычной практике закрепились варианты «первый экран» и «начальный экран».
¶Размеры и факторы, влияющие на границу
Единого значения высоты первого экрана не существует: граница зависит от разрешения экрана, размера окна браузера, масштаба страницы, наличия панелей инструментов и адресной строки, а также от типа устройства.
| Устройство | Типичное разрешение | Ориентировочная высота видимой области |
|---|---|---|
| Настольный компьютер | 1920×1080 | 900–980 px |
| Ноутбук | 1366×768 | 620–700 px |
| Планшет | 768×1024 | 900–1000 px |
| Смартфон | 360×640 — 430×932 | 550–800 px |
На мобильных устройствах граница дополнительно смещается из-за адресной строки, которая может скрываться при прокрутке, и системных панелей. Поэтому при вёрстке ориентируются не на фиксированную высоту, а на диапазон и проверяют отображение на нескольких разрешениях.
¶Составные элементы
Типовой первый экран включает несколько функциональных блоков:
- Шапка сайта (header) — логотип, название, основное меню навигации, контакты, кнопки входа.
- Заголовок (H1) — главное сообщение страницы, формулирующее её тему.
- Подзаголовок или краткое описание — пояснение предложения в одном-двух предложениях.
- Призыв к действию (CTA) — кнопка или ссылка, побуждающая к целевому действию.
- Визуальный элемент — изображение, иллюстрация, видеоролик, анимация.
- Дополнительные элементы — формы, значки доверия, краткие преимущества, ссылки на разделы.
Набор и порядок блоков зависят от назначения страницы: для интернет-магазина важны поиск и категории, для лендинга — заголовок и кнопка, для медиа — свежие материалы.
¶Функции и значение
Первый экран выполняет несколько задач одновременно:
- Идентификация — пользователь понимает, на какой сайт он попал и о чём ресурс.
- Ориентация — видит основные разделы и способ перемещения по сайту.
- Вовлечение — получает стимул продолжить знакомство со страницей.
- Конверсия — совершает целевое действие, если оно предложено сразу.
Исследования юзабилити показывают, что внимание пользователя распределяется неравномерно: верхняя часть страницы получает значительно больше просмотров, чем нижняя. Это явление описывают как «F-образный» паттерн чтения: взгляд движется по верхней горизонтали, затем по второй, более короткой, и далее вертикально вниз по левому краю.
¶Принципы проектирования
При разработке первого экрана учитывают ряд практических правил:
- Ясность вместо интриги. Заголовок должен прямо сообщать, что предлагает страница.
- Один главный акцент. Несколько равнозначных призывов конкурируют за внимание и снижают результат.
- Контраст. Кнопка целевого действия выделяется цветом и размером относительно фона.
- Читаемость. Размер шрифта, межстрочный интервал и контраст текста подбираются под мобильные экраны.
- Скорость загрузки. Крупные изображения и видео на первом экране замедляют отрисовку и увеличивают показатель отказов.
- Адаптивность. Раскладка перестраивается под разную ширину и высоту окна.
Отдельно рассматривается вопрос о «высоте» первого экрана. В 2010-х годах распространилась практика умещать весь ключевой контент в одну видимую область, чтобы пользователю не приходилось прокручивать. Позднее подход смягчился: прокрутка перестала восприниматься как барьер, поскольку пользователи мобильных устройств привыкли к вертикальному скроллу. Тем не менее главное сообщение и основной призыв к действию по-прежнему рекомендуется размещать в видимой зоне.
¶Измерение и анализ
Эффективность первого экрана оценивают с помощью веб-аналитики и инструментов юзабилити:
- Карты скроллинга показывают, до какой глубины доходит пользователь.
- Тепловые карты кликов и движений курсора выявляют зоны внимания.
- A/B-тестирование позволяет сравнить варианты заголовков, кнопок и изображений.
- Показатель отказов и время до первого взаимодействия служат косвенными метриками.
- Веб-визоры фиксируют записи сессий и затруднения пользователей.
¶Ограничения понятия
Термин имеет условный характер. Граница первого экрана непостоянна: она меняется при изменении размера окна, повороте устройства, включении режима чтения. Кроме того, современные интерфейсы часто используют «липкие» (sticky) элементы — шапку или кнопку, которые остаются на виду при прокрутке, что размывает границу между первым экраном и остальной страницей. Наконец, часть пользователей попадает на страницу по прямой ссылке на конкретный раздел, минуя верхнюю область.
¶Источники
- Якоб Нильсен, Каро Лоранжер. «Веб-юзабилити».
- Стив Круг. «Не заставляйте меня думать».
- Дональд Норман. «Дизайн привычных вещей».
- Материалы Nielsen Norman Group по визуальному восприятию веб-страниц.
- Руководства по адаптивной вёрстке и веб-аналитике.