Дизайн и первый экран лендинга

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

Что разместить на первом экране

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

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

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

На этом примере фотография и оффер точно отражают продукт и показывают, какой аудитории адресовано предложение (родители с маленькими детьми). Дополнительно отмечены 3 главных преимущества. Яркая CTA выделяется на фоне и призывает совершить целевое действие. Из ключевых элементов нет только кнопки меню, потому что задача страницы – сразу побудить к действию.

Как создать хороший оффер

Правильно составленное УТП определяет эффективность страницы. Оффер для landing page должен быть сжатым, поскольку первый экран нельзя перенасыщать информацией. Он может состоять из трёх частей:

• заголовок;
• подзаголовок;
• описание (с призывом к действию).

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

Формулировка должна демонстрировать полезность целевого действия и отражать уникальность продукта. Усилить призыв можно за счёт острой актуальности или ограниченности оффера.

Здесь оффер строится на уникальности товара, которая подчёркивается изображением, а в описании используется главное преимущество – скорость доставки. Призыв к действию размещается на кнопке.

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

Универсального рецепта для содержания лендингов (landing page) до линии сгиба нет – контент зависит от ниши. Определить базовую логику наполнения могут помочь сайты конкурентов. Посмотрите на главных представителей бизнес-сферы, которые тратят большие бюджеты на маркетинг. Не стоит копировать их офферы, но обратить внимание на ключевые элементы первого экрана можно.

Проанализируйте поисковые запросы – они помогают написать в заголовке именно то, что ищет целевая аудитория, а значит страница будет точно попадать в потребность потенциальных клиентов. Прорабатывая наполнение, держите в голове конверсионную цель лендинга (landing page) – на ней должно концентрироваться всё содержание.

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

Проверить эффективность дизайна можно с помощью пятисекундного теста. Суть исследования заключается в том, что у пользователя есть 5 секунд для изучения первого экрана. После этого ему задаётся перечень коротких вопросов, по которым можно выявить, понятно ли назначение сайта, какой предлагается продукт, как называется компания, какие эмоции вызывает страница.

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