Подпишитесь

И получайте новые статьи блога на Ваш e-mail:

Мы против спама
Нет, спасибо!

Первый экран landing page — 5 работающих вариантов оформления

12 мая 2015
Просмотров: 14 321

pervyj-jekran-landing-page

5 секунд. Что можно успеть за это время? Признаться в любви. Включить свет. Потушить сигарету. Нажать кнопку вызова на мобильном телефоне.

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

Первый экран — как локомотив. Именно он «тянет» за собой все остальные «вагоны» (блоки лендинга) и мотивирует пользователя читать дальше. Или не читать — в зависимости от того, какие элементы там расположены. У вас может быть идеальный landing page, но если вы налажали с первым экраном — скажите «Прощай, конверсия!»

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

Вариант №1

Заголовок + кнопка

Зеленая кнопка Firefox

Зеленая кнопка Firefox

Зеленая кнопка скачать Firefox, заголовок и картинка-­скриншот по центру — как один из жизнеспособных вариантов. Обратите внимание, что в примере нет ничего лишнего. И при этом все работает.

Вариант №2

Заголовок + форма + кнопка

Один из лучших примеров сайта от компании Optimizely

Один из лучших примеров сайта от компании Optimizely

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

Вариант №3

Заголовок + подзаголовок + форма + кнопка

Shop Frank & Oak Today — «Покупайте товары Frank & Oak сегодня

Shop Frank & Oak Today — «Покупайте товары Frank & Oak сегодня

Третий вариант отличается от второго наличием подзаголовка.

Заголовок: Shop Frank & Oak Today — «Покупайте товары Frank & Oak сегодня». В подзаголовке перечислены выгоды от регистрации на сайте.

Вариант №4

Заголовок + подзаголовок + кнопка + триггеры

Заголовок + подзаголовок + кнопка + триггеры

Заголовок + подзаголовок + кнопка + триггеры

Триггеры — это те выгоды, которые получает клиент.

Вариант №5

Заголовок + подзаголовок + кнопка + отзывы

Заголовок + подзаголовок + кнопка + триггеры

Заголовок + подзаголовок + кнопка + триггеры

Отзывы на этой странице — это готовые кейсы. По сути, здесь перечислены выгоды, которые получили пользователи. Например: «Вложил 49 долларов, заработал 1127 долларов».

Теперь вы знаете, как правильно оформлять первый экран посадочной страницы. Самое время применить полученные знания на практике. И сделать экран, к примеру, таким:

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

Что не так в этом примере?

На первый взгляд все правильно, все формальные требования соблюдены.

Но непонятно, что делает этот человек на фото. Кстати, какие предположения, что предлагает эта компания? Да все что угодно! Начиная с планшетов и заканчивая прогнозом погоды.

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

Ладно, раскроем карты:) На самом деле это профессиональная команда верстальщиков, которая предлагает свои услуги. Но понять это не так­-то просто. Поэтому, используя «правильные» элементы лендинга, не нужно уходить от главного — сути вашего предложения.

Получите новые статьи блога на ваш e-mail:

Похожие статьи:

Добавить комментарий (12)

Войти с помощью: 
  1. Николай Прокопов

    Добрый день!
    У нас есть сайт. Хотим для него создать Landing Page для основной продукции.
    Подскажите по какому адресу его лучше разместить:
    1. Как раздел сайта site.ru/landing/
    2. Как поддомен landing.site.ru
    3. Как отдельный сайт landing-site.ru
    И может ли это повлиять на seo-позиции основного сайта?

Наверх