A/B тестирование на WordPress. Конверсия не только для...

A/B тестирование наWordPress. Конверсия не только для лендингов

Прежде чем мы сможем начать тестирование,

мы должны понять основы

Давайте начнем с 7 принципов, дизайна ориентированного на

,конверсию

в изложении Oli Gardner (Unbounce) и Dan McGraw (KissMetrics)

1

Коэффициент внимания

Это отношение интерактивных элементов (ссылок) на странице к целям конверсии (которая должна быть только одна).

В основном, внимание пользователя фокусируется только на одной цели!

2

Связь конверсий

Это сравнение опыта до клика и после клика.

Убедитесь, что дизайн объявления и сообщение гармонично соответствуют!

3

Контекстный дизайн

Поместите пользователя в контекст его окружения.

Убедитесь, что удобство использования и внешний вид создают контекстный смысл для пользователя.

4

Гармоничный дизайн

Убедитесь, что все элементы на странице несут связное сообщение.

Все элементы должны работать вместе и не противоречить друг другу.

5

Ясность

Создайте простой, легкоусвояемый и восхитительный опыт использования.

Сделайте его смертельно простым для понимания пользователей.

6

Достоверность

Используйте доверительные сигналы и будьте прозрачны. Люди должны доверять вашему бренду, если они собираются отдать вам что-либо.

Добавьте рекомендации, отзывы из социальных сетей и т.д.

7

Продолжение конверсии

Найдите способы собрать дополнительную конверсию. Это может быть ответное письмо, страница благодарности, подтверждение регистрации и т.д.

Будьте всегда конвертируемыми :)

Уфф...

Но мы еще не готовы начать тестировать.

Готовы ли вы к тому, что будет дальше?

Готовы ли вы к тому, что будет дальше?

Это CTA :)

Давайте начнем с дизайна CTA

Хороший дизайн CTA должен

Хороший дизайн CTA должен

...быть коротким и приятным

Хороший дизайн CTA должен

...быть коротким и приятным...описать то, что произойдет при нажатии

Примеры

CTA CTACTA

Примеры

CTA CTA

Вспомогательное утверждение

CTACTA

Примеры

CTA CTA

Вспомогательное утверждение

CTACTA

CTAВспомогательное утверждение

Примеры

CTA CTA

Вспомогательное утверждение

CTACTA

CTAВспомогательное утверждение

В действии

Закрепи за собой место

У нас ограниченное количество мест

Поговорим об размещении CTA

«линия сгиба»

CTA может быть

CTA может быть

...над «линией сгиба» (пятиточечный удар)...под «линией сгиба» (повествовательная страница)

Описательный заголовок

Пятиточечный удар

Описательный заголовокВспомогательный подзаголовок

Пятиточечный удар

Описательный заголовокВспомогательный подзаголовок

Краткое заявление, которое описывает преимущества продукта или услуги

● Весомый аргумент

● Еще аргумент

● И еще один аргумент

Пятиточечный удар

Описательный заголовокВспомогательный подзаголовок

Краткое заявление, которое описывает преимущества продукта или услуги

● Весомый аргумент

● Еще аргумент

● И еще один аргумент

Пятиточечный удар

Вспомогательное утверждение

Описательный заголовокВспомогательный подзаголовок

Краткое заявление, которое описывает преимущества продукта или услуги

● Весомый аргумент

● Еще аргумент

● И еще один аргумент

Пятиточечный удар

Вспомогательное утверждение

CTA

CTA

«линия сгиба»

Пятиточечный удар в действии...

Но это не всегда работает.

Иногда вашей аудитории нужно больше.

Но это не всегда работает.Иногда вашей аудитории нужно больше.

С помощью повествования, которое идет после «линии сгиба», мы можем рассказать восхитительную историю о том, как мы

можем помочь в достижении цели.

Формат длинной повествовательной

страницы .В этом примере мы расскажем историю бренда на 5-ти экранах.

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

Формат длинной повествовательной

страницы .В этом примере мы расскажем историю бренда на 5-ти экранах.

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

Герой

Формат длинной повествовательной

страницы .В этом примере мы расскажем историю бренда на 5-ти экранах.

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

Герой

Преимущества

Формат длинной повествовательной

страницы .В этом примере мы расскажем историю бренда на 5-ти экранах.

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

Герой

Преимущества

ПредварительныйCTA

Формат длинной повествовательной

страницы .В этом примере мы расскажем историю бренда на 5-ти экранах.

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

Герой

Преимущества

ПредварительныйCTA

Создание атмосферы

доверия

Формат длинной повествовательной

страницы .В этом примере мы расскажем историю бренда на 5-ти экранах.

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

Герой

Преимущества

ПредварительныйCTA

Создание атмосферы

доверия

КонечныйCTA ( )форма

Но придержите лошадей...

Мы все еще не готовы тестировать.

Пора сформировать некоторые проверяемые гипотезы.

Мы можем проверить

Мы можем проверить

...заголовок

Мы можем проверить

...заголовок...дизайн кнопки CTA

Мы можем проверить

...заголовок...дизайн кнопки CTA

...длину и дизайн формы

Мы можем проверить

...заголовок...дизайн кнопки CTA

...длину и дизайн формы...длину страницы

Мы можем проверить

...заголовок...дизайн кнопки CTA

...длину и дизайн формы...длину страницы

…и т.д.

, ?Как нам решить что проверять

, ?Как нам решить что проверять

, Мы основываемся на понимании накопленном из обратной связи с: , - , пользователями опросы онлайн чаты

. .тепловые карты и т д

Теперь мы можем .сформулировать наши гипотезы

A/B Чтобы провести, тестирование нам необходимо

A/B Чтобы провести, тестирование нам необходимо

... 100+ по крайней мере уникальных ( MVT — 10+ посетителей для в раз

)больше

A/B Чтобы провести, тестирование нам необходимо

... 100+ по крайней мере уникальных ( MVT — 10+ посетителей для в раз

)больше... по крайней мере за неделю до запуска

теста собрать достаточное количестводанных

Пример

Гипотеза Добавив перечень

преимуществ , под заголовком

мы должны увидеть рост кликов

Результат Вариант с перечнем

увеличил конверсию 28%до

Тестируйте ваши формы

Форма на экране с героем

5.84%

Клик для прокрутки страницы к

экрану с формой

3.74%

Форма во всплывающем окне

4.29%

Мы также можем проверить

Мы также можем проверить

... побуждающие действия ...купоны... . доп продажи

... доверие к рекомендациям . и отзывам из соц сетей

...срочность

... бесплатная пробная версия - или условно бесплатная лицензия

Ну ладно…

А WordPress тогда здесь причём?

Все эти принципы могут быть , применимы к любой странице

:находящейся в сети

... посадочная страница... электронное письмо... страница продукта

... страница приложения... страница с ценами... страница контактов

... . .и т д

WordPress Вот несколько, плагинов которые облегчат вам

работу

● Optimizely● Visual Web Optimizer● Convert Experiments by Yoast● Nellio A/B Testing● Ultimate Landing Page● wBounce

Optimizely — A/B тестирование заголовков

Nelio A/B Testing — множествоинструментов

Nelio A/B Testing — тепловые карты

Ultimate Landing Page

wBounce

Будьте терпеливы и .продолжайте оптимизировать

Спасибо за внимание!

● ruslan@begaliev.com

● vk: /begaliev

● fb: /ruslan.begaliev

● telegram: @luxeon