Хорошие лендинги? Разберемся...

ХОРОШИЕ ЛЕНДИНГИ?
РАЗБЕРЕМСЯ…
Презентация подготовлена Миткиной Светланой по
материалам http://thelandingpagecourse.com/landing-page-
design-examples-critiques/
Больше будем знать о лендингах, больше сможем на них
зарабатывать.
Что можно приобрести без денег? Возможность
совершенствоваться. В любом деле. Вперед!

“20 ЛУЧШИХ
LANDING PAGES”
По мнению эксперта Oli Gardner from the Landing Page
Conversion Course Unbounce.
Я изучила материалы курса http://thelandingpagecourse.com/landing-
page-101-intro/,
потому что люблю получать информацию «из первых рук».
Мне понравилась работа создателей этого курса, реальных практиков
в области создания Landing pages.
И я переделывала по ходу прохождения курса свой сайт.
Миткина Светлана Дмитриевна: msvet@list.ru
Oli Gardner@OliGardner

ОБРАЗЕЦ 1
Первое, что мы видим на этой странице – это
контактная форма. Она, по мнению Oli
Gardner@OliGardner,
хорошо выделена, занимает свое место,
хороший и понятный дизайн. На ней
сосредотачивается внимание посетителя.
Второе: великолепный заголовок, ясно
объясняющий, что надо сделать и что получим в
результате заполнения формы.
Третье: под формой есть пояснение, и посетитель
знает, что его ждет в случае заполнения формы.

ЧТО Я МЕНЯЮ В СВОЕМ
ЛЕНДИНГЕ
Я нахожусь в стадии
создания собственного Landing page.
Поскольку сайт я начала делать до знакомства с
курсом
http://thelandingpagecourse.com/landing-
page-101-intro/ и мнением экспертов курса, в
том числе
Oli Gardner@OliGardner,
то я не перешла на предложенную на курсе их
платформу,
а продолжила использовать ThemeForest-Be.
Тем не менее, мнение экспертов я хочу учесть.

До (before) После (after)
1. ЗАГОЛОВОК К СТА И КНОПКА

ОБРАЗЕЦ 2
Первое: хороший дизайн электронной книги.
Второе: заголовок ясно дает понять, что мы
получим от прочтения книги и как это нам
может пригодиться.
Как можно оптимизировать страницу?
Разместить кнопки социального обмена под
формой. Это способствует большей конверсии:
люди охотнее заполняют форму, узнав мнение
тех, кто уже приобрел такую книгу.

До (before) После (after)
2. РАЗМЕСТИЛА КНОПКИ СОЦИАЛЬНОГО
ОБМЕНА ПОД ФОРМОЙ.

ОБРАЗЕЦ 3
Заголовок. Он очевидно дает понять, какая
ожидает пользователя польза от
приложения I Phone.
У пользователя нет сомнений по поводу
формы, он готов ее заполнить, чтобы начать
пользоваться приложением сразу.
Важное подтверждение пользователь
получает от Отзыва. Видео и текст – очень
качественный убедительный элемент
лендинга.

ОБРАЗЕЦ 4
Сервис для мужчин, которые заняты настолько, что
заботу о доставке всего необходимого, вплоть до
носков, берет на себя Manpacks.
Заголовок создает очевидный положительный ответ.
Очень сексуальная картинка. Не уходим со страницы,
читаем дальше.
Чтобы было понятно с первого взгляда, о чем пойдет
речь на данной странице, лучше, по мнению Oli
Gardner, под логотипом разместить слоган.
И попробовать этот вариант со слоганом при A/B
тестировании.
Отзывы – увлекательное чтение.
Только положительные эмоции.

ОБРАЗЕЦ 5
В подзаголовке – выделенные слова. В
сочетании с заголовком получился
работающий прием – открывается смысл
самого заголовка.
Форма с удачным дизайном – за счет
выделения контрастным цветом и местом
расположения - сразу бросается в глаза.
Три кнопки под зоной формы фокусируют на
преимуществах, что, по мнению Oli Gardner,
во много раз сильнее работает на
конверсию, чем характеристики сервиса.
Что изменить и вновь протестировать?
Добавить данных из Аналитических отчетов
для убедительности.

ОБРАЗЕЦ 6
Использование кнопок социальных сетей в качестве
Призыва к действию.
Что хорошо, по мнению Oli Gardner:
1. Заголовок с ясным смыслом: подзаголовок – с
обозначением целевой аудитории;
2. Дизайн, контраст и расположение CТА «выше линии
сгиба»;
3. Предложение на СТА о бесплатной пробной версии;
4. Установлено доверие к предложению перечнем
компаний – клиентов и наличием отзывов.
Что можно изменить: 1. удалить исходящие ссылки из
футера;
2. Шесть ссылок («читать далее») – опасный маневр,
приводящий к уходу со страницы. Уход со страницы
должен быть только из СТА для заполнения формы.

ОБРАЗЕЦ 7
Посадочная страница для регистрации актов
благотворительности.
1. Эмоциональное фото – собака, смотрящая в
глаза – удерживает на странице.
2. Этапы в три шага – понятно, как все это
работает.
Что изменить:
1. Слабый СТА - нет заголовка в области формы
– не понятна цель, для чего надо ее
подписывать;
2. Нет политики конфиденциальности, которая
должна отражаться в случае сбора данных
через e-mail;
3. Название страницы не проясняет ее цель; 4.
Цель поясняется в описании, но оно не
выделено, на сером фоне.

ОБРАЗЕЦ 8
Cправа вверху – отзыв, описывающий
выгоду предложения, которое ниже
подтверждается цитатой из отзыва.
Что можно менять – это форму для
заполнения, которая перегружена
испрашиваемой информацией.
Надпись на кнопке СТА – не привлекает
пользователя в отличие от обещания
бесплатного тура или призыва к Началу
работы.

ОБРАЗЕЦ 9
• Страница разбита на разделы по вертикали, которые
хорошо усваиваются. Ссылки в конце каждого
раздела отправляют к началу.
• Заголовок простой и привлекательный.
• СТА содержит информацию о возможности
попробовать создать сайт бесплатно.
• Повторные СТА. В конце каждого раздела длинной
целевой страницы. Хороший прием, поскольку
никогда не знаешь в какой момент и на какой стадии
убеждения сработает эта кнопка.

ОБРАЗЕЦ 10
Целевая страница запроса «Купить
подержанное авто ».
1. Имеется Образец готового отчета по авто.
Покупатель может заранее увидеть образец
предоставляемых отчетов.
2. Заголовок конкретен. Предложение только
для тех, кто собирается купить не новое, а
подержанное авто.
Очень хороший макет и дизайн страницы!
Изменить можно только кнопку СТА и
написать конкретнее, например,
«Посмотреть отчет». Мое мнение тут не
совпадает с мнением Oli Gardner. Все очень
конкретно.

ОБРАЗЕЦ 11
Прямая связь между оформлением целевой страницы и
обложкой журнала.
Фото Опри, смотрящей в глаза вам и улыбающейся, очень
важная эмоциональная составляющая, задерживающая на
странице.
Отмечена двойная выгода : подписаться на журнал и
участвовать в розыгрыше.
Слово «Submit» на СТА. Оно ничего не говорит о том, что
будет происходить при нажатии далее.
В СТА изменить надпись на: «Подписаться на журнал». И
ниже второй строкой (мельче текст) добавить про участие
в тотализаторе и возможность выигрыша.
Таким образом сделать понятной двойную выгоду
подписки, поскольку иначе можно подумать, что речь идет
не о подписке на журнал, а о подписке на участие в
тотализаторе.

ОБРАЗЕЦ 12
По мнению Oli Gardner,
в заголовке удачно помещается преимущество
предложения, а не его описание.
Стрелка, направляющая на СТА, где сказано о
бесплатной 30-дневной версии продукта – хорошее
решение.
Множество социальных доказательств.
Написать, какая цена будет после завершения 30-
дневного пробного периода.
Информацию о том, что не требуются на этот
период кредитные карты (это хорошее
предложение) вынести во вторую линию описания
СТА (ниже и мельче, но под кнопкой).

ОБРАЗЕЦ 13
Что хорошо, по мнению :
Заголовок занимающий большое
пространство практически на белом фоне
плюс ясный его смысл делают этот заголовок
превосходным.
Контент изложен в логическом порядке:
1. Цель страницы;
2. Заявленная выгода;
3. Обозначение целевого рынка;
4. Конкретные действия (что и как будет
происходить).
Что можно изменить: сократить форму!

ОБРАЗЕЦ 14
Landing page по принципу старой школы продаж: с большим контентом,
вытянутая в длину. Убеждают и сравнивают, пока вы не будете готовы купить.
Дизайн соответствует желаниям и ожиданиям покупателя.
Целевой клиент имеет уже iPhone и привык к хорошему дизайну и возможностям
приложений.
Цена и СТА – выше линии сгиба.
Содержание приложения излагается в видео. А ниже – большой список
возможностей, который призван убедить покупателя в окончательном решении.
Для большей убедительности приводятся мнения известных фотографов, а также
галерея фотографий высокого качества, которые будут доступны покупателю в
случае покупки приложения .
Что можно пожелать, по мнению Oli Gardner, так это сделать А/В тестирование
короткой версии страницы.

ОБРАЗЕЦ 15
Информация на странице хорошо
структурирована и сфокусирована на самом
главном:
логотип;
ясный заголовок и проясняющий
подзаголовок;
описание страницы и преимуществ
предложения (в данном случае – вебинара);
форма для сбора подписчиков.
Все. Ничего лишнего!
Немного изменить, по мнению эксперта,
можно следующее:
Цвет кнопки СТА сделать синим;
Вместо «Submit» – «Регистрация на вебинар».

ОБРАЗЕЦ 16
Очень хорошее решение, как можно добавить
информации на страницу, но не увести посетителя с
нее прочь. Фотографии спикеров со ссылками
«Больше» решают этот вопрос: можно прослушать
информацию из «первых уст».
Есть видео – и это очень ценный элемент страницы.
Видео на 80% улучшает конверсию.
Должным образом оптимизированное видео имеет
в 53 раза больше шансов попасть на первую
страницу результатов поиска Google
Видео можно многократно использовать, разместив
его на YouTube.
Что изменить: убрать ссылки в футере. Они уводят
посетителя со странице, не выполняя при этом
конверсионной задачи целевой страницы.

ОБРАЗЕЦ 17
Креативное решение скрещенный носорог с
зеброй. По мнению эксперта Oli Gardner – это
образ тестирования поведения пользователей
на страницах сайта - «юзабилити».
Логотип, заголовок, подзаголовок – понятны и
хорошо оформлены; используется контраст и
«белое пространство».
Страница держит посетителя. Более того, она
обладает «вирусным качеством» – этой
страницей хочется поделиться1.
По этой причине хорошо бы добавить
социальные кнопки: Facebook, Twitter.
Призыв к действию – очевиден. В нем есть
текст о возможности попробовать бесплатно.

ОБРАЗЕЦ 18
«Спокойное плавание!» - заголовок страницы.
Эстетическое наполнение страницы обеспечивается жанром
подобранной музыки и возможностью рекламировать, т.е.
«продвигать» исполнителей.
Видео дает возможность слушать музыку, а заодно и проверить
список из 12 музыкальных произведений.
Есть социальное доказательство, основанное на мнении людей
из Facebook.
Что изменить, по мнению эксперта?
Добавить подзаголовок, объясняющий, что «Спокойное
плавание» – это мероприятие, где будет звучать рок-музыка из
70-х в исполнении 12 муз. групп.
Разместить около каждого из 12 альбомов кнопку для
прослушивания.
Позади виджетов из Facebook сделать более светлым фон,
иначе все сливается.
Разместить карту с обозначением места проведения
мероприятия – Балтимор.

ОБРАЗЕЦ 19
Что положительно:
Видео – это очень важный элемент страницы, который
укрепляет взаимоотношение с пользователем и дает
много информации;
содержание контента, аргументы – все направлено на
укрепление доверия пользователя; четкий СТА,
всего три поля для заполнения и высокая вероятность,
что эти поля будут заполнены в действительности;
вспомогательная информация разграничена с
основной – для того, чтобы не увести пользователя от
заполнения формы;
убрать URL магазина из формы заполнения – не
всегда и не всем понятно, что требуется вводить.

ОБРАЗЕЦ 20
Удачный Заголовок в три слова – и содержание
страницы раскрыто полностью.
Описание под заголовком объясняет полностью, что
вы получите, заполнив форму.
Идеальный заголовок к форме и текст на кнопке СТА.
Все, что нужно вам знать – выше линии сгиба. Но если
требуется дополнительная информация, то ниже она
представлена вместе с большим количеством
социальных доказательств, включая: отзывы,
упоминания в СМИ и целевые символы.
Что можно попробовать изменить: добавить пункт «Об
инвестировании в золото» ( About Gold Investing).
Я разделяю мнение Оли: надо сделать подзаголовок,
в котором раскроется суть предложения.

ХОРОШИЕ ЛЕНДИНГИ, КОТОРЫЕ МОЖНО
РАССМАТРИВАТЬ КАК ОБРАЗЕЦ.
Презентация подготовлена по материалам
http://thelandingpagecourse.com/landing-page-
design-examples-critiques/
Миткина Светлана Дмитриевна
E-mail: msvet@list.ru
Благодарю Oli Gardner за возможность обучения. Мнения о
качестве лендингов могут быть разными, в том числе, не
совпадать с мнением Oli Gardner или моим. Суть одна –
Landing Page - полезный и востребованный инструмент
для продвижения продукта в сети интернет.
Но хочется уже чего-нибудь поновее. Ждем!

Хорошие лендинги? Разберемся...

Recommended

Recommended

More Related Content

Similar to Хорошие лендинги? Разберемся...

Similar to Хорошие лендинги? Разберемся... (20)

Хорошие лендинги? Разберемся...