Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Сайт об интернет-маркетинге: кейсы, советы, анализ ошибок, обзор сервисов
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
39
Битрикс24

Битрикс24

www.bitrix24.ru

30
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Логомашина

Логомашина

logomachine.ru

11
Devicerra

Devicerra

devicerra.com

11
Flowlu

Flowlu

flowlu.ru

10
GIFTD

GIFTD

giftd.tech

9
Aword

Aword

Приложение для изучения английских слов

9
ADN Digital Studio

ADN Digital Studio

adn.agency

9
Eczo.bike

Eczo.bike

www.eczo.bike

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

Кейс: Увеличение регистраций на 11.6 % в сервисе Piktochart

968 16 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Пошаговый процесс увеличения конверсии: анализ текущего сайта и целевой аудитории > поиск идеи для тестирования > создание тестового варианта > результат – увеличение регистраций на 11.6 %.

Piktochart – один из самых крутых сервисов для создания инфографики. Сам лично пробовал все инструменты и, в конце концов, остановился именно на нём. Как по мне, так это отлично сделанный продукт.

Многие на этом этапе (когда достигают определенного успеха) перестают работать над сайтом, сервисом, ведь всё и так хорошо. Но это не тот случай. Ребята не остановились на достигнутом и продолжили работать над увеличением конверсии посадочной страницы. Что и как они делали, вы узнаете дальше.

Итак, у нас есть оригинальный вариант главной страницы сайта, куда идёт весь трафик.

Первоначальный вариант главной страницы

orinial.png

На первый взгляд, всё очень даже неплохо. Приятные цвета, большой и заметный заголовок, подзаголовок, список функций сервиса, видеоролик о работе сервиса и большая оранжевая кнопка (нет ничего ярче этой кнопки). Есть даже мелкий текст о том, что каждому пользователю предоставляется вечный бесплатный аккаунт без необходимости вводить данные карточки. Ну и, конечно же, логотипы известных СМИ, которые писали про сервис.

В принципе, всё круто. Но это совсем не означает, что именно такой вариант лучше всего конвертирует посетителей в регистрации.

Статья в тему – 10 отчётов Google Analytics, которые помогут найти всех «убийц» конверсии

Давайте изучим взаимодействие пользователей со страницей.

Карта кликов

Прежде, чем запускать A/B тест, нужно сделать качественный и количественный анализ. Надеюсь, все это знают. Когда специалисты приступили к анализу страницы, первое, что они сделали – это анализ карты кликов.

Анализ карты кликов позволяет увидеть, на какие элементы страницы пользователи нажимают чаще всего. Сервисы для анализа карты кликов можно выбрать здесь.

heatmap.png

После анализа карты кликов стало понятно, что самый кликабельный элемент – это большая оранжевая кнопка «Start for free» (кроме кнопки «Login»). А на видео приходилось меньше 1 % кликов. Хотя именно оно должно было доносить простоту использования и функционал сервиса. Но так как почти никто не кликал на него, то свою функцию оно не выполняло.

Статья в тему – Как найти идею для A/B тесты: карты кликов и опросы

Карта скроллинга

Это ещё один способ анализа поведений пользователей на странице.

Анализ карты скроллинга позволяет увидеть, как глубоко пользователи просматривают страницу. Для проведения такого анализа можете воспользоваться Яндекс.Метрикой.

scrollmap.png

Стало понятно, что только 50 % пользователей пролистывают страницу до примеров инфографики и только 25 % листают дальше.

О чём это говорит?

Что тестировать элементы, которые находятся ниже зелёной линии – бессмысленно. Их не увидит большинство пользователей. Тестировать нужно первый экран, с которым посетитель сталкивается сразу после захода на сайт.

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

Глупо? Глупо!

На этом этапе было решено, что тестировать будут «первый экран». Главная цель – сделать так, чтобы новый посетитель сразу понимал «всю силу» сервиса. Чтобы он точно знал, какой результат он может получить.

Кроме этого, важно было не только «заставить» пользователя зарегистрироваться в сервисе. Нужно было его стимулировать создать первую инфографику, получить первый опыт использования сервиса. Так называемый, aha-момент, после которого он понимает ценность продукта и начинает им пользоваться.

Дальше начался анализ продукта, рынка, конкурентов и целевой аудитории. Были составлены «портреты» идеальных клиентов для каждого сегмента целевой аудитории и было описано, как нужно взаимодействовать с каждым сегментом.

Статья в тему — Узнай свою целевую аудиторию или умри: 34 жизненно важных вопроса

Работа над текстовыми элементами

  1. По данным исследований компании Nielsen, посетители читают около 20-28 % всего текста, размещенного на сайте. В оригинальном варианте текста было слишком много: длинный подзаголовок и 6 элементов в списке. Думаю, что именно этот список читало наименьшее количество посетителей.

Поэтому из списка выбрали только 3 самых важных пункта, а подзаголовок сократили в два раза.

  1. Оригинальный заголовок «Easy-to-use infographic creator» (Простой сервис для создания инфографики) не имел никакого обращения к пользователю.Соответственно, не цеплял его внимание и не оказывал эмоционального влияния.

Поэтому был выбран новый вариант заголовка – Make impressive infographics (Создавайте впечатляющую инфографику). Этот заголовок имеет прямое обращение к потенциальному клиенту. И это очень важно!

  1. Проанализировав рынок и целевую аудиторию, стало ясно, что большинство посетителей сайта – это студенты, интернет-маркетологи, блогеры и учителя. И практически никто из них не имеет дизайнерских навыков. Поэтому ключевой фактор использования сервиса для них – это возможность создавать инфографику без опыта в графическом дизайне.

Исходя из этой информации был написан новый короткий подзаголовок – «Create beautiful infographic in less than 10 minutes» (Создавайте красивую инфографику меньше, чем за 10 минут). Основной упор сделан на том, что это очень быстро и просто.

Хотя, на мой взгляд, первоначальный подзаголовок лучше отражал смысл сервиса. И там было чётко написано о том, что сервис предназначен НЕ для дизайнеров (Discover how non-designers are creating beautiful infographics in as little as 10 minutes). В этом подзаголовке только одно смущает – его длина. Во всём остальном он лучше. Но, опять же, это лишь моё мнение.

Работа с изображениями

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

  1. Первое, что хотелось сделать в плане изображений – это показать конечный результат использования сервиса. В нашем случае это сервис для создания инфографики. Соответственно, посетителю нужно было показать, что он сможет сделать в нём. Поэтому на первый экран, в качестве фона было добавлено 4 небольших красочных инфографики и пятый пустой вариант с текстом «Create yours» (Создай свою).

Отличный ход. Показали продукт лицом. Теперь каждый посетитель должен сразу понять, что это за сервис и какую пользу он может дать ему.

  1. Если это сервис для создания инфографики, то и сам сайт должен быть сделан в таком стиле. В оригинальном варианте сайт имел обычный внешний вид, как и большинство посадочных страниц. Но в тестовом варианте всё изменилось. Теперь заголовок был выполнен в стиле инфографики – надпись на ленточке, а внешние границы отдельных блоков получили «острые края».

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

Статья в тему — Как увеличить конверсию сайта с помощью изображений – 6 советов на основе успешных кейсов

Последнее, что изменили в тестовом варианте – это СТА-кнопка. Кнопка стала в 2-2.5 раза больше. Теперь всё внимание должно было быть приковано именно к ней. Также слегка изменился текст: вместо «Start for free» — «Start now», а сверху появилась небольшая надпись «Free For Life» (Бесплатно навсегда).

И вот, что в итоге получилось:

variation.png

Тестирование

После создания тестового варианта был запущен A/B тест. Весь трафик разделили 50/50, т.е. 50% всех пользователей видели оригинальный вариант, а остальные 50 % — тестовый. Эксперимент длился в течение 10 дней. За этот период в нём поучаствовало около 150 000 пользователей.

Результат:

Количество регистраций в тестовом варианте увеличилось на 11.4 %. Статистическая достоверность – 99 %.

Так как в сервисе можно зарегистрироваться через Email, Facebook и Google, отдельно было проанализировано влияние на количество регистраций через каждый из этих вариантов. Так, с помощью E-mail количество регистраций увеличилось на 7.1 %, через Google — на 13.8 % и через Facebook – на 14.9 %.

Выводы

  1. Анализируйте процесс взаимодействия пользователей с сайтом. Вы должны знать, куда кликают посетители, что чаще всего просматривают и глубоко ли листают страницу. Используйте для этого карты кликов и скроллинга.
  2. Анализируйте свою целевую аудиторию, чтобы понимать «болевые» точки и, исходя из этого, выстраивать процесс первого контакта. Для этого нужно общаться с потенциальными и текущими клиентами, проводить опросы.
  3. Говорите не о функциях/преимуществах вашего сервиса, а о ценности и пользе, которую он в конечном счёте принесёт клиенту.
  4. Показывайте продукт «лицом». Потенциальный клиент должен видеть, как он сможет пользоваться вашим продуктом/сервисом, что он от него получит. Такая визуализация помогает ему представить конечный результат. А это может повлиять на дальнейшее поведение.
  5. Перед внедрением изменений на сайт, тестируйте их. Сейчас все говорят, что видеоролики на посадочных страницах – это круто и повышает конверсию. И в большинстве случаев – это так. Но в этой статье всё оказалось наоборот. И никто не знает (без тестирования), как использование видео повлияет на конверсию конкретно на вашем сайте.

Перевод и адаптация — http://blog.crazyegg.com/2015/10/28/emotion-to-increase-conversions/

Читайте также наши другие популярные статьи:

  1. Сервисы для A/B тестирования (3000+ просмотров)
  2. Стартап Plotguru поднял конверсию с 9 до 52 %. А вам слабо? (2500+ просмотров)
  3. 100 идей для A/B тестирования: Часть первая (3000+ просмотров)
  4. 100 идей для A/B тестирования: Часть вторая (2500+ просмотров)
  5. 10 успешных кейсов A/B тестирования (2200+ просмотров)
  6. 6 кейсов увеличения конверсии от компании Fiverr (1100 + просмотров)
  7. Они помогут найти всех «убийц» конверсии — 10 отчётов в Google Analytics (10 000+ просмотров)
  8. Как увеличить конверсию сайта с помощью изображений – 6 советов на основе кейсов (4000+ просмотров)
  9. Какой цвет лучше влияет на коэффициент конверсии? (4000+ просмотров)
+1
Первые Новые Популярные
Симулятор бизнес-процессов
Сервис имитационного моделирования и оптимизации бизнес-процессов
Prolis Labkk
Хоть убей, не понимаю, как использовать карты кликов, неужели ради этого:
1. самый кликабельный элемент – это большая оранжевая кнопка
2. 50 % пользователей пролистывают страницу
Ответить
Pragmatika
Продуманные и понятные сайты для продажи товаров и услуг в интернете.
Николай Яковенко
2. 50% пользователей пролистывают страницу — это не карта кликов, а карта скроллинга. С ее помощью можно находить блоки, которые не работают.

Про карту кликов в статье понятно написано.
Ответить
Boosta.ru
Сайт об интернет-маркетинге: кейсы, советы, анализ ошибок, обзор сервисов
Andrei
50 % пользователей, как написал Николай, относятся к карте скроллинга, а не к карте кликов. Из-за этого возникло непонимание?
Ответить
Симулятор бизнес-процессов
Сервис имитационного моделирования и оптимизации бизнес-процессов
Prolis Labkk
Вопрос был в очевидности, что большинство посетителей кликает на большие оранживые кнопки и не все долистывают до конца длинных страниц. К чему были эти сервисы построения карт активности.
Ответить
Textbroker
Бюро копирайтинга
Надежда Лимонникова
Специально побежала смотреть на страницу, но там видимо снова тест: на весь экран модная видео-заставка, которая сильно тормозит компьютер.
Ответить
Boosta.ru
Сайт об интернет-маркетинге: кейсы, советы, анализ ошибок, обзор сервисов
Andrei
Да, Надежда, сейчас там стоит другой вариант. Возможно. работает A/B Тест, но похоже, что он настроен не на нашу аудиторию. Либо они уже до этого провели A/B тест новый и сейчас стоит выигрышный вариант.
Ещё месяц назад, когда я готовил эту статью, всё было так, как описывается в ней.
Ответить
GreenRed brand studio
разработка логотипа за 99$
Панченко Андрей
Вывод: на сайте нужно замутить большую оранжевую кнопку ...
Ответить
Симулятор бизнес-процессов
Сервис имитационного моделирования и оптимизации бизнес-процессов
Prolis Labkk
Как заметили выше, и кнопку и заголовки уже вернули назад. Так что рабочим девизом А/Б тестирования будет "Работает - не трогай".
Ответить
Boosta.ru
Сайт об интернет-маркетинге: кейсы, советы, анализ ошибок, обзор сервисов
Andrei
Да, Вы правы. Сейчас всё вернули, хотя в момент, когда я делал эту статью (примерно месяц назад) всё ещё было на своих местах.
Может быть такое, что и сейчас у них запущен тест на какую-нибудь аудиторию (т.к. я лично из Черногории не словил никакого тестового варианта, как ни пытался)
В целом, фейл небольшой по статье получается. Но всё же, логика и последовательность действий для кого-нибудь будет точно полезна)
Ответить
CourseBurg
Сервис для выбора оффлайн курсов по расположению, отзывам и цене
Александр Альхов
Народ у нас дикий, дают описание и алгоритм тестирования а они привязываются к цвету кнопки :)))
Ответить
Симулятор бизнес-процессов
Сервис имитационного моделирования и оптимизации бизнес-процессов
Prolis Labkk
Не отвлекайтесь от корыта с контентом. Верьте написанному, а не фактам. </irony>
Ответить
CourseBurg
Сервис для выбора оффлайн курсов по расположению, отзывам и цене
Александр Альхов
Чуваки и этого сервиса испортили страницу, пример описанный в статье лучше.

Сейчас они не конверсию повышают, а накручивают поведенческие для переходов из поиска. Какие лендосы они юзают под рекламу мы не знаем.

Или они выявили что происходит разрыв воронки после нажатия на кнопку люди теряются и по-этому стараются подогреть аудиторию еще на лэндосе.
Ответить
Boosta.ru
Сайт об интернет-маркетинге: кейсы, советы, анализ ошибок, обзор сервисов
Andrei
Жаль, что мы не знаем всего происходящего внутри....)))
Можно только догадываться о том, почему они изменили страницу на то, что есть сейчас. Возможно, сейчас даже идёт тест, а мы просто не попадаем в сегмент, которому показывают альтернативные варианты...
Ответить
Геннадий Баранов
Интересная получилась статья. Думаю, что для сервисов по инфографики это отличная стратегия. А вот при продаже мебели, как мы, нужно еще мониторить конверсию звонков, потому что приходится очень много работать в оффлайне для этого я пользуюсь сервисами аналитики звонков (Ringostat), довольно простенькая, но удобная программа.
Ответить
Boosta.ru
Сайт об интернет-маркетинге: кейсы, советы, анализ ошибок, обзор сервисов
Andrei
Конечно, этот кейс нельзя применить во всех отраслях. Но в этом кейсе круто описана логика, которую можно позаимствовать для своих проектов.
P.S. Пиарите рингостат?)
Ответить
Геннадий Баранов
На счет логики - согласен. Просто интересны более универсальные решения.

P.S. Ringostat просто норм сервис. Знаю еще неплохие решения типа Calltouch или Calibri. Не скажу, что кто-то из них намного круче.
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать