Как сегодня должен выглядеть первый экран вашего сайта

BOOX

Стаж на ФС с 2012 года
Команда форума
Служба безопасности
Private Club
Регистрация
23/1/18
Сообщения
24.942
Репутация
10.975
Реакции
59.251
RUB
50

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

Для начала поясню, что такое первый экран сайта, для тех, кто не знает. Это блок, который сразу виден на вашем устройстве (компьютер, планшет, смартфон) без скроллинга, когда вы открываете сайт.
И это ну прям «маркетинговый фундамент» всего вашего сайта.

webp


Лет 10-15 назад на западе проводились исследования, которые показали, что 7 из 10 человек не листают ниже первого экрана. И понеслось, – «Бизнес Молодость», лендинги, УТП, 4U-заголовки и так далее…

Позднее кто-то сформулировал «Правило 3 секунд». Оно гласит примерно так: «Человек, открывший сайт, в первые 3 секунды решает, остаться на нем и скроллить дальше, или закрыть его».
Именно в этом и кроется важность первого экрана. Именно поэтому я назвал его «маркетинговым фундаментом» сайта. Ведь если первый экран будет совсем плох, то наличие на сайте крутых отзывов, примеров работ, фотографии директора, выгодных акций и скидок – не сильно поможет. Ведь большинство людей будет покидать сайт в первые секунды после открытия.

Так как же удержать человека от закрытия сайта, побудить его остаться и ознакомиться с вашим предложением? Как должен выглядеть первый экран сайта?
На мой взгляд, зависит от контекста. Я выделяю два «случая».

1️⃣ Когда у нас в целом одна конкретная услуга или одно направление. Кухни на заказ. Услуги банкротства. Производство и монтаж пластиковых окон. Строительство домов из СИП-панелей. И т.д., и т.п.

2️⃣ Когда ваша деятельность подразумевает различные услуги. Напр. услуги ковки (мангалы, беседки, лестницы, калитки, ворота). Или монолитные бетонные работы (заливка фундаментов, строительство подпорных стен, бетонных каркасов и т.д.). Услуги типографии (печать широкоформатная, печать визиток, печать фотографий). И у вас все отражено на одной посадочной странице.
В зависимости от каждого случая структура первого экрана будет немного различаться.

Одна услуга / одно направление

Здесь все просто: можно вспомнить советы, фишки, мануалы маркетологов последних лет.

1 – Сначала идет Заголовок, отражающий ваше УТП (уникальное торговое предложение). Или, если у вас почему-то не получается сформировать УТП, – то просто заголовок, обозначающий ваше предложение. Но, для помощи, есть неплохая модель 4U-заголовка:
  • usefulness – полезность;
  • uniqueness – уникальность;
  • ultra-specific – конкретность;
  • urgency – срочность.

Более подробно об этом методе – можете нагуглить, статья не о нем. И, к слову, «срочность» оттуда я бы убрал, – сегодня это будет слишком явная манипуляция. И в целом надо быть осторожнее, – не переборщить, превратив заголовок в какой-то «кликбейт» или подобие заголовка из желтой прессы.

Простыми словами: помещаем в заголовок само наше предложение (что предлагаем), какие-то 1-2-3 весомых преимущества (гарантия 10 лет, без предоплаты и т.п.), обязательно, регион (напр., «в Москве») и, при желании, цену (от 45 000 руб./м2).

Итак, примеры неплохих Заголовков (здесь и далее скриншоты только моих сайтов):

webp

webp

webp


2 – Далее, по желанию, может идти Подзаголовок. Который продолжит или дополнит наше торговое предложение, содержащееся в Заголовке. В подзаголовке должна содержаться чуть менее чем в заголовке, но тоже важная информация для потенциальных клиентов. Но «важная» – это не время работы, например. А все то, что склонит человека продолжить знакомиться с вашим сайтом / компанией / услугами далее. Т.е. двигать взгляд ниже, а не закрыть сайт. Здесь могут располагаться как «преимущества» или «фишки» (Гарантия 10 лет), так и важные уточнения (Работаем по всей РФ).

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

webp

webp


webp


3 – Затем важным элементом первого экрана являются Выгоды («фишки», факты, преимущества). Несколько коротких фактов, по возможности, с цифрами, которые так же дополняют ваше предложение. И которые, желательно, являются весомыми конкурентными преимуществами. Например, «Сроки: от 24 часов», «Работаем без предоплаты», «Бесплатный выезд сегодня», и т.п. Снабжаем их тематическими иконками.

Примеры выгод:

webp

webp

webp


4 – Кнопка. Или две кнопки. Например, одна для заказа консультации, другая для расчета стоимости (открывающая квиз). Кнопки располагаются либо после заголовка/подзаголовка. Либо после выгод.
Все кнопки вы видели на скриншотах выше.

* * *
И… поздравляю. Первый экран готов. Теперь рассмотрим второй случай.

Несколько услуг / направлений на одной странице

Когда на одной странице мы продаем несколько видов услуг или направлений. Это могут быть услуги ковки: от мангалов до ворот и беседок. Это могут быть услуги промышленных альпинистов: мытье окон зданий, покраска фасадов, спил и кронирование деревьев. Или какие-нибудь услуги разнорабочих.
Здесь задача становится чуть сложнее.

1️⃣ – Заголовок. Если у нас несколько направлений/ услуг, то не всегда получится сделать какое-то «убойное» УТП. Если у нас услуги промышленных альпинистов, то мы не можем написать «Покраска фасадов в Москве с гарантией 10+ лет» или «Герметизация швов в Москве и области под ключ от 1 дня». Ведь таким образом мы отсекаем все остальные услуги. И большинство тех, кто хочет вызвать альпинистов, чтобы кронировать дерево, – сразу же закроют сайт.
Поэтому заголовок должен быть обобщающим и, получается, достаточно простым: «Услуги промышленных альпинистов в Москве и области».

2️⃣ – Подзаголовок. Как и в предыдущем случае он по желанию. Но в этот раз его можно использовать не для дополнения заголовка, а для его раскрытия. Т.е. в подзаголовке мы можем перечислить основные услуги или направления, если не сделаем этого в пункте ниже. Например, в случае с альпинистами, после заголовка может идти подзаголовок-перечисление: «Покраска фасадов, мытье окон, герметизация швов, спил и кронирование деревьев». Но, на мой взгляд, перечислить услуги можно ниже, а в подзаголовок поместить выгоды/преимущества. Например: «Профессионалы с опытом 10+ лет с официальным допуском к работе на высоте». Или: «Бесплатный выезд, расчет и смета – сегодня!».

3️⃣ – Услуги/направления. В предыдущем случае третьим пунктом у нас шли Выгоды. Но тут необходимо вспомнить про «правило 3 секунд». Очень важно, чтобы человек в первые секунды увидел то, что он ищет. Если человек ищет услуги покраски фасадов и открывает два сайта, где у одного на первом экране написано «Услуги промышленных альпинистов», а на другом «Покраска фасадов зданий». То на каком он останется, а какой закроет? Статистически, у второго варианта будет гораздо выше конверсия и гораздо меньшее число «отказов».
Поэтому вместо «выгод» я рекомендую перечислить 3-4 основных направления/услуг. (Если, конечно, мы не сделали это в подзаголовке. Тогда здесь можно оставить выгоды.)
Посетитель зайдет на сайт, – и: «Ага, это то, что я ищу».

4️⃣ – Кнопка. Или две кнопки. Здесь аналогично предыдущему случаю. Одна кнопка может открывать форму отправки заявки (заказ звонка, консультации, бесплатного выезда). Другая, например, ведет к выбору услуг («к выбору услуг», «смотреть каталог» и т.п.).
Пара примеров вариантов с несколькими направлениями/услугами.

webp

webp

webp

Пара слов о фоне / визуале первого экрана

Тут ничего особенного. Строите дома? На фоне красивый домик. Рекламируете мед.клинику? На экране улыбающийся врач. Делаете ремонт квартир? На фоне красивый интерьер. Ну или улыбающийся прораб.
В общем и целом, фоны или картинки на первых экранах должны быть «в тему». Либо услуги/товары. Либо люди-специалисты, желательно, с улыбками.

Заключение

Резюмируем.
  • От содержимого первого экрана зависит, будет ли посетитель смотреть сайт дальше или сразу закроет его.
  • Чтобы он сразу его не закрыл, на первом экране необходимо показать человеку именно то, что он ищет.
  • Для того, чтобы заинтересовать человека и побудить его знакомиться с сайтом и компанией дальше, – на первом экране должны быть кратко обозначены реальные выгоды для клиента / ваши конкурентные преимущества.
  • Для самых торопливых или «горячих клиентов» на первом экране должна быть минимум 1 кнопка, чтобы можно было сразу оставить заявку.

 
  • Теги
    оформление сайта первый экран вашего сайта создание сайта
  • Сверху Снизу