Первый экран лендинга

IT-Agency создаёт лендинги с 2009 года. Мы экспериментировали с содержанием и внешним видом промостраниц, наблюдали за изменениями конверсии. В этой статье мы делимся своими представлениями о первом экране лендингов.

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

Чаще всего посетители попадают на лендинги из соцсетей, рассылок по эл. почте или рекламы в поисковых системах.

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

Цели первого экрана

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

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

Основные элементы первого экрана

Давайте посмотрим, какие элементы лендинга отвечают на эти вопросы:

1. Название компании и логотип: представиться посетителю. Подписью можно обозначить суть деятельности компании / сервиса.
2. Меню навигации: сообщить, какую информацию посетитель здесь найдёт. Меню навигации пригодится, если лендинг длиннее трёх экранов.
3. Главный заголовок (и подзаголовок): привлечь внимание и сообщить суть предложения. Важно показать посетителю, что тут он может решить свою задачу.
4. Изображение: привлечь внимание и более полно представить продукт.
5. Набор продающих моментов (УТП — уникальное торговое предложение): показать ценность предложения и объяснить, чем данное предложение выгоднее конкурентных.
6. Целевое действие: показать посетителю, как он может решить свою задачу. Это может быть кнопка (например, «Оформить заказ») или номер телефона.
7. Телефон, онлайн-чат: показать посетителю, что ему помогут и ответят на все вопросы.

Оформление первого экрана

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

Рассмотрим несколько примеров, как первый экран отвечает на вопросы посетителя.

Прототип и оформленная версия первого экрана лендинга «Автоломбард»

Прототип и оформленная версия первого экрана лендинга Ebaytoday

Прототип и оформленная версия первого экрана лендинга «Автозалог»

Прототип и оформленная версия первого экрана лендинга «Юнистальпром» (Юсталь)