Первый экран — это то, что посетитель видит сразу после загрузки страницы, без прокрутки. Он работает как витрина магазина: за очень короткое время человек решает, зайти внутрь или пройти мимо. Если за эти секунды он не понял, где оказался, чем занимается компания и чем она может быть ему полезна, он нажимает «назад». Поисковая выдача предлагает ему ещё десять вариантов, и все они в одном клике.
Парадокс в том, что именно первому экрану заказчики уделяют больше всего внимания в макете, но нередко тратят его на красоту, а не на ясность. Эффектная фотография, абстрактный лозунг и логотип занимают всё пространство, а ответа на главные вопросы нет. В результате сайт получает похвалу от знакомых и низкую конверсию от целевой аудитории.
Ниже разберём, какие вопросы должен закрыть первый экран, из каких элементов он состоит, как написать цепляющий и честный заголовок, выбрать изображение и кнопку, не забыть про мобильные устройства и проверить результат на практике.
Какие вопросы задаёт посетитель за три секунды
Человек, оказавшийся на странице, неосознанно ищет ответы на четыре вопроса:
- Где я? Что это за компания, сайт, продукт.
- Что здесь предлагают? Какую услугу или товар.
- Это для меня? Подходит ли предложение моей ситуации.
- Что делать дальше? Куда нажать, что получу.
Если хотя бы на один вопрос ответа нет, человек начинает прокручивать страницу в поисках информации или уходит. Хороший первый экран отвечает на все четыре прямо, без чтения длинных абзацев.
Из чего состоит удачный первый экран
Навигация и логотип
Шапка помогает сориентироваться, но не должна отвлекать. Логотип слева, меню из пяти-семи пунктов, один выделенный пункт-действие. Подробнее о навигации читайте в статье про ошибки навигации.
Заголовок предложения
Главный элемент экрана. Он сообщает, что вы делаете и для кого. Хороший заголовок конкретен, содержит выгоду или результат и написан человеческим языком. Не «Мы создаём будущее вместе», а «Разрабатываем интернет-магазины, которые окупаются за первые месяцы работы». Обещания должны быть выполнимыми: заголовок ставит ожидание, которое сайт обязан оправдать.
Подзаголовок
Одно-два предложения, раскрывающие заголовок: как именно вы решаете задачу, чем отличаетесь, какие условия предлагаете. Здесь место для уточнений: сроки, формат работы, гарантии.
Главное действие
Кнопка с чётким названием: «Рассчитать стоимость», «Заказать консультацию», «Посмотреть каталог». Рядом желательно вторичное действие, менее заметное, для тех, кто пока не готов: «Смотреть работы», «Как это устроено». О том, как оформить кнопки и подобрать слова, мы подробно писали в статье «Кнопки и призывы к действию».
Визуальный образ
Фотография, иллюстрация, макет интерфейса, видео. Он должен подтверждать сказанное в заголовке, а не просто заполнять место. Для услуги лучше реальная команда, объект или результат, а не стоковая картинка людей, пожимающих друг другу руки.
Элементы доверия
Краткие подтверждения: количество проектов, срок работы на рынке, логотипы клиентов, рейтинг, отзывы, награды. Одна-две сильные детали возле кнопки способны снять сомнения. Но избегайте голословных формулировок вроде «лучшие в отрасли»: нужны проверяемые факты. Подробнее — в разделе отзывов и гарантий нашего сайта: так выглядят элементы доверия в реальной практике.
Намёк на продолжение
Часть следующего блока, видимая внизу экрана, подсказывает, что страница продолжается. Полностью закрытые экраны без намёка на прокрутку иногда создают ощущение, что здесь всё сказано.
Как писать заголовок
Работа над заголовком — самая ценная часть создания первого экрана. Несколько приёмов, которые работают в разных нишах.
- Назовите продукт и аудиторию. «Бухгалтерское сопровождение для небольших интернет-магазинов» сразу фильтрует нужных посетителей.
- Добавьте результат. «…с прозрачной отчётностью и без штрафов» превращает описание в обещание.
- Используйте конкретику. Цифры и сроки вызывают больше доверия, чем общие слова. Но число должно быть реальным.
- Говорите словами клиента. Изучите, как он формулирует проблему в запросах, отзывах и звонках, и используйте его выражения.
- Избегайте клише. «Индивидуальный подход», «Команда профессионалов», «Качество и надёжность» не несут информации, их можно приписать любой компании.
- Не перегружайте. Одна мысль в одном заголовке. Если нужно сказать больше, используйте подзаголовок.
Для проверки заголовка прочитайте его вслух и спросите: понятно ли человеку, никогда не слышавшему о компании, чем она занимается? Если нет, заголовок слишком абстрактен. Про выбор тона и слов в целом читайте в статье «Тон коммуникации бренда на сайте».
| Слабый заголовок | Сильный заголовок | Почему лучше |
|---|---|---|
| Добро пожаловать на наш сайт | Ремонт квартир под ключ с фиксированной сметой | Понятно, что предлагают и какая выгода |
| Качество и надёжность | Доставляем грузы по России за двое суток | Есть конкретика и срок |
| Мы работаем для вас | Юридическая помощь бизнесу: от договора до суда | Видно направление и охват |
| Инновационные решения | Система учёта клиентов, которая подключается за день | Есть результат и скорость |
Выбор изображения
Изображение на первом экране выполняет три задачи: показывает продукт, задаёт настроение, подтверждает доверие. Выбор зависит от типа бизнеса.
- Услуги с важным человеческим фактором (медицина, юристы, консалтинг): реальные фотографии специалистов, живые, без чрезмерной постановки.
- Продукт или сервис в вебе: скриншот или анимация интерфейса в контексте использования.
- Товары: лучшие продукты в качественной съёмке, возможно, в интерьере или в руках.
- Промышленность, строительство: реальные объекты, производство, техника.
- Творческие проекты: крупная иллюстрация или видео с атмосферой.
Избегайте шаблонных фотографий. Посетитель мгновенно узнаёт стоковые снимки и проникается меньшим доверием. Если нет возможности организовать съёмку, лучше использовать качественные иллюстрации или графику. Выбор между подходами разобран в статье «Иллюстрации или фотографии: что выбрать для сайта».
Также следите за весом файла: тяжёлая картинка на первом экране — самая частая причина медленной загрузки. Правила оптимизации описаны в материале про оптимизацию изображений.
Типы первых экранов
Классический: текст слева, изображение справа
Универсальный вариант. Заголовок, подзаголовок и кнопка находятся слева, где начинается чтение, справа визуал. Хорош для услуг и сервисов.
Фоновое изображение или видео
Крупная фотография на всю ширину с текстом поверх. Создаёт атмосферу, подходит для ресторанов, отелей, мероприятий. Нужна подложка для читаемости текста и аккуратная оптимизация веса. Пример подхода можно увидеть в кейсе ресторана «Северный двор».
С формой или квизом
Короткая форма прямо на первом экране. Подходит для лендингов и рекламных страниц, где основная цель — получить заявку. Подробнее — в материале про посадочную страницу под рекламу и про квизы.
С поиском или выбором
Для каталогов, агрегаторов, недвижимости. Центральный элемент — поле поиска или фильтр. Пользователь сразу переходит к цели.
Демонстрация продукта
Интерактивный макет или анимация, показывающая, как всё работает. Эффективно для цифровых сервисов, но требует аккуратной работы со скоростью.
Первый экран на мобильных устройствах
Значительная часть посетителей приходит со смартфона, и первый экран там совсем иной. Высота окна меньше, поля уже, а браузер частично закрывает интерфейс своими панелями.
- Заголовок должен помещаться в три-пять строк и не занимать весь экран.
- Кнопка действия должна быть видна без прокрутки или иметь закреплённую версию.
- Изображение уменьшается или уходит ниже текста, чтобы не вытеснять главное.
- Меню сворачивается в понятный значок, а ключевое действие остаётся доступным.
- Размер нажимаемых элементов — не менее сорока четырёх пикселей по меньшей стороне.
Проектируйте мобильную версию отдельно, а не как «сжатый десктоп». Принципы описаны в статьях про mobile first и адаптивную вёрстку.
Скорость: первый экран должен загружаться мгновенно
Всё, что вы сделали для первого экрана, бессмысленно, если посетитель ждёт пять секунд, глядя на пустое место. Основные меры ускорения:
- оптимизировать главное изображение и использовать современные форматы;
- загружать критичные стили и шрифты в первую очередь;
- откладывать загрузку скриптов, не нужных для отображения;
- избегать видео на фоне без необходимости, а если оно есть, подставлять лёгкую картинку-заглушку;
- не размещать на первом экране тяжёлые виджеты и чаты, которые можно подключить позже.
Подробности — в статье про скорость загрузки сайта.
Типичные ошибки первого экрана
- Абстрактный лозунг вместо предложения. Посетитель не понимает, чем занимается компания.
- Слайдер с пятью слайдами. Люди почти не доходят до второго слайда, а каждый новый снижает внимание. Выберите главное сообщение.
- Нет кнопки или она слабая. Невыразительный текст «Подробнее» не мотивирует.
- Много кнопок равного веса. Три-четыре одинаково яркие кнопки создают паралич выбора.
- Стоковая фотография. Не передаёт специфику бизнеса и снижает доверие.
- Тяжёлый фон. Огромная картинка или видео, замедляющие загрузку.
- Низкий контраст текста. Белые буквы на светлой части фото. См. статью про контраст и читаемость.
- Всплывающие окна сразу при входе. Баннеры подписки и чаты, перекрывающие содержание.
- Перегрузка информацией. Десять преимуществ, три предложения и акция в одном экране.
- Различия с рекламой. Человек пришёл по объявлению с одним обещанием, а на странице видит другое. Несоответствие сразу ведёт к уходу.
Примеры решений для разных бизнесов
- Интернет-магазин. Крупный заголовок с главным ассортиментом, поиск, акция или бестселлеры, видимые условия доставки. Каталог нужно показать сразу. Подробнее о проектировании — в статье про каталог интернет-магазина.
- Клиника. Профиль услуг, записаться онлайн, фотографии реальных врачей и пространства, лицензии и рейтинг. Похожий подход применён в кейсе клиники «Аура».
- Логистика. Заголовок про скорость и география, калькулятор стоимости на экране, ключевые цифры. Мы использовали подобную структуру в проекте «Транзит Групп».
- Строительная компания. Фотография реального объекта, тип работ, диапазон стоимости, кнопка расчёта. Опыт показан в кейсе «МосСтройДом».
- Школа. Название программ, результаты учеников, запись на пробное занятие. Пример — «Лингва Плюс».
Как проверить первый экран
- Тест пяти секунд. Покажите экран на пять секунд и задайте вопросы: что предлагает компания, для кого, что нужно сделать.
- Анализ показателя отказов. Высокий процент уходов в первые секунды говорит о проблемах первого экрана. См. статью про снижение отказов.
- Тепловые карты и записи сессий. Видно, куда смотрят и кликают, доходят ли до кнопки.
- A/B-тестирование. Сравните два варианта заголовка, изображения или кнопки. Методика описана в статье про A/B-тестирование.
- Сопоставление с источником трафика. Для рекламных страниц заголовок должен продолжать мысль объявления.
Пошаговый план создания первого экрана
- Опишите целевую аудиторию и её главную проблему одним предложением.
- Сформулируйте предложение: что вы делаете, для кого и с каким результатом.
- Напишите пять вариантов заголовка и выберите самый конкретный.
- Добавьте подзаголовок с уточнением: срок, гарантия, формат.
- Определите главное действие и подберите точное название кнопки.
- Подберите изображение, подтверждающее предложение.
- Добавьте один-два элемента доверия возле кнопки.
- Проверьте иерархию: заголовок и кнопка заметнее всего остального. Подробнее — в статье «Визуальная иерархия».
- Соберите мобильную версию и проверьте скорость.
- Запустите, соберите данные и улучшайте.
Первый экран — одна из точек, где работа над содержанием важнее дизайна. Мы всегда начинаем с формулировки предложения и только потом рисуем макет: такой порядок заложен в наши этапы работы. Если вы планируете сайт или лендинг, посмотрите наш подход к разработке лендингов.
Итоги
Первый экран должен за несколько секунд ответить на четыре вопроса: где я, что предлагают, подходит ли мне, что делать дальше. Для этого нужны конкретный заголовок, поясняющий подзаголовок, заметное главное действие, честный визуальный образ и элементы доверия. Следите за скоростью и мобильной версией, избегайте клише и перегруза. И обязательно проверяйте гипотезы на реальных посетителях, а не на вкусе внутри команды.
Если хотите оценить первый экран вашего сайта и найти точки роста, напишите нам через страницу контактов. Мы проведём разбор и предложим конкретные изменения в рамках UX-аудита.
