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