5 секунд. Что можно успеть за это время? Признаться в любви. Включить свет. Потушить сигарету. Нажать кнопку вызова на мобильном телефоне.
По статистике, в течение 3-5 секунд интернет-пользователь принимает решение, остаться на сайте или нажать на крестик в правом верхнем углу. Вот почему конверсия landing page напрямую зависит от оформления первого экрана — той части посадочной страницы, которую посетитель видит без прокрутки.
Первый экран — как локомотив. Именно он «тянет» за собой все остальные «вагоны» (блоки лендинга) и мотивирует пользователя читать дальше. Или не читать — в зависимости от того, какие элементы там расположены. У вас может быть идеальный landing page, но если вы налажали с первым экраном — скажите «Прощай, конверсия!»
По результатам тестов 270 посадочных страниц мы отобрали 5 работающих вариантов расположения элементов первого экрана. Для наглядности эти схемы показаны на примерах лендингов крупных компаний.
Вариант №1
Заголовок + кнопка
Зеленая кнопка Firefox
Зеленая кнопка скачать Firefox, заголовок и картинка-скриншот по центру — как один из жизнеспособных вариантов. Обратите внимание, что в примере нет ничего лишнего. И при этом все работает.
Вариант №2
Заголовок + форма + кнопка
Один из лучших примеров сайта от компании Optimizely
На картинке изображен один из лучших примеров сайта от компании Optimizely, и ему даже не нужен подзаголовок. С помощью градиента и фона внимание пользователя концентрируется на строке для ввода электронного адреса.
Вариант №3
Заголовок + подзаголовок + форма + кнопка
Shop Frank & Oak Today — «Покупайте товары Frank & Oak сегодня
Третий вариант отличается от второго наличием подзаголовка.
Заголовок: Shop Frank & Oak Today — «Покупайте товары Frank & Oak сегодня». В подзаголовке перечислены выгоды от регистрации на сайте.
Вариант №4
Заголовок + подзаголовок + кнопка + триггеры
Заголовок + подзаголовок + кнопка + триггеры
Триггеры — это те выгоды, которые получает клиент.
Вариант №5
Заголовок + подзаголовок + кнопка + отзывы
Заголовок + подзаголовок + кнопка + триггеры
Отзывы на этой странице — это готовые кейсы. По сути, здесь перечислены выгоды, которые получили пользователи. Например: «Вложил 49 долларов, заработал 1127 долларов».
Теперь вы знаете, как правильно оформлять первый экран посадочной страницы. Самое время применить полученные знания на практике. И сделать экран, к примеру, таким:
Что не так в этом примере?
На первый взгляд все правильно, все формальные требования соблюдены.
Но непонятно, что делает этот человек на фото. Кстати, какие предположения, что предлагает эта компания? Да все что угодно! Начиная с планшетов и заканчивая прогнозом погоды.
Как можно трактовать картинку без подписи? Приложения и облака, которые вылетают из планшета, не дают пользователю сосредоточиться на главном. А главное здесь — призыв к действию внизу экрана, его практически не видно, он не несет смысловой нагрузки.
Ладно, раскроем карты:) На самом деле это профессиональная команда верстальщиков, которая предлагает свои услуги. Но понять это не так-то просто. Поэтому, используя «правильные» элементы лендинга, не нужно уходить от главного — сути вашего предложения.
Интересно, но работает ли в России?
Добрый день!
У нас есть сайт. Хотим для него создать Landing Page для основной продукции.
Подскажите по какому адресу его лучше разместить:
1. Как раздел сайта site.ru/landing/
2. Как поддомен landing.site.ru
3. Как отдельный сайт landing-site.ru
И может ли это повлиять на seo-позиции основного сайта?
Если вы продвигает свой сайт в SEO то делайте на поддомене либо отдельным сайтом. За поддомен платить не надо если у вас нормальный хостинг, за отдельный домен придется платить.
Спасибо за информацию! А что скажет насчет использования, например, реальных фото менеджеров с подзаголовком, призывом к действию и кнопкой?
Любые качественные реальные фото только в плюс
Какая-то бесполезная статья. Ребят, лучше покажите реально работающие сайт допустим в би ту би нише где первый экран показывает хорошую конверсию. Причем тут мазила вообще..)
А где картинки?
Картинки вернулись!
Ссылки на примеры заголовок битые — 404
Спасибо за вашу внимательность, картинки восстановили.
Не видно картинок
Спасибо за вашу внимательность, картинки восстановили.
Спасибо за ваши статьи! Очень выразительно, ёмко и информативно!))
Мы счастливы! Спасибо, Светлана, это все из-за вас!