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

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

Upload: -

Post on 16-Apr-2017

84 views

Category:

Marketing


0 download

TRANSCRIPT

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

ХОРОШИЕ ЛЕНДИНГИ? РАЗБЕРЕМСЯ…

Презентация подготовлена Миткиной Светланой по материалам

http://thelandingpagecourse.com/landing-page-design-examples-critiques/

Больше будем знать о лендингах, больше сможем на них зарабатывать.Что можно приобрести без денег? Возможность совершенствоваться. В любом деле. Вперед!

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

“20 ЛУЧШИХ LANDING PAGES”

По мнению эксперта Oli Gardner  from the Landing Page Conversion Course Unbounce.

Я изучила материалы курса http://thelandingpagecourse.com/landing-page-101-intro/, потому что люблю получать информацию «из первых рук».

Мне понравилась работа создателей этого курса, реальных практиков в области создания Landing pages. И я переделывала по ходу прохождения курса свой сайт.Миткина Светлана Дмитриевна: [email protected]

Oli Gardner@OliGardner

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

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

Второе: великолепный заголовок, ясно объясняющий, что надо сделать и что получим в результате заполнения формы.Третье: под формой есть пояснение, и посетитель знает, что его ждет в случае заполнения формы.

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

ЧТО Я МЕНЯЮ В СВОЕМ ЛЕНДИНГЕ

Я нахожусь в стадии создания собственного Landing page. Поскольку сайт я начала делать до знакомства с курсом http://thelandingpagecourse.com/landing-page-101-intro/ и мнением экспертов курса, в том числе Oli Gardner@OliGardner, то я не перешла на предложенную на курсе их платформу, а продолжила использовать ThemeForest-Be.

Тем не менее, мнение экспертов я хочу учесть.

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

До (before) После (after)

1. ЗАГОЛОВОК К СТА И КНОПКА

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

ОБРАЗЕЦ 2Первое: хороший дизайн электронной книги.

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

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

До (before) После (after)

2. РАЗМЕСТИЛА КНОПКИ СОЦИАЛЬНОГО ОБМЕНА ПОД

ФОРМОЙ.

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

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

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

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

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

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

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

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

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

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

формы – не понятна цель, для чего надо ее подписывать;

2. Нет политики конфиденциальности, которая должна отражаться в случае сбора данных через e-mail;

3. Название страницы не проясняет ее цель; 4. Цель поясняется в описании, но оно не выделено, на сером фоне.

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

ОБРАЗЕЦ 8

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

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

ОБРАЗЕЦ 9

• Страница разбита на разделы по вертикали, которые хорошо усваиваются. Ссылки в конце каждого раздела отправляют к началу.

• Заголовок простой и привлекательный.• СТА содержит информацию о возможности

попробовать создать сайт бесплатно.• Повторные СТА. В конце каждого раздела

длинной целевой страницы. Хороший прием, поскольку никогда не знаешь в какой момент и на какой стадии убеждения сработает эта кнопка.

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

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

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

ОБРАЗЕЦ 11

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

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

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

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

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

будет происходить). Что можно изменить: сократить форму!

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

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

Что можно пожелать, по мнению Oli Gardner, так это сделать А/В тестирование короткой версии страницы.

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

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

Немного изменить, по мнению эксперта, можно следующее:Цвет кнопки СТА сделать синим;Вместо «Submit» – «Регистрация на вебинар».

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

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

Должным образом оптимизированное видео имеет в 53 раза больше шансов попасть на первую страницу результатов поиска Google Видео можно многократно использовать, разместив его на YouTube.

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

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

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

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

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

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

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

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

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

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

ХОРОШИЕ ЛЕНДИНГИ, КОТОРЫЕ МОЖНО РАССМАТРИВАТЬ КАК

ОБРАЗЕЦ.

Презентация подготовлена по материалам http://thelandingpagecourse.com/landing-page-design-examples-critiques

/

Миткина Светлана ДмитриевнаE-mail: [email protected]

Благодарю Oli Gardner за возможность обучения. Мнения о качестве лендингов могут быть разными, в том числе, не совпадать с мнением Oli Gardner или моим. Суть одна – Landing Page - полезный и востребованный инструмент для продвижения продукта в сети интернет. Но хочется уже чего-нибудь поновее. Ждем!