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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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