Temp

Первый экран лендинга: почему важен и каким должен быть?

Первый экран лендинга: почему важен и каким должен быть?

Многие посетители лендинга не скроллят его до конца, но точно видят первый экран.

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

Что такое первый экран лендинга и почему так важен

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

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

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

7 из 10 пользователей не листают дальше первого экрана, а покидают сайт сразу. Чтобы такого не происходило, первый экран должен четко отражать ценность предложения.

Около 80% времени на сайте человек изучает первую страницу, а на остальные страницы остается лишь 20% времени. Поэтому суть лучше выносить в начало, то есть на первый экран.

Если время загрузки страницы увеличивается с 1 секунды до 3, вероятность того, что человек уйдет с сайта, становится больше на 32%. Поэтому так важно делать лендинг еще и технически совершенным.

Кстати, средний показатель отказов (когда человек смотрит только одну страницу и сразу уходит с сайта) — 26-70%. Но оптимально стремиться к показателю отказов в 26-40%.

Несколько примеров первых экранов:

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

Три главные задачи первого экрана:

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

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

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

Из каких элементов состоит первый экран

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

Суть продукта. Здесь обозначают название товара или услуги, которым посвящен лендинг. Например, сервис доставки «‎Буду через 10 минут», сеть лесных отелей в Карелии, гостиница для домашних животных «Счастливый ‎Тузик‎».

Если лендинг для нового или малоизвестного продукта, с этим элементом лучше не креативить, а писать как есть. Не «‎чудесное расслабление», а «‎йога-тур на Алтай». Так пользователь сразу поймет, о чем речь, и сможет принять решение о том, читать ли дальше.

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

Кнопка призыва к действию (CTA). Это ключевой элемент, который ведет к целевому действию: подписке, заказу или покупке. Как правило, кнопка встречается на нескольких экранах, а на первом — для «горячей» ЦА, которая уже готова принять решение. Хороший CTA-элемент выделяется на общем фоне, пользователь понимает, что может на нее нажать. Текст на кнопке сформулирован как ответ на вопрос читателя «‎Что я должен сделать, чтобы получить этот продукт?». Обычно это глагол в неопределенной форме: «Записаться», «Забронировать». Иногда текст формулируют от лица читателя: «Хочу на курс».

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

Несколько примеров первых экранов с основными элементами:

pic
pic
pic

Еще на первом экране лендинга могут быть дополнительные элементы:

Преимущества продукта. На первый экран выносят 3–5 красноречивых выгод товара или услуги. Этот элемент обычно используют в B2B, когда не сразу понятно, что из себя представляет продукт. И в конкурентных нишах, чтобы отстроиться от конкурентов — например, в бьюти-сфере.

pic
Сервис проката — тоже конкурентная ниша. Чтобы выделиться, компания на первом экране коротко говорит о своих преимуществах

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

pic
Часто в лендингах жилых комплексов на первом экране размещают фото или видео, которые сразу бросаются в глаза — только потом уже текст

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

pic
Чтобы стать клиентом рекламного агентства, сначала нужно оставить заявку на сайте

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

pic
Разработчик программного обеспечения на первом экране сразу объясняет, что и для кого он делает

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

pic
Салон красоты в меню размещает микротемы, которые могут заинтересовать потенциального клиента

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

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

Каким должен быть первый экран лендинга

1. Ориентирующий. За несколько секунд позволяет понять, где оказался посетитель и чему примерно посвящен сайт.

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

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

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

5. Правдивый. Не кликбейтит, не заманивает заведомо ложными, но яркими формулировками.

6. Цепляющий. Производит впечатление. Очаровывает тем, как визуально необычно показан продукт или как интригующе о нем рассказано. Вызывает желание узнать о продукте больше.

7. Технологичный. Адаптирован для чтения на мобильных устройствах и быстро загружается. В блоге Unisender можно прочитать, как проверить скорость загрузки и адаптивность.

А чтобы увеличить эффективность первого экрана, можно провести A/B-тестирование. То есть создать два варианта лендинга с разными первыми экранами. Например, использовать непохожие по форме офферы — более дерзкий и более сдержанный. И показать одной половине аудитории первый вариант, другой — второй.

Напоследок: неплохие первые экраны для вдохновения

pic
pic
pic
pic
pic
pic
pic
pic
pic