Обсудить проект

Как за три секунды заинтересовать посетителя лендинга?

  • Юзабилити и дизайн
  • 29 октября 2019
  • 5508
  • 13 минут

Представьте ситуацию: вы что-то ищете в интернете и открываете сразу несколько вкладок браузера. Бегло просматривая каждую из них, вы определяете, какая заслуживает внимания. Согласно исследованиям Nielsen Norman Group, около 80% времени визита посетители тратят на изучение первого экрана и только 20% на остальные блоки. Это значит, что судьба трафика решается в первые секунды, обычно три–шесть. 

Каким должен быть первый экран в 2025 году, чтобы пользователи остались на лендинге или сайте, расскажем в статье.

Ключевые элементы первого экрана 

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

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

  1. Что это за сайт?
  2. Что здесь есть полезного или интересного?
  3. Что здесь можно сделать?

Ответить на вопросы можно с помощью ключевых элементов первого экрана:

  • названия и логотипа,
  • меню,
  • контактов,
  • оффера,
  • изображения,
  • целевого действия.

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

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

Логотип должен быть простым и легко запоминаться. Если из логотипа не ясно, чем вы занимаетесь, добавьте поясняющую подпись. Достаточно пары слов. Например, укажите город или основную специализацию бизнеса. 

Вот примеры названий и логотипов с пояснениями.

Подпись в 2–6 словах должна отвечать на вопросы:

  • Кто вы?
  • Что делаете?
  • Для кого?
  • Где?

Совет

Сделайте подпись уникальной. Дополните ее преимуществом, например, укажите срок доставки или расскажите о том, что даете гарантию на товар. Вместо «Доставляем пиццу по Иркутску» можно написать «Доставляем пиццу по Иркутску за 60 минут». 

Меню в лендинге — это краткое содержание сайта с активными ссылками, которые упрощают поиск нужного блока лендинга.

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

Основные правила:

  1. Чтобы не перегружать меню и не отвлекать посетителя от оффера, делайте не более семи коротких пунктов. Дело в том, что человек о может воспринимать не более семи—девяти объектов одновременно.
  2. Выделяйте важные разделы акцентным цветом.

Простота и удобство в меню превыше всего. Его задача — помогать пользователю быстро находить нужное.

Совет

Выносите в меню только те разделы, которые нужны пользователю в первую очередь: «Каталог» , «Доставка»,  «Оплата», « Гарантия», «Контакты», и, конечно «Акции». Все остальные разделы сайта можно показать в футере.

Контакты

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

Предусмотрите разнообразные каналы общения, чтобы пользователь мог выбрать удобный

  1. Номер телефона. Он обязательно должен быть кликабельным на мобильных устройствах.
  2. Интернет-мессенджеры: WhatsApp, Telegram и т. п.
  3. Кнопка заказа обратного звонка.

Обычно, телефон и кнопку для заказа звонка размещают в «шапке» сайта (header), там же можно встретить кнопки мессенджеров.

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

В следующем примере как раз есть все варианты для связи в шапке и даже форма с предложением рассчитать стоимость заказа на первом экране сайта.

Совет:

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

Как доработка сайта помогла снизить стоимость лида в 3 раза

Читать кейс

Оффер

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

Оффер обязательно должен быть на первом экране, иначе для чего тогда вообще нужен сайт?

Грамотно составленный оффер демонстрирует все выгоды и мотивирует совершить целевое действие. Задача компании — ярко подчеркнуть пользу и преимущества сотрудничества. 

О том, как как составить полезный оффер, есть отдельная статья в блоге, я остановлюсь на двух его обязательных элементах: заголовке и подзаголовке.

Заголовок — основной месседж, который должен бросаться в глаза и коротко описать главное преимущество.

Хороший заголовок должен:

  • отвечать на вопросы потенциального покупателя,

  • быть ёмким и понятным,

  • бросаться в глаза,

  • показывать самые сильные стороны продукта,

  • вызывать эмоции,

  • содержать конкретные цифры,

  • занимать не более двух строк,

  • быть читабельным и контрастным.

Подзаголовок — фраза, которая детализирует и объясняет заголовок, описывает подробности и выгоды предложения. Если заголовок отвечает на вопрос «Что я получу?», то подзаголовок поясняет, как именно, на каких условиях. Как правило, подзаголовок состоит из 8–12 слов.

Составить продающий оффер можно, например, с помощью метода 4U:

  • Usefulness (Полезность) — что получит покупатель, если совершит целевое действие;

  • Urgency (Срочность или Актуальность) — как быстро покупатель решит свою проблему;

  • Uniqueness (Уникальность) — ваше предложение не должно быть похоже на предложения конкурентов;

  • Ultra-specificity (Ультра-специфичность) — как вы решите проблему клиента.

3 самых эффективных связки «заголовок+подзаголовок»

Дмитрий Кот в своей книге «Конструктор продающего текста» выделяет следующие эффективные связки «заголовок+подзаголовок»:

1. В заголовке сообщается ключевая выгода, а в подзаголовке она уточняется.

Заголовок: Качественно облицуем ваш дом сайдингом «под ключ»

Подзаголовок: С соблюдением сроков и фиксации стоимости работ в договоре. Окончательный расчёт только после сдачи объекта!

2. В заголовок выносится выгода, а в подзаголовке указывается целевая аудитория.

Заголовок: 95% наших учеников сдают кембриджский экзамен с первого раза!

Подзаголовок: Эффективные курсы английского языка для школьников старших классов

3. В заголовке даём интригу, а в подзаголовке усиливаем её.

Заголовок: Хотите получать больше клиентов в свой бизнес уже через две недели?

Подзаголовок: Авторская методика. Работает, даже с нулевыми вложениями!

Совет

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

Изображение

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

Правильная картинка для первого экрана:

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

Старайтесь не использовать картинки с фотостоков (они не вызывают доверия). Лучше инвестировать в качественные снимки собственного производства.


Иногда статичное изображение не справляется с задачей. Тогда на помощь приходит видео. Оно способно демонстрировать продукт или услугу в динамике, создавать иллюзию живого контакта с клиентом, создавать атмосферу.

Чтобы видео работало на бизнес и продукт, соблюдайте несколько правил:

  1. Длина ролика — 5–10 секунд. Все, что дольше, теряет силу воздействия.
  2. Видео должно повторяться. Поставьте режим бесконечной автоматической прокрутки, чтобы зритель видел рекламу повторно.
  3. Без звука по умолчанию. Посетители лендинга часто находятся в публичных местах и предпочитают избегать шума.
  4. Не перегружайте страницу. Выбирайте качественный видеоконтент, но не заставляйте сайт долго загружаться.
  5. Текст оффера на видео должен легко читаться. Для этого можно немного затемнить фон видео.

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

Совет

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

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

Лендинг для маркетолога №1: как мы сделали сайт-визитку Игорю Манну

Читать кейс

Лицо компании

Целевое действие

На первом экране нужна кнопка, ведь мы удерживаем пользователя на сайте ради целевого действия. Значит, последний штрих успешного лендинга — четкий и яркий призыв к действию (CTA). 

Правильная CTA-кнопка становится мостиком между интересом пользователя и выполнением желаемого действия.

Основы эффективной кнопки целевого действия на первом экране лендинга

Главная задача кнопки — вызвать желание немедленно действовать: оставить заявку, заказать звонок, купить товар. 

Кнопка целевого действия должна быть:

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

Совет

Обратите внимание на качества, которые повышают эффективность CTA-кнопок:

  1. Минимализм: Не загромождайте экран лишними элементами вокруг кнопки. Задача дизайна обратить внимание на кнопку, а не отвлечь.
  2. Размер и расположение: Старайтесь размещать кнопку так, чтобы она находилась на уровне глаз пользователя. Большие размеры делают кнопку видимой, но чрезмерно крупные формы утомляют взгляд.
  3. Одна кнопка на первом экране: если у пользователя есть выбор между несколькими действиями, он может запутаться, устать, потерять интерес и ничего не нажать. Одна кнопка снижает путаницу и направляет человека к нужному действию.

Короче

У вас есть 3–6 секунд, чтобы заинтересовать пользователя, который к вам зашел. Для этого грамотно оформите первый экран лендинга:

  1. На первом экране обязательно должны быть: логотип и название компании, меню и контакты, оффер, изображение и целевое действие.
  2. Логотип должен быть простым и легко запоминающимся. Рядом с логотипом добавьте поясняющую подпись.
  3. Если на лендинге больше четырех экранов, сделайте меню (не более семи коротких пунктов).
  4. В первый экран добавьте контакты.
  5. Составьте оффер по методу 4U. Используйте связку: заголовок, цепляющий внимание + подзаголовок, который раскрывает выгоды для клиента.
  6. Подкрепите оффер изображением или видео. Покажите товар, процесс оказания услуги или «лицо компании».
  7. Добавьте на первый экран кнопку, чтобы пользователь сразу же мог совершить целевое действие.

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

Максим Абдрахманов
Елена Старостина
ROI-маркетолог

Обсуди с другими
Обсудить проект
Выберите услугу,
впишите имя и телефон, нажмите кнопку
Нужна консультанция Экспресс-аудит Реклама Аналитика Анализ конкурентов Стратегия ROI-маркетинг SMM Блог Сайт Другое