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