Почему так важен первый экран?
Для начала поясню, что такое первый экран сайта, для тех, кто не знает. Это блок, который сразу виден на вашем устройстве (компьютер, планшет, смартфон) без скроллинга, когда вы открываете сайт.И это ну прям «маркетинговый фундамент» всего вашего сайта.
Лет 10-15 назад на западе проводились исследования, которые показали, что 7 из 10 человек не листают ниже первого экрана. И понеслось, – «Бизнес Молодость», лендинги, УТП, 4U-заголовки и так далее…
Позднее кто-то сформулировал «Правило 3 секунд». Оно гласит примерно так: «Человек, открывший сайт, в первые 3 секунды решает, остаться на нем и скроллить дальше, или закрыть его».
Именно в этом и кроется важность первого экрана. Именно поэтому я назвал его «маркетинговым фундаментом» сайта. Ведь если первый экран будет совсем плох, то наличие на сайте крутых отзывов, примеров работ, фотографии директора, выгодных акций и скидок – не сильно поможет. Ведь большинство людей будет покидать сайт в первые секунды после открытия.
Так как же удержать человека от закрытия сайта, побудить его остаться и ознакомиться с вашим предложением? Как должен выглядеть первый экран сайта?
На мой взгляд, зависит от контекста. Я выделяю два «случая».
![Keycap: 1 :one: 1️⃣](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/0031-20e3.png)
![Keycap: 2 :two: 2️⃣](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/0032-20e3.png)
В зависимости от каждого случая структура первого экрана будет немного различаться.
Одна услуга / одно направление
Здесь все просто: можно вспомнить советы, фишки, мануалы маркетологов последних лет.1 – Сначала идет Заголовок, отражающий ваше УТП (уникальное торговое предложение). Или, если у вас почему-то не получается сформировать УТП, – то просто заголовок, обозначающий ваше предложение. Но, для помощи, есть неплохая модель 4U-заголовка:
- usefulness – полезность;
- uniqueness – уникальность;
- ultra-specific – конкретность;
- urgency – срочность.
Более подробно об этом методе – можете нагуглить, статья не о нем. И, к слову, «срочность» оттуда я бы убрал, – сегодня это будет слишком явная манипуляция. И в целом надо быть осторожнее, – не переборщить, превратив заголовок в какой-то «кликбейт» или подобие заголовка из желтой прессы.
Простыми словами: помещаем в заголовок само наше предложение (что предлагаем), какие-то 1-2-3 весомых преимущества (гарантия 10 лет, без предоплаты и т.п.), обязательно, регион (напр., «в Москве») и, при желании, цену (от 45 000 руб./м2).
Итак, примеры неплохих Заголовков (здесь и далее скриншоты только моих сайтов):
2 – Далее, по желанию, может идти Подзаголовок. Который продолжит или дополнит наше торговое предложение, содержащееся в Заголовке. В подзаголовке должна содержаться чуть менее чем в заголовке, но тоже важная информация для потенциальных клиентов. Но «важная» – это не время работы, например. А все то, что склонит человека продолжить знакомиться с вашим сайтом / компанией / услугами далее. Т.е. двигать взгляд ниже, а не закрыть сайт. Здесь могут располагаться как «преимущества» или «фишки» (Гарантия 10 лет), так и важные уточнения (Работаем по всей РФ).
Подзаголовок я использую нечасто. Иногда лучше обойтись без него, если информации и так много, чтобы не перегружать посетителей сайта.
Примеры подзаголовков:
3 – Затем важным элементом первого экрана являются Выгоды («фишки», факты, преимущества). Несколько коротких фактов, по возможности, с цифрами, которые так же дополняют ваше предложение. И которые, желательно, являются весомыми конкурентными преимуществами. Например, «Сроки: от 24 часов», «Работаем без предоплаты», «Бесплатный выезд сегодня», и т.п. Снабжаем их тематическими иконками.
Примеры выгод:
4 – Кнопка. Или две кнопки. Например, одна для заказа консультации, другая для расчета стоимости (открывающая квиз). Кнопки располагаются либо после заголовка/подзаголовка. Либо после выгод.
Все кнопки вы видели на скриншотах выше.
* * *
И… поздравляю. Первый экран готов. Теперь рассмотрим второй случай.
Несколько услуг / направлений на одной странице
Когда на одной странице мы продаем несколько видов услуг или направлений. Это могут быть услуги ковки: от мангалов до ворот и беседок. Это могут быть услуги промышленных альпинистов: мытье окон зданий, покраска фасадов, спил и кронирование деревьев. Или какие-нибудь услуги разнорабочих.Здесь задача становится чуть сложнее.
![Keycap: 1 :one: 1️⃣](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/0031-20e3.png)
Поэтому заголовок должен быть обобщающим и, получается, достаточно простым: «Услуги промышленных альпинистов в Москве и области».
![Keycap: 2 :two: 2️⃣](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/0032-20e3.png)
![Keycap: 3 :three: 3️⃣](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/0033-20e3.png)
Поэтому вместо «выгод» я рекомендую перечислить 3-4 основных направления/услуг. (Если, конечно, мы не сделали это в подзаголовке. Тогда здесь можно оставить выгоды.)
Посетитель зайдет на сайт, – и: «Ага, это то, что я ищу».
![Keycap: 4 :four: 4️⃣](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/0034-20e3.png)
Пара примеров вариантов с несколькими направлениями/услугами.
Пара слов о фоне / визуале первого экрана
Тут ничего особенного. Строите дома? На фоне красивый домик. Рекламируете мед.клинику? На экране улыбающийся врач. Делаете ремонт квартир? На фоне красивый интерьер. Ну или улыбающийся прораб.В общем и целом, фоны или картинки на первых экранах должны быть «в тему». Либо услуги/товары. Либо люди-специалисты, желательно, с улыбками.
Заключение
Резюмируем.- От содержимого первого экрана зависит, будет ли посетитель смотреть сайт дальше или сразу закроет его.
- Чтобы он сразу его не закрыл, на первом экране необходимо показать человеку именно то, что он ищет.
- Для того, чтобы заинтересовать человека и побудить его знакомиться с сайтом и компанией дальше, – на первом экране должны быть кратко обозначены реальные выгоды для клиента / ваши конкурентные преимущества.
- Для самых торопливых или «горячих клиентов» на первом экране должна быть минимум 1 кнопка, чтобы можно было сразу оставить заявку.
Для просмотра ссылки необходимо нажать
Вход или Регистрация