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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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