Первый экран сайта обязан ответить на четыре вопроса без прокрутки. Разбираем эти вопросы и шесть решений, которые прячут ответы.
Первый экран - это верхняя часть страницы, которую человек видит сразу, не трогая колесико мыши. У вас есть несколько секунд, чтобы он понял, туда ли попал. Не прочитал, а именно понял: по крупному заголовку, по картинке и по одной кнопке. Если за это время ответа нет, посетитель возвращается в выдачу, где открыты еще три вкладки с конкурентами. Он не напишет вам письмо с объяснением - он просто станет отказом в отчете.
Посетитель не читает первый экран, он его сканирует
Взгляд человека, который впервые попал на незнакомый сайт, работает не так, как взгляд владельца. Владелец видит макет целиком и помнит, что написано ниже. Посетитель видит четыре-пять крупных объектов: логотип, заголовок, картинку, кнопку, иногда меню. Мелкий текст на этом этапе не читается вообще, он превращается в серые полосы. Поэтому все, что вы объяснили восьмым кеглем под слоганом, до человека не доходит.
Отсюда следствие, которое переворачивает работу над страницей: смысл должен лежать в самых крупных элементах, а не рядом с ними. Если заголовок набран крупно и не сообщает ничего, экран молчит, сколько бы полезного ни было в подзаголовке. И наоборот: один точный заголовок из семи слов снимает и вопрос «что вы делаете», и вопрос «для кого это», до того как человек тронет прокрутку.
- Логотип и название замечают за долю секунды, но они почти никогда не объясняют, чем вы занимаетесь.
- Крупный заголовок - единственный текст, который прочитают целиком.
- Картинку или видео считывают как настроение, а не как информацию: абстракция не расшифровывается.
- Кнопку увидят, если она одна. Если рядом стоят еще три равные по весу, не заметят ни одной.
- Телефон, меню, мелкие подписи найдут только те, кто уже принял решение и ищет их специально.
Четыре ответа, которые первый экран сайта дает без прокрутки
Вся проверка сводится к четырем вопросам, которые посетитель задает себе молча и очень быстро. Он не формулирует их словами, но если хоть один остается без ответа, дальше он не идет. Вопросы работают строго по порядку: пока не понятно, куда человек попал, его не интересует ваша кнопка.
- Куда я попал. Что это за компания и к какому рынку она относится. Не название, а род занятий.
- Что вы делаете. Конкретная услуга или товар, а не «решения для бизнеса» и не «полный цикл».
- Для кого это. Названа ли ситуация, в которой человек себя узнает: его отрасль, его объем, его задача.
- Что мне сделать дальше. Одно понятное действие, у которого видна цена входа: сколько времени и информации оно потребует.
Четвертый вопрос чаще всего решают хуже других. Кнопка «Оставить заявку» ничего не обещает: человек не знает, позвонят ему через минуту или через неделю, продадут в лоб или посчитают смету. Кнопка «Рассчитать стоимость за 2 дня» отвечает на тот же вопрос и снимает страх лишнего разговора. Разница в тексте, а не в верстке, и стоит она ноль рублей.
Внутри MOON верхний блок сверяют по правилу основателя студии: продукт должен читаться «как дважды два» - было А, стало Б, Б выгоднее. Пара «было - стало» закрывает сразу второй и третий вопросы, потому что называет и услугу, и ситуацию, из которой человек в нее приходит. Если такую пару не получается написать про собственный первый экран, дело не в словах и не в верстке: предложение еще не сформулировано, и любой заголовок будет подбором синонимов.
Шесть решений, которые прячут эти ответы
Почти все провальные первые экраны собраны из одних и тех же деталей, и каждая из них когда-то казалась удачной идеей. Слайдер придумали, чтобы уместить все услуги. Видео - чтобы было живо. Форму подняли наверх, чтобы заявки шли быстрее. Проблема в том, что каждое из этих решений отбирает место у ответа на один из четырех вопросов.
| Решение | Что получает посетитель | Чем заменить |
|---|---|---|
| Слайдер из трех-пяти баннеров | Первый кадр он дочитать не успевает, второй уже уехал | Один экран с одним предложением, остальные услуги - блоками ниже |
| Заголовок «Решения для вашего бизнеса» | Ноль информации о том, что именно вы продаете | Заголовок с предметом и адресатом: что делаете и для кого |
| Видео на весь экран без подписи | Настроение вместо смысла, а на слабом мобильном - пустой экран | Видео фоном, но заголовок и кнопка поверх него читаются всегда |
| Форма вместо предложения | Просьба оставить телефон раньше, чем он понял зачем | Сначала оффер и одна кнопка, форма - ниже или по клику |
| Стоковое фото людей в костюмах | Сигнал «здесь как у всех», доверия он не добавляет | Свои фото, скриншоты продукта, снимки реальных объектов |
| Меню из двенадцати пунктов и три кнопки | Выбор вместо действия: кликает не туда или никуда | Одно главное действие, второе - тихой ссылкой рядом |
Отдельно про слайдер. Его почти всегда ставят как компромисс между отделами: маркетологу нужна акция, продажам - флагманская услуга, руководителю - фраза про надежность. Выглядит это как решение спора, а по факту - отказ выбирать, переложенный на посетителя. Он не листает, он уходит. Если выбрать одно предложение невозможно, значит, у сайта не одна аудитория, и ответ - разные посадочные страницы, а не карусель на главной.
Как из слогана сделать предложение: примеры заголовков
Заголовок первого экрана - это не название компании и не девиз. Это одно предложение, из которого понятно, что вы делаете, для кого и в чем измеряется результат. Рабочая формула простая: услуга плюс адресат плюс ограничение. Ограничение - это цифра, срок, география или объем: именно оно превращает общие слова в предложение, к которому можно примерить свою ситуацию.
| Как написано сейчас | Что с этим не так | Как переписать |
|---|---|---|
| Комплексные решения для бизнеса | Подходит любой компании страны, значит, не про вас | Маркетинг для застройщиков и агентств недвижимости |
| Мы создаем будущее | Не названа ни услуга, ни клиент, ни задача | Проектируем и монтируем вентиляцию на складах от 1000 кв. м |
| Более 15 лет на рынке | Про вас, а не про то, зачем человек пришел | Ремонт промышленных холодильников за сутки, выезд по области |
| Доверьте нам свой проект | Просьба без основания, доверять пока не за что | Считаем смету на остекление за два дня по вашим чертежам |
Заголовок с адресатом кажется рискованным: страшно отсечь тех, кто не попал в описание. По нашим проектам выходит обратное: заголовок с адресатом отсеивает тех, кто и так не дошел бы до сделки, и попадает в тех, кто искал именно эту специализацию. На проекте FAB.AGENCY мы отказались от формулировки «агентство полного цикла» и построили позиционирование вокруг одной ниши - маркетинга для строительных компаний и недвижимости. От этой формулировки дальше выросла вся структура сайта, а не только верхний блок.
Что должно быть на первом экране: состав блока
Полезно смотреть на первый экран не как на картинку, а как на набор из шести элементов, у каждого из которых своя работа. Если элемент не делает свою работу, он не украшение, а помеха: он занимает место и внимание. Проверять состав удобно по таблице ниже - каждую строчку можно закрыть за один вечер без подрядчика.
| Элемент | Его работа | Как проверить |
|---|---|---|
| Заголовок | Назвать услугу и адресата | Посторонний пересказывает своими словами после пяти секунд |
| Подзаголовок | Снять главное возражение или уточнить условия | В нем есть цифра, срок или ограничение, а не эпитеты |
| Главное действие | Дать один следующий шаг | Кнопка одна, на ней написано действие, а не «Отправить» |
| Доказательство | Показать, что вы это уже делали | Логотип клиента, цифра или ссылка на кейс видны сразу |
| Визуал | Показать продукт или объект | На картинке видно то, что вы продаете, а не абстракция |
| Контакт | Дать способ связаться прямо сейчас | Телефон или мессенджер заметны без прокрутки, в том числе на телефоне |
Про визуал стоит сказать отдельно. Для стартапа ReNairo мы сознательно отказались от абстрактных иллюстраций и поставили на сайт реальные скриншоты дашборда и реальные разборы звонков. Продукт выходил на рынок впервые, и задача была не продать, а объяснить: раньше это делал отдел контроля качества, теперь так. Когда человек видит на экране то, что он получит, вопрос «что вы вообще делаете» снимается без единого слова.
Что это дает: счет в заявках и деньгах
Первый экран не приносит заявки сам по себе - он решает, сколько людей вообще дойдет до остального сайта. Поэтому считать его эффект удобнее не в процентах конверсии, а в стоимости трафика, который вы уже оплатили. Если из ста оплаченных переходов восемьдесят закрывают вкладку на верхнем блоке, вы платите за показ слогана, а не за заявки.
Как это выглядит на цифрах, видно по FAB.AGENCY. Сайт агентства дает около 100 посетителей в месяц - по меркам рекламы это почти ничего. При этом 6,2 процента посетителей кликают по кнопке призыва к действию, 3,6 процента оставляют заявку, а 1,9 процента доходят до продажи. В месяц это 4-5 клиентов на дорогие услуги при нулевых затратах на рекламу; первые заявки пришли на десятый день после запуска. Время на сайте выросло на 38 процентов по сравнению с прежней заглушкой.
Четыре проверки, которые вы сделаете сами за вечер
Ничего из перечисленного ниже не требует подрядчика, доступа к коду и бюджета. Понадобятся телефон, аккаунт в Яндекс.Метрике и один посторонний человек, который не знает вашу компанию. На все про все уходит примерно два часа, и после них вы будете точно знать, надо переписывать верхний блок или проблема лежит глубже.
- Тест на пять секунд. Покажите экран трем людям со стороны и попросите пересказать, чем вы занимаетесь и кому это нужно. Считается пересказ своими словами, а не «ну, что-то про строительство».
- Проверка на телефоне. Посмотрите, что попадает на экран до прокрутки. Часто там остается логотип и половина заголовка, а кнопка уезжает вниз.
- Карта скроллинга в Метрике. Посмотрите, какая доля посетителей уходит, не прокрутив первый экран. Больше половины - дело в верхнем блоке, а не в глубине сайта.
- Сверка с рекламой. Сравните обещание в объявлении с заголовком, который человек видит после клика. Расхождение здесь съедает бюджет быстрее всего.
Три из четырех проверок дают результат сразу, четвертая требует пары дней накопленной статистики. Если после них выяснилось, что до формы люди просто не доходят, дальше стоит идти по общему порядку из статьи «Почему с сайта нет заявок»: первый экран там всего лишь пятый пункт из восьми, и бывает, что чинить надо не его.
Когда переписать один экран уже мало
Черновик нового заголовка владелец пишет за вечер, а доведенный до сайта первый экран - это 2-5 дней работы. Если вы уже знаете, кому продаете и чем отличаетесь, этого достаточно. Но если первый экран не получается сформулировать, проблема обычно не в нем: непонятно, кому вы продаете и чем отличаетесь от соседа по выдаче. Тогда переписывание заголовка превращается в подбор слов, а через месяц все возвращается к «решениям для бизнеса», потому что за словами нет решения о позиционировании.
Второй случай - когда за первым экраном идет страница, которая не подтверждает обещание. Человек поверил заголовку, прокрутил и не нашел ни состава работ, ни цен, ни примеров. Тогда правильнее разбираться со всей страницей: как она устроена по блокам, разобрано в материале про структуру лендинга, а что происходит в первые секунды знакомства с компанией - в статье «Первое впечатление о сайте решает все».
- Черновик заголовка владелец пишет за вечер, доведенный до сайта первый экран - 2-5 дней.
- Если вместо стока нужны свои фото или скриншоты продукта, к этому сроку добавляется съемка.
- Позиционирование меняется неделями и тянет за собой структуру сайта целиком, как было на FAB.AGENCY.
- Если верстка не переживет правок, разговор идет уже про переделку сайта, а не про один блок.