Первый экран landing page — 5 работающих вариантов оформления
Антон Петроченков
12.05.2015
25 647
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 то делайте на поддомене либо отдельным сайтом. За поддомен платить не надо если у вас нормальный хостинг, за отдельный домен придется платить.
Какая-то бесполезная статья. Ребят, лучше покажите реально работающие сайт допустим в би ту би нише где первый экран показывает хорошую конверсию. Причем тут мазила вообще..)
Этот веб-сайт использует файлы cookie, чтобы улучшить вашу работу во время навигации по веб-сайту. Из них файлы cookie, которые классифицируются как необходимые, хранятся в вашем браузере, поскольку они необходимы для работы основных функций веб-сайта. Мы также используем сторонние файлы cookie, которые помогают нам анализировать и понимать, как вы используете этот веб-сайт. Эти файлы cookie будут храниться в вашем браузере только с вашего согласия. У вас также есть возможность отказаться от этих файлов cookie. Но отказ от некоторых из этих файлов cookie может повлиять на ваш опыт просмотра.
Необходимые файлы cookie абсолютно необходимы для правильной работы веб-сайта. Эти файлы cookie анонимно обеспечивают основные функции и функции безопасности веб-сайта.
Cookie
Duration
Description
cookielawinfo-checkbox-analytics
11 months
Этот файл cookie устанавливается подключаемым модулем GDPR Cookie Consent. Файл cookie используется для хранения согласия пользователя на использование файлов cookie в категории «Аналитика».
cookielawinfo-checkbox-functional
11 months
Cookie-файл устанавливается в соответствии с GDPR, чтобы записать согласие пользователя на использование cookie-файлов в категории «Функциональные».
cookielawinfo-checkbox-necessary
11 months
Этот файл cookie устанавливается подключаемым модулем GDPR Cookie Consent. Файлы cookie используются для хранения согласия пользователя на файлы cookie в категории «Необходимые».
cookielawinfo-checkbox-others
11 months
Этот файл cookie устанавливается подключаемым модулем GDPR Cookie Consent. Файл cookie используется для хранения согласия пользователя на использование файлов cookie в категории «Другое».
cookielawinfo-checkbox-performance
11 months
Этот файл cookie устанавливается подключаемым модулем GDPR Cookie Consent. Файл cookie используется для хранения согласия пользователя на использование файлов cookie в категории «Производительность».
viewed_cookie_policy
11 months
Файл cookie устанавливается подключаемым модулем GDPR Cookie Consent и используется для хранения информации о том, согласился ли пользователь на использование файлов cookie. Он не хранит никаких личных данных.
Функциональные файлы cookie помогают выполнять определенные функции, такие как совместное использование содержимого веб-сайта в социальных сетях, сбор отзывов и другие сторонние функции.
Файлы cookie производительности используются для понимания и анализа ключевых показателей производительности веб-сайта, что помогает улучшить пользовательский интерфейс для посетителей.
Аналитические файлы cookie используются для понимания того, как посетители взаимодействуют с веб-сайтом. Эти файлы cookie помогают предоставить информацию о таких показателях, как количество посетителей, показатель отказов, источник трафика и т.д.
Рекламные файлы cookie используются для предоставления посетителям релевантной рекламы и маркетинговых кампаний. Эти файлы cookie отслеживают посетителей на веб-сайтах и собирают информацию для предоставления персонализированной рекламы.
Комментарии
Интересно, но работает ли в России?
Добрый день!
У нас есть сайт. Хотим для него создать Landing Page для основной продукции.
Подскажите по какому адресу его лучше разместить:
1. Как раздел сайта site.ru/landing/
2. Как поддомен landing.site.ru
3. Как отдельный сайт landing-site.ru
И может ли это повлиять на seo-позиции основного сайта?
Если вы продвигает свой сайт в SEO то делайте на поддомене либо отдельным сайтом. За поддомен платить не надо если у вас нормальный хостинг, за отдельный домен придется платить.
Спасибо за информацию! А что скажет насчет использования, например, реальных фото менеджеров с подзаголовком, призывом к действию и кнопкой?
Любые качественные реальные фото только в плюс
Какая-то бесполезная статья. Ребят, лучше покажите реально работающие сайт допустим в би ту би нише где первый экран показывает хорошую конверсию. Причем тут мазила вообще..)
А где картинки?
Картинки вернулись!
Ссылки на примеры заголовок битые — 404
Спасибо за вашу внимательность, картинки восстановили.
Не видно картинок
Спасибо за вашу внимательность, картинки восстановили.
Спасибо за ваши статьи! Очень выразительно, ёмко и информативно!))
Мы счастливы! Спасибо, Светлана, это все из-за вас!