Всё, что нужно знать о главном экране лендинга

Главный экран — это самое первое, что видит пользователь при переходе на лендинг. Есть лишь 2-5 секунд, чтобы заякорить его внимание, и потенциальный клиент успел понять, что ваш сайт — это то, что он искал. Нужно сразу замотивировать человека просматривать ваш ресурс дальше, а в идеале — оставить заявку уже на первом экране.

Вот вам для примера два первых экрана разных сайтов:

Какое впечатление у вас сложилось после просмотра этих изображений? Какой первый экран вызвал желание посмотреть, что там дальше? А может быть вы даже захотели оставить заявку на каком-то сайте из приведённых примеров?

Пусть эти вопросы пока что останутся риторическими. Я вернусь к ним в конце публикации. Скажу лишь сразу, что одна картинка — пример хорошего первого экрана, другая — плохого.

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

Идеальная структура первого экрана лендинга

Правильная, с точки зрения маркетинга, структура первого блока Landing Page должна состоять из следующих элементов: 

• логотип; 
• меню; 
• контакты; 
• правильный заголовок; 
• основные тезисы/выгоды; 
• призыв к действию; 
• кнопка.

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

Шапка

В самом верху главного экрана размещается логотип (название) компании, меню, позволяющее перемещаться по основным разделам одностраничника (выгоды, о нас, условия сотрудничества и т.д.) и контакты.

Размещение меню с гиперссылками на главной странице — спорный вопрос. Они могут сбивать конверсионный момент: пользователь начнёт кликать по ссылкам и не изучит информацию главного экрана. Принимать решение о необходимости меню следует только по результатам тестирования различных вариантов (с ним/без).

Среди контактов указывается не только телефон, но и значки основных мессенджеров: WhatsApp, Telegram, Viber, а также адрес электронной почты. Чем больше точек входа в отдел продаж, тем лучше!

Логотип и контакты — обязательные элементы. Пользователь должен знать, с кем он имеет дело. Это мост к взаимному доверию.

Понятный, релевантный заголовок с выгодой

Главный заголовок — это самый первый основной заголовок, который видит потенциальный клиент, когда попадает на лендинг. Его задачи:

• должен привлекать внимание, «бросаться в глаза»;
• должен давать человеку понимание о том, чем вы занимаетесь;
• должен рассказать об основной выгоде, которую получит клиент.

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

Эффективность использования того или иного метода для создания заголовка проверяется только практикой. Нельзя заранее предугадать, что именно «выстрелит» в вашей нише. Создание хорошего заголовка — это не разовое действие, а процесс. Он включает в себя постоянную комплексную работу над сервисом, продуктом и т.п.

Читайте о том, как написать продающий текст для сайта, в нашей статье.

Призыв к действию

Призыв к действию (он же call to action, CTA) — это то, что призывает человека к следующему шагу после прочтения вашего продающего заголовка. Призывать нужно к лёгкому действию. Не надо просить человека сразу купить ваш товар или заказать услугу.

Сложное действие — то, что повлечёт финансовые затраты. Лёгкое действие направлено на сбор контактных данных потенциальных клиентов: «оставьте заявку на расчёт стоимости», «получите бесплатный аудит бизнеса», «зарегистрируйтесь на бесплатный вебинар» и т.п.

Такая рекомендация связана с тем, что посетитель только зашёл на сайт. Он ещё вас не знает и не проникся доверием. Представьте, что вы только что познакомились со своим бизнес-партнёром и сразу же суёте ему под нос счёт. Как минимум, у него возникнет недоумение.

Форма для сбора заявок + кнопка

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

1. Форма должна быть с лёгким входом. Это значит, что для человека не составит труда её заполнить (легко и морально, и физически). Оптимально — попросить номер телефона, адрес электронной почты.
2. Форма и кнопка должны быть релевантны CTA. Это значит, что кнопка совпадает с текстом призыва. Например, если вы призываете зарегистрироваться на вебинар, то форма может просить адрес почты для отправки ссылки на занятие и содержать кнопку с надписью «Зарегистрироваться». Если вы предлагаете получить бесплатный аудит, соответственно, размещаете форму для номера телефона и кнопку «Получить бесплатный аудит».
3. Если вы собираете какие-то данные пользователей, не забудьте разместить надпись о согласии с политикой на обработку персональных данных.

Можно разместить только кнопку, при нажатии на которую откроется форма для внесения дополнительных данных клиента. Главное не превращать форму в анкету. Пользователь ещё не подогрет к покупке вашей продукции, потому вряд ли захочет тратить своё время на заполнение опросника.

Структурно данный элемент главного экрана лендинга нужно расположить рядом с call to action.

Основные тезисы/выгоды

Это факультативный (необязательный) элемент главного экрана лендинга. С помощью него вы сможете «добить» потенциального клиента: больше заинтересовать, заставить доверять и т.п. 

Этот блок призван раскрыть выгоду, которая указана в заголовке, или рассказать о некоторых преимуществах сотрудничества с вами. Всего 3-4 кратких и чётких тезиса, которые, как правило, располагаются в виде маркированного списка.

Например, ваш заголовок: «Делаем сайты, которые окупятся, или вернём деньги». Далее вы можете указать ещё несколько выгод:

• создаём всё «под ключ», все доработки за наш счёт;
• разработка сайта занимает не более 3-х дней;
• над разработкой продукта будет работать специалист с опытом более 10 лет.

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

Дизайн

Содержание главного экрана важно, но не стоит забывать и про его внешний вид. Если пользователю не понравится «картинка», он не будет ничего читать, а просто пойдёт искать что-то более приятное.

Об общих рекомендациях по дизайну сайта у нас есть отдельная статья. Здесь же сконцентрируемся на особенностях визуального оформления главного экрана одностраничного веб-ресурса.

1. Оформление главного экрана должно быть простым и лаконичным. Не нужно придумывать какие-то суперинтересные штуки, затмевающие форму сбора заявок и отвлекающие потенциального клиента от целевого действия. Избегайте миллиона картинок, иконок и бесполезных элементов.
2. Должна быть структура. Не надо скидывать все элементы первого экрана «в навозную кучу». Они хоть и должны составлять единую композицию, но при этом каждый элемент должен прослеживаться.
3. Структура блока должна быть интуитивно понятной. В идеале с вашим сайтом должен легко разобраться как маленький ребёнок, так и престарелая леди.

Человек читает информацию в форме буквы «F», слева направо. Логично, что справа вы разместите блок тезисов, краткое видео, а слева — CTА и кнопку.

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

Нужно постараться не использовать чужие фото и видео (из поисковой системы, стоков и т.д.). Пользователь сразу это заметит. Картинка должна быть уникальной и интересной.

Если нет возможности самостоятельно подготовить фото, можно искать изображения на платных и бесплатных стоках. Однако стоит выбирать те, которые находятся подальше от первой страницы, выданной поиском. Так вероятность выбрать «заезженную» картинку уменьшается.

5. Расставьте акценты на главном. С помощью шрифтов и цвета «подсветите» кнопку, главную боль клиента и всё то, что зацепит посетителя, заинтересует и не даст уйти. 
6. Если вы используете изображение в качестве подложки, тщательно следите за его сочетанием с текстом. Текст не должен закрывать важные части изображения. Также вся информация должна легко читаться несмотря на то, что она размещена на картинке.

Дополнительные рекомендации к повышению конверсии лендинга с помощью главного экрана

Итак, мы поговорили о смысле и содержании первого блока лендинга, поговорили о его внешнем виде. Если вы сделаете всё так, как я посоветовал, то вы уже добьётесь немалых успехов в получении заявок с вашего одностраничника. Но, разумеется, нет предела совершенству, можно сделать ещё круче! Рассказываю как.

1. Я уже вскользь об этом говорил, но акцентирую ещё раз. Создание продающего Landing Page — это процесс. Нужно постоянно искать что-то новое, пробовать различные варианты заголовков, картинок, призывов и т.д. Потому постоянно тестируйте и ищите лучшие для себя варианты.
2. Используйте специальные виджеты. Всё для удобства клиента. Например, рядом с контактами поместите виджет обратного звонка. Он позволит пользователю получить звонок в течение короткого промежутка времени. Или, к примеру, можно вставить кнопку онлайн-чата где-нибудь сбоку. Написав в окно поддержки, пользователь сразу же выйдет на связь со специалистом вашего отдела продаж.

3. Мультилендинг. Этот инструмент позволяет менять сайт в соответствии с конкретным запросом клиента. Например, человек вводит в Яндекс запрос «купить жёлтые шторы». Он переходит по ссылке на ваш сайт и видит предложение о жёлтых шторах. Если же покупатель будет искать красные шторы, то, благодаря мультилендингу он увидит на вашем Landing Page предложение о покупке красных штор. Более подробно о мультилендинге вы можете узнать в нашей статье, посвящённой этому вопросу.

Очень важное замечание! Никому не нужен будет ваш классный, продающий лендинг с его идеальной главной страницей, если с технической стороны сайт «фуфло». Не забывайте уделять внимание вёрстке сайта. Во-первых, он должен быть адаптирован под различные операционные системы и габариты экранов электронных девайсов. Во-вторых, все элементы (особенно картинки) не должны весить 100500 гигабайт. Сайт должен легко загружаться даже у пользователя с плохим Интернетом.

ТОП-5 ошибок при создании первого экрана 

1. Отсутствие чёткого заголовка. Заголовок — это тот крючок, который заставляет пользователя изучать вашу онлайн-страницу дальше. Как в рыбалке, рыба не поймается без крючка, так и в лендинге пользователь вряд ли «клюнет» на ваше предложение без понимания того, зачем это ему нужно (от какой «боли» он сможет избавиться).
2. Перегруженный первый экран. Пихать на главный экран и отзывы, и выгоды, и информацию о компании, и всё, что есть — плохая идея. Это отстраняет внимание человека от главного и не даёт ему искренне заинтересоваться.
3. Сложное действие. Нельзя писать человеку в лоб с первой секунды «КУПИ ТОВАР». Он сразу подумает: «С чего это вдруг? Вы вообще кто такие?». Задачи главного экрана: подогреть интерес и собрать контактные данные с посетителей.
4. Плохое изображение. Большинство людей — визуалы. Им не нужно читать, какой сочный стейк они могут съесть, им достаточно его увидеть. Любая картинка, используемая на сайте, должна быть качественной, уникальной и интересной.
5. Отсутствие акцентов. Когда человек приходит на сайт, он не хочет сидеть и разбираться, куда нажать, что ему предлагают и т.д. Он хочет прийти, быстренько оценить и принять какое-то решение. Без акцентов «быстренько» не получится. Так клиентов и теряют.

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

Произведите впечатление на своего потенциального клиента с первой минуты. Уделите должное время главному экрану своего лендинга!