Первый экран сайта: что на нём должно быть

Первый экран - это то, что человек видит до прокрутки. Дальше он идёт, только если здесь понял, куда попал и зачем оставаться. Всё остальное на сайте может быть отличным, но если первый экран не отвечает на базовые вопросы, до остального просто не доходят.

Почему первый экран важнее остальных?

Потому что он единственный, который видят все. Ниже прокручивает уже меньшая часть посетителей, до формы внизу добирается ещё меньшая. Первый экран получает всю аудиторию целиком - и рекламный трафик, и поисковый.

И потому что здесь принимается решение остаться. Человек не читает сайт, он его сканирует: смотрит заголовок, ищет знакомые слова, оценивает, похоже ли это на то, что он искал. Если за беглый взгляд картинка не складывается, он возвращается в выдачу.

Важная поправка: первый экран не должен продавать. Его задача - сориентировать и дать следующий шаг. Продаёт всё, что идёт дальше.

Что должно быть на нём обязательно?

Четыре вещи, и они закрывают базовые вопросы посетителя.

Кто вы - название и род деятельности. Логотипа недостаточно: он ничего не говорит человеку, который видит вас впервые.

Что вы предлагаете - заголовок, который называет услугу или товар словами клиента.

Почему вы - одна короткая мысль, которая отличает вас: формат работы, специализация, условие. Не список преимуществ, а одна строка.

Что делать дальше - кнопка с понятным действием.

Для местного бизнеса сюда же добавляется география: город или район. Человек, который ищет услугу рядом, ищет глазами именно это.

Цена на первом экране - отдельный разговор: если у вас есть понятная нижняя планка, она работает очень сильно. Подробнее: цены на сайте: показывать или скрывать.

Как написать заголовок, который понимают сразу?

Заголовок - главный элемент экрана, и чаще всего именно он сломан.

Работает формулировка, которая называет вещи своими именами: что вы делаете, для кого, с каким результатом. «Кухни на заказ по вашим размерам» понятнее, чем «Пространство, где рождается уют».

Что ломает заголовок:

Метафоры и абстракции. «Ваш надёжный партнёр», «территория красоты», «мы создаём будущее» - это не сообщает ничего.

Разговор о себе. «Мы работаем с душой» вместо того, что человек получит.

Термины изнутри отрасли, которые клиент не использует, когда ищет.

Слишком длинная фраза. Если заголовок нельзя прочитать одним взглядом, он не заголовок.

Проверка простая: закройте логотип и прочитайте заголовок. Если по нему нельзя понять, чем занимается компания, его надо переписывать.

Какой должна быть кнопка?

Одна главная, и она должна выглядеть как кнопка - контрастная, крупная, с полями вокруг.

Текст на кнопке называет действие, а не абстракцию. «Рассчитать стоимость», «Записаться на замер», «Посмотреть каталог» работают лучше, чем «Подробнее» и «Отправить».

Вторая кнопка допустима, если она слабее по оформлению и ведёт в другую сторону: главная - к заявке, дополнительная - к каталогу или кейсам. Две одинаково яркие кнопки рядом - это не выбор, а заминка.

Чего не должно быть: кнопки, которая ведёт в никуда. Если действие требует объяснения, кнопка должна вести к нему, а не открывать форму сразу.

Нужна ли картинка и какая?

Нужна, но она обязана работать, а не заполнять место.

Хорошее изображение показывает предмет разговора: сам товар, результат работы, помещение, процесс. Для услуг это часто фотография объекта или команды, для товаров - сам товар в реальном окружении.

Плохое изображение - это стоковые люди в офисе, рукопожатия, абстрактные градиенты и всё, что можно поставить на любой сайт в любой отрасли. Если картинку можно без потерь заменить на чужую, она не нужна.

Про общее оформление первого экрана и тон сайта: тёмный или светлый сайт.

Что на первом экране лишнее?

Список короткий, но нарушают его почти все.

Слайдер с несколькими баннерами. Пока человек читает первый, приезжает второй. Обычно до конца слайдера не доходит никто.

Меню, занимающее половину экрана. Навигация нужна, но она не главный элемент.

Несколько предложений сразу - скидка, новинка, услуга и подписка на рассылку в одном месте.

Всплывающее окно поверх первого экрана. Человек ещё не понял, куда попал, а его уже просят подписаться.

Длинный текст. Абзац на первом экране не читают.

Общее правило: каждый добавленный элемент забирает внимание у главного. Если что-то можно перенести ниже, его нужно перенести ниже.

Чем первый экран на телефоне отличается?

Тем, что он меньше, и это меняет приоритеты.

На телефоне помещается меньше, поэтому в видимой части должны оказаться заголовок и кнопка. Крупная картинка, занимающая весь экран целиком, отодвигает смысл за границу видимости - человек видит красивое фото и не видит ни одного слова.

Проверять нужно на реальном телефоне, а не в уменьшенном окне браузера. И помнить, что большая часть посетителей приходит именно с телефона, значит мобильная версия первого экрана и есть основная.

Как проверить свой первый экран?

Тремя способами, все бесплатные.

Тест постороннего. Покажите экран человеку, не связанному с вашим бизнесом, и спросите, чем эта компания занимается и что здесь можно сделать. Если он затрудняется, дело не в нём.

Тест подмены логотипа. Мысленно поставьте на своё место логотип конкурента. Если ничего не изменилось, первый экран не говорит о вас ничего конкретного.

Тест на телефоне. Откройте сайт на своём телефоне и посмотрите, видны ли заголовок и кнопка без прокрутки.

Если сайт перестал отвечать на эти вопросы, а переделка первого экрана уже не помогает, речь идёт о более крупной задаче: когда сайту нужен редизайн.

Хотите разобрать свой первый экран - напишите через форму на странице контактов, посмотрю и скажу, что мешает.