Как правильно подготовиться к A/B тестированию. Как его провести. Как сделать это удобнее, если сайт на WordPress

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

3. Прежде чем мы сможем начать тестирование,
мы должны понять основы

4. Давайте начнем с 7 принципов
,дизайна ориентированного на
,конверсию
в изложении Oli Gardner (Unbounce) и Dan McGraw (KissMetrics)

5. 1
Коэффициент внимания
Это отношение интерактивных элементов
(ссылок) на странице к целям конверсии
(которая должна быть только одна).
В основном, внимание пользователя
фокусируется только на одной цели!

6. 2
Связь конверсий
Это сравнение опыта до клика и после клика.
Убедитесь, что дизайн объявления и сообщение
гармонично соответствуют!

7. 3
Контекстный дизайн
Поместите пользователя в контекст его
окружения.
Убедитесь, что удобство использования и
внешний вид создают контекстный смысл для
пользователя.

8. 4
Гармоничный дизайн
Убедитесь, что все элементы на странице несут
связное сообщение.
Все элементы должны работать вместе и не
противоречить друг другу.

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

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

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

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

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

14. Готовы ли вы к тому, что будет дальше?
Это CTA :)

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

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

17. Хороший дизайн CTA должен
...быть коротким и приятным

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

19. Примеры
CTA CTACTA

20. Примеры
CTA CTA
Вспомогательное утверждение
CTACTA

21. Примеры
CTA CTA
Вспомогательное утверждение
CTACTA
CTA
Вспомогательное утверждение

22. Примеры
CTA CTA
Вспомогательное утверждение
CTACTA
CTA
Вспомогательное утверждение
В действии
Закрепи за собой место
У нас ограниченное количество мест

23. Поговорим об размещении CTA
«линия сгиба»

24. CTA может быть

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

26. Описательный заголовок
Пятиточечный удар

27. Описательный заголовок
Вспомогательный подзаголовок
Пятиточечный удар

28. Описательный заголовок
Вспомогательный подзаголовок
Краткое заявление, которое
описывает преимущества
продукта или услуги
● Весомый аргумент
● Еще аргумент
● И еще один аргумент
Пятиточечный удар

29. Описательный заголовок
Вспомогательный подзаголовок
Краткое заявление, которое
описывает преимущества
продукта или услуги
● Весомый аргумент
● Еще аргумент
● И еще один аргумент
Пятиточечный удар
Вспомогательное утверждение

30. Описательный заголовок
Вспомогательный подзаголовок
Краткое заявление, которое
описывает преимущества
продукта или услуги
● Весомый аргумент
● Еще аргумент
● И еще один аргумент
Пятиточечный удар
Вспомогательное утверждение
CTA
CTA
«линия сгиба»

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

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

33. Но это не всегда работает.
Иногда вашей аудитории нужно больше.
С помощью повествования, которое идет после «линии сгиба»,
мы можем рассказать восхитительную историю о том, как мы
можем помочь в достижении цели.

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

35. Формат длинной
повествовательной
страницы.
В этом примере мы
расскажем историю
бренда на 5-ти экранах.
Подсказка: На странице повествования
мы рассмотрим пример добавления
более одного CTA на всей странице,
побуждая пользователя
к главному действию.
Геро
й

36. Формат длинной
повествовательной
страницы.
В этом примере мы
расскажем историю
бренда на 5-ти экранах.
Подсказка: На странице повествования
мы рассмотрим пример добавления
более одного CTA на всей странице,
побуждая пользователя
к главному действию.
Герой
Преимуществ
а

37. Формат длинной
повествовательной
страницы.
В этом примере мы
расскажем историю
бренда на 5-ти экранах.
Подсказка: На странице повествования
мы рассмотрим пример добавления
более одного CTA на всей странице,
побуждая пользователя
к главному действию.
Герой
Преимуществ
а
Предварительны
й
CTA

38. Формат длинной
повествовательной
страницы.
В этом примере мы
расскажем историю
бренда на 5-ти экранах.
Подсказка: На странице повествования
мы рассмотрим пример добавления
более одного CTA на всей странице,
побуждая пользователя
к главному действию.
Герой
Преимуществ
а
Предварительны
й
CTA
Создание
атмосферы
доверия

39. Формат длинной
повествовательной
страницы.
В этом примере мы
расскажем историю
бренда на 5-ти экранах.
Подсказка: На странице повествования
мы рассмотрим пример добавления
более одного CTA на всей странице,
побуждая пользователя
к главному действию.
Герой
Преимуществ
а
Предварительны
й
CTA
Создание
атмосферы
доверия
Конечный
CTA ( )форма

40. Но придержите лошадей...
Мы все еще не готовы тестировать.

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

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

43. Мы можем проверить
...заголовок

44. Мы можем проверить
...заголовок
...дизайн кнопки CTA

45. Мы можем проверить
...заголовок
...дизайн кнопки CTA
...длину и дизайн формы

46. Мы можем проверить
...заголовок
...дизайн кнопки CTA
...длину и дизайн формы
...длину страницы

47. Мы можем проверить
...заголовок
...дизайн кнопки CTA
...длину и дизайн формы
...длину страницы
…и т.д.

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

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

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

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

52. A/BЧтобы провести
,тестирование нам необходимо
... 100+по крайней мере уникальных
( MVT — 10+посетителей для в раз
)больше

53. A/BЧтобы провести
,тестирование нам необходимо
... 100+по крайней мере уникальных
( MVT — 10+посетителей для в раз
)больше
...по крайней мере за неделю до запуска
теста собрать достаточное количество
данных

54. Пример
Гипотеза
Добавив перечень
преимуществ
,под заголовком
мы должны увидеть
рост кликов
Результат
Вариант с перечнем
увеличил конверсию
28%до

55. Тестируйте ваши формы
Форма на экране с героем
5.84%
Клик для прокрутки
страницы к
экрану с формой
3.74%
Форма во
всплывающем окне
4.29%

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

57. Мы также можем проверить
...побуждающие действия
...купоны
... .доп продажи
...доверие к рекомендациям
.и отзывам из соц сетей
...срочность
...бесплатная пробная версия
-или условно бесплатная лицензия

58. Ну ладно…
А WordPress тогда здесь причём?

59. Все эти принципы могут быть
,применимы к любой странице
:находящейся в сети
...посадочная страница
...электронное письмо
...страница продукта
...страница приложения
...страница с ценами
...страница контактов
... . .и т д

60. WordPressВот несколько
,плагинов которые облегчат вам
работу
● Optimizely
● Visual Web Optimizer
● Convert Experiments by Yoast
● Nellio A/B Testing
● Ultimate Landing Page
● wBounce

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

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

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

64. Ultimate Landing Page

65. wBounce

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

67. Спасибо за внимание!
● ruslan@begaliev.com
● vk: /begaliev
● fb: /ruslan.begaliev
● telegram: @luxeon