Первый экран сайта - это часть страницы, которую посетитель видит до прокрутки. На главной или странице услуги он должен объяснять предложение, кому оно подходит и что делать дальше. Для этого нужны конкретный заголовок, дополняющая фраза, уместный визуал и заметное основное действие. Видимая область меняется в зависимости от устройства и браузера.
В W-MAX мы заметили повторяющуюся картину при разборе тепловых карт и поведения на 11 сайтах разных тематик: полезное предложение становилось сложнее понять, когда с ним конкурировали меню, плавающие приглашения и декоративные элементы. На телефонах прокрутка нередко доходила примерно до пяти экранов. Это качественное наблюдение из практики, а не контролируемый эксперимент или общий предел. Измеренного прироста конверсии к нему мы не приписываем.
Что должно быть на первом экране сайта
Заголовок первого экрана: объясните, чем занимается компания
«Ремонт котлов в Тампе» даёт посетителю точку опоры. «Новый стандарт комфорта» оставляет услугу и территорию непонятными. Заголовок может быть прямым без перечисления всех ключевых слов. Используйте понятное покупателю название и существенное ограничение.
Подзаголовок: ответьте на следующий вопрос
Дополните заголовок составом услуги, доступностью или условием. Повторение того же смысла другими словами занимает место без пользы. Eyebrow (небольшая подпись над заголовком) уместен, когда добавляет контекст, например категорию услуги. Если там только «Добро пожаловать», его можно убрать.
Изображение в hero-блоке: помогите понять предложение
Деталь товара, процесс услуги или понятный результат могут объяснить предложение. Большая декоративная фотография иногда сдвигает полезную информацию ниже первого экрана. Посмотрите страницу без неё: если понимание не изменилось, изображению нужна более конкретная задача. Это не означает, что картинка обязательна в каждом hero-блоке.
Кнопка CTA: обозначьте основное следующее действие
Главное действие должно быть легко найти, а подпись должна объяснять переход. «Запросить расчёт» понятнее «Узнать больше», когда дальше открывается форма оценки. Вторая кнопка может помогать тому, кто ещё не готов обратиться, но ей нужны отдельная задача и меньший визуальный вес.
Примеры первого экрана мобильного сайта: сравнение структуры
Как меняется порядок информации на телефоне
Все схемы учебные. Граница экрана условная: это не снимки клиентов, не тепловые карты и не измерение конверсии. Переключите вариант, затем сравните все три ниже.
Понятное предложение
Проверим неисправность и согласуем состав работ до ремонта.
Запросить расчётДиагностика → согласование → ремонт. Здесь размещается проверяемое подтверждение предложения.
Все три схемы и объяснения
Понятное предложение
Проверим неисправность и согласуем состав работ до ремонта.
Запросить расчётДиагностика → согласование → ремонт. Здесь размещается проверяемое подтверждение предложения.
Заголовок объясняет услугу, подпись добавляет условие, главное действие видно. На втором экране - состав и порядок работы. Это исходный вариант для проверки, не доказанный победитель.
Декоративный перегруз
Индивидуальный подход и современные решения для вашего комфорта.
Запросить расчётДиагностика → согласование → ремонт. Здесь размещается проверяемое подтверждение предложения.
Конкретная услуга в этом варианте появляется поздно.
Баннер, общие слова и дополнительные приглашения занимают место до конкретного предложения. В этой схеме часть полезной информации сдвинута ниже. Уберите то, что не помогает задаче, затем проверьте понимание.
Два конкурирующих действия
Проверим неисправность и согласуем состав работ до ремонта.
Запросить расчётСмотреть услугиДиагностика → согласование → ремонт. Здесь размещается проверяемое подтверждение предложения.
Две одинаково заметные кнопки требуют выбора. Второй маршрут может быть полезен, если задачи различаются. Уточните подписи и приоритет, затем измерьте реальные обращения.
Что разместить на втором экране сайта
Ответьте на следующее сомнение покупателя
Когда первый экран объяснил услугу, следующий раздел должен закрыть реальный вопрос: что входит в работу, где вы работаете, что будет после заявки или чем подтверждено предложение. Не повторяйте тот же слоган более крупным шрифтом.
Для ремонта первыми могут быть состав и доступность. Для незнакомого сервиса полезнее короткий пример работы. Для дорогого проекта следующую прокрутку могут заслужить процесс и убедительные доказательства. В разборе элементов страницы услуги рассмотрена остальная страница; здесь нас интересует порядок начальной информации.
Размещайте доказательство рядом с утверждением
Используйте реальные подтверждения с понятным смыслом. Отзыв о скорости ответа лучше подкрепляет такое обещание, чем посторонний логотип. Не придумывайте рейтинг и не показывайте клиентские работы без разрешения. Когда экраны клиента нельзя публиковать, подписанная схема объяснит процесс, не изображая настоящий кейс.
Одна или две кнопки CTA: что лучше для конверсии
Без задачи и аудитории победителя нет. Одно действие может подходить узкой рекламной странице. Главной, которая обслуживает действующих клиентов и новых покупателей, иногда нужно несколько маршрутов. Смотрите, какую задачу решает дополнительная кнопка, а не только насколько у неё меньше кликов.
Как проверить иерархию CTA без полной смены предложения
Сохраняйте сопоставимые источник трафика и предложение. Меняйте определённый элемент: например, заметность дополнительной кнопки. Запишите ожидаемый результат и риск, в том числе снижение полезных переходов к ценам. Считайте завершённые обращения и их качество, а не одни клики.
Почему на вторую кнопку редко нажимают
Она может быть лишней, неудачно подписанной, плохо заметной или нужной меньшей части посетителей. Малое число кликов не доказывает рост продаж после удаления. Сначала проверьте адрес перехода и потребность тех, кто ей пользуется.
Карусели, всплывающие окна и анимация на главной
Исследование Baymard о каруселях разбирает требования к реализации, включая управление и видимость контента. Оно не доказывает, что любая карусель провальна. Если важное предложение находится на следующем слайде, проверьте, можно ли его обнаружить и открыть. Одно статичное сообщение зачастую проще поддерживать и проверять.
Я бы также открыл страницу как новый посетитель с телефона. Выбор cookies, чат, подписка и закреплённая акция могут появиться одновременно. Каждой команде её элемент кажется небольшим; посетитель получает весь набор. Сохраните доступность необходимых элементов управления и уберите лишние помехи покупке.
Выбирайте интерактив по задаче, а не только по возрасту
Молодой аудитории не обязательно нужны летающие объекты. Человеку старше 40 может помогать интерактивное сравнение. Проверяйте понимание, ограничения устройства и настройки движения. Анимация полезна, когда объясняет изменение; дайте возможность остановить её и учитывайте предпочтение уменьшенного движения.
Глубина прокрутки на мобильном: какой длины должна быть страница
Наше наблюдение примерно о пяти экранах - причина проверить размещение информации, а не обрезать все страницы до такой длины. Человек мог найти ответ, запутаться или отправить заявку. Одна глубина прокрутки не различает эти причины. Сам размер экрана тоже меняется с высотой окна и масштабом текста.
Исследование прокрутки NN/g поддерживает приоритет важного в начале, при этом люди действительно прокручивают страницы. Не оставляйте единственный путь обращения в самом низу длинного материала. Дайте уместное действие после начального объяснения и повторите там, где последующий контент закрывает значимое сомнение.
Чек-лист проверки UX первого экрана
- Откройте страницу на небольшом телефоне и большом экране, в том числе с увеличенным текстом. Понятно ли предложение и не перекрывает ли всплывающий блок нужное действие?
- Попросите незнакомого с компанией человека объяснить страницу своими словами. Запишите ошибки понимания до собственных объяснений.
- Проверьте доставку формы и адрес каждой кнопки. Понятная страница со сломанным обращением всё равно теряет заявки.
- Разделяйте наблюдения по странице, устройству и намерению трафика. Сохраняйте ограничения согласия на аналитику и полноты записей рядом с результатом.
- В контролируемом сравнении заранее определите основной результат, требования к выборке и условия остановки. Малые выборки оставляют неопределённость.
Принципы главной страницы NN/g помогают проверить понятность назначения и навигации. В своём разборе я задаю практический вопрос: что посетителю нужно понять сейчас, а что может подождать? Дальнейший путь разобран в статье почему посетители сайта не превращаются в звонки.
Частые вопросы
Есть ли у первого экрана фиксированная высота в пикселях?
Нет. Видимая область зависит от устройства, интерфейса браузера, масштаба и настроек текста. Проверяйте варианты, которыми пользуется ваша аудитория.
На первом экране должна быть только одна кнопка?
Не обязательно. Выделите главное действие. Дополнительный маршрут полезен, если решает отдельную задачу и не конкурирует с основным на равных.
Доказывает ли тепловая карта причину ухода?
Нет. Она показывает записанные взаимодействия. Для причинного вывода нужны наблюдение за задачей, технические проверки и результаты обращений.
Нужно ли делать любую посадочную короче пяти экранов?
Нет. Наше наблюдение по 11 сайтам не является правилом длины. Сохраняйте нужные ответы и размещайте уместные действия там, где ими смогут пользоваться.