Найти тему

Идеальный первый экран лендинга ч.1

Всем привет! 
С вами идейный борец с говно-лендингами, в миру же 
Дмитрий Нагорный. Хочу затронуть, как я считаю, самый важный блок любого лендинга - первый экран. Именно его видит посетитель, попадая на сайт, и решает будет ли дальше продолжать изучать лендинг или закроет его. Я пройдусь по всем самым важным аспектам первого экрана в деталях и на середину 2018 года это будет исчерпывающее руководство, как он должен выглядеть! Итак, приступим!

Дескриптор и логотип

Из этих двух элементов, которые, как правило, идут в паре, дескриптор важнее. Когда человек впервые попадает на сайт, он задается двумя вопросами 'Где я?' и 'Туда ли я попал?'. То есть переходя, например, по ссылке в контексте, дескриптор должен успокоить посетителя: 'Да чувак, ты кликнул по объявлению о разработке лендингов, и именно этим мы и занимаемся!' Дескриптор - это краткое четко сформулированное описание деятельности компании. Не 'Увеличиваем продажи' или 'Помогаем больше зарабатывать', а 'Создание landing page'. Иногда дескриптор можно дополнить сегментированием, выгодой или уникальным предложением:

  • 'Создание профессиональных landing page'
  • 'Создание landing page под ключ'
  • 'Создание landing page с прибылью 200 000 руб./мес.'

Главное правило: чем больше в дескрипторе конкретики, тем лучше. В идеале не больше 4 слов. Порой дескриптор используют как заголовок, но об этом я расскажу ниже.

Часто вижу лендинги без лого и выглядит они как-то осиротело. Это встречается, как правило, у новосозданного бизнеса 'на коленке'. Логотип придает чуть большей солидности в глазах клиентов, уже не шараш-монтаж, а компания с именем. Бренд, мать его. Не ленитесь и закажите логотип хотя бы за 500 рублей.

Логотип явно не помешал бы.
Логотип явно не помешал бы.

Контакты

Традиционно контакты находятся в правом верхнем углу. Как и любой элемент лендинга, направленный напрямую для получения контактов посетителя, должен присутствовать призыв: 'Звоните!' или 'Звоните прямо сейчас!'.

Стоит указывать время работы организации и идеально, если звонок для клиента будет бесплатным. Тогда об этом нужно указать. И не забываем про форму захвата в виде обратного звонка. В b2b сегментах люди приучены к практике обратного звонка, что не всегда встречается в b2c, поэтому порой будут в тему заигрывания с посетителем а-ля 'Позвоните нам бесплатно!'.

Лично я считаю, нужно оставлять сразу 2 телефона. Городской и мобильный с призывом писать в самые популярные мессенджеры. Обязательно номера должны быть сверстаны - никаких картинок. Это критически важно для мобильной версии сайта, чтобы человек мог нажать на номер и сразу позвонить. Кто только не говорил об этом важном аспекте и все равно часто вижу эту ошибку.

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

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

Картинка первого экрана

Часто на лендингах я вижу отвратительные картинки совершенно не коррелирующие с целевой аудиторией или предлагаемым товаром/услугой. Помощь на дорогах в Перми и фотография Нью-Йорка на фоне. Ремонт японских авто и Мерседес (пусть и без значка на капоте) на фоне. Таких глупостей куча, уверен все видели подобные факапы.

Шедевр говно-лендингостроения.
Шедевр говно-лендингостроения.

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

Хускварна умеют в маркетинг.
Хускварна умеют в маркетинг.

Что же еще можно использовать в качестве фона?

  • Лицо компании. Если в компании есть лицо-бренд, строго ассоциирующееся с компанией, пользующееся лояльностью и доверием у аудитории - это отличный аргумент использовать его на лендингах.
Олег Тиньков как олицетворение успешного предпринимателя на сайте своего банка.
Олег Тиньков как олицетворение успешного предпринимателя на сайте своего банка.
  • Себя как личный бренд. Многие фрилансеры, фотографы и другие ремесленники часто не знают что поставить в качестве картинки на первый экран своего лендинга. Один из хороших способов персонализировать лендинг - показать свое лицо. У человека появляется кредит доверия и лояльность к специалисту, который не играет в анонима.
Лендинг тренера Тимати по боксу, героя 'Дневника хача'.
Лендинг тренера Тимати по боксу, героя 'Дневника хача'.
  • Фото клиента с отзывом. Отличный способ вызвать эмоцию у человека, если отзыв мотивирует на покупку и закрывает возражения, а фотография клиента строго ассоциируется у аудитории с собой.
Стартовая страница всем известной БМ.
Стартовая страница всем известной БМ.
  • Скриншоты. Слайды со скриншотами впечатляющих результатов отлично подойдут для it-проектов или услуг, где порой сложно подобрать картинку на первый экран.
Агентство Амирана Сардарова, занимающееся созданием вирусных видеороликов и каналов на Ютубе под ключ.
Агентство Амирана Сардарова, занимающееся созданием вирусных видеороликов и каналов на Ютубе под ключ.

Форма захвата

Многие считают, что в 2018 году форма захвата на первом экране - это пережиток прошлого. Это мнение появилось из-за многих факторов развития лендингостроения в СНГ. Во-первых улучшение дизайна сайтов. Количество говно-лендингов с таймерами обратного отсчета за последние несколько лет несомненно снизилось. Во-вторых прошел бум на контекстную рекламу. Из-за развития SMM и дороговизны трафика из директов, люди стали больше привлекать холодный и теплый трафик с двухшаговыми продажами, где продажи в лоб работают слабо. Отсюда пошло поверие, что открытая форма захвата на первом экране анахронизм. Да, когда человек стоит на низкой ступени узнавания своей проблемы, пытаться ему сразу что-то продать глупо и отказаться от сбора контактов на первом экране имеет смысл, но если человек теплый или горячий - сбор данных необходим. Если не нравится открытая форма - спрячь ее в кнопку. Главное нужно всегда помнить: с первого экрана покупают - это факт!

Проводя постанализ одностраничников сделанных под горячую и теплую аудиторию, я заметил, что заполнение формы на первом экране происходит в 85% в случае второго и более посещения сайта. То есть человек изучил твой ленд, конкурентов и решил выбрать тебя. Он заходит на твой лендинг и сразу оставляет заявку на первом экране. Не усложняй этим людям жизнь, пусть он сможет связаться с тобой без утомительного поиска поля ввода телефона.

Правила оформления форм захвата

Сколько уже было сказано, что не нужно превращать форму захвата в анкету, но все равно часто вижу лендинги, где (иногда даже обязательно) требуют заполнить 3-4 поля. Я советую оставить лишь одно самое необходимое поле в твоей нише. Как правило это номер телефона. Считаю, что поле с вводом имени не нужно! Люди любят анонимность, дай им ее в максимальном объеме. Имя легко узнать уже во время телефонного разговора.

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

Если ниша и возраст целевой аудитории позволяет, можно делать альтернативу или дополнение к сбору номера телефона - id страницы в соц. сетях. Отличное решение в эпоху стремительного развития SMM.

В поле ввода номера телефона так же есть свои нюансы:

  • Делай призыв оставить номер либо над формой небольшим шрифтом, либо серыми полупрозрачными буквами в самой форме. Это действительно повышает конверсию в заявку!
  • Никогда не делай строгий шаблон ввода номера телефона. Поставив маску номера +7... ты можешь отсечь клиентов из других стран, если твой бизнес не привязан к одной стране. Так же часто эти шаблоны некорректно отображаются в браузерах. На практике было замечено, как в некоторых нишах люди оставляют сразу две заявки с разными номерами телефонов. Дай возможность человеку вписать номер телефона, поставить запятую и написать еще один в том же поле.
  • Если призыв оставить номер над полем, то я советую в самом поле серым полупрозрачным шрифтом вписать твой контактный номер, который будет исчезать при нажатии, что бы человек вписал свой телефон.
  • Так же если ЦА "тугодумы", стоить уточнять зачем нужно вписать свой номер. Человек должен понимать каждый свой шаг, зачем от него требуют контактные данные.

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

Для увеличения внимания пользователя к форме можно использовать стрелочку или взгляд человека, направленный на нее. Это невербально побуждает человека заполнить поля.

Часто под кнопкой отправки приписывают намозоленную фразу о том, что контактные данные не будут переданы третьим лицам. Считаю, что на данный момент актуальнее писать информацию о том, на сколько быстро мы вам перезвоним в минутах или секундах. Неплохой аналог CallBackHunter'у. Кстати о нем чуть позже. Еще неплохой уловкой будет указать человеку, что оставление заявки не обязывает к покупке. Это помогает снизить стресс человека из-за скорого расставания со своими деньгами.

И самое важное, всегда в каждой форме должен быть CTA (call to action) - призыв к действию. Призыв состоит из трех составляющих: глагол в повелительном наклонении, выгода, которую получит человек за предоставленные контактные данные, и дедлайн. Эти три компонента можно варьировать.

Самые распространенные модели:

1) Глагол + дедлайн + выгода

  • Оставь видео-отзыв сейчас и получи настройку Яндекс Директ бесплатно!
  • Купи сегодня, заплати потом.
  • Оставьте заявку до 14:00 и ваш новый галстук будет доставлен уже сегодня!

2) Глагол + дедлайн

  • Отправь сейчас.
  • Скачай прямо сейчас!
  • Прими участие уже сегодня!

3) Глагол + выгода

  • Запишись на пробный бесплатный урок.
  • Позвони и получи ответ на интересующий вопрос от специалиста за 5 минут!
  • Скачай каталог эксклюзивных туров.

При этом распространенная ошибка, когда кнопка отправки не коррелирует с CTA. То есть если в заголовке призывают "Забронируйте...", следовательно кнопка "Забронировать", если "Примите участие", значит кнопка "Принять участие" и тд.

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

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

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

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

Читал интересную историю, как одна компания подняла продажи, поставив счетчик увеличения цены с каждой неделей, и когда человек в результате e-mail подписки осознавал потребность в их товаре через пару недель, он регистрировался с новой почты под видом нового клиента и покупал по стартовой цене, искренне считая, что перехитрил систему. Главное не лениться и тогда даже старые механики, вышедшие из моды, могут дать ощутимый результат.

Триггеры

Иногда на первом экране используют триггеры - выгоды клиента, оформленные визуально. Основная ошибка, которую я замечаю, - люди путают выгоды клиента с преимуществами компании. В этом случае нарушается правило ВЫ-ориентированности.

Разбирающиеся люди, основываясь на психологии человека, рекомендуют выставлять на первом экране не больше 4 триггеров. Я советую использовать 3, хотя многие умудряются запихнуть чем больше, тем лучше - это в корне неверно. Пять и более триггеров перегружают первый экран и рассеивают внимание посетителя.

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

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

К сожалению тема настолько обширная, что даже размера wiki-страницы не хватило, что бы уместить всю информацию, которую я хотел донести!

Самому вкусному - заголовкам и общим правилам оформления первого экрана я выделю отдельную статью, где так же подробно с примерами опишу все, что вы должны знать в 2018 году!

-9

Если тебе понравилась статья — раздави кнопку одобрения:)

Можешь еще подписаться на канал. Здесь рассказывают, как делать крутые лендосы.