AB test
Сколько статей, презентаций, записей выступлений, вебинаров можно найти в Сети о том, как добиться увеличения конверсии, — не счесть. Миллион советов, тонны чужого опыта. Сократить процесс оформления заказа, сделать навигацию удобнее, тщательнее поработать над текстовым контентом, установить на сайт онлайн-консультант и т.д. Но каким бы авторитетным советам вы не следовали, никогда нет гарантии, что они сработают в вашем случае.

Единственный верный способ выяснить это — внедрить изменения и протестировать их (баннер, объявление, кнопку…) на живой аудитории. Результаты такого теста могут вас сильно удивить, сколько бы теоретических материалов вы до этого ни изучили.

Это можно сделать несколькими способами, например, провести A/B тестирование или Eye Tracking исследование. Они предоставят вам наглядные данные о том, что именно не устраивает пользователей на вашем сайте и как это изменить, чтобы конверсия повысилась. Это может быть очень маленькое изменение интерфейса, которое принесёт вам очень большое изменение объёма продаж. Например, одно лишь изменение цвета, размера или формы кнопки кнопки призыва к действию (call-to-action) способно повысить конверсию в несколько раз.

Confused concept

Компания Umisoft — разработчик программных решений для создания сайтов — поделилась с нами собственным опытом тестирования сайтов umi.ru и umi-cms.ru и рассказала, какой результат это дало.

Кейс 1: A/B-тестирование кнопок на сайте UMI.ru

UMI.ru — это сервис создания готовых сайтов, который рассчитан на начинающих предпринимателей и малый бизнес — людей, которые мало знакомы с интернет-технологиями.

Изначально конверсия на UMI.ru составляла примерно 1,5–2%. Чтобы добиться её увеличения, компания провела A/B-тесты двух вариантов дизайна кнопки призыва к действию «Создать сайт сейчас!».

A/B-тестирование (или сплит-тестирование) — это один из наиболее распространённых способов улучшения веб-интерфейсов, онлайн-рекламы и повышения конверсии в интернете. Для этого разрабатываются два варианта тестируемого элемента (макета страницы, дизайна какой-либо кнопки, баннера, заголовка и т.д.), которые одновременно запускаются для целевой аудитории, разделённой на две одинаковые по объёму и равномерные по составу части. Соответственно, первая часть аудитории попадает на один вариант страницы, а вторая — на другой. Полученные данные сравниваются и анализируются.  

До:
зеленая кнопка
После:
красная кнопка
Изначально на страницах сайта кнопка была зелёной и объёмной. Конверсия кнопки составляла около 2%. После изменения её формы (она стала плоской) роста или снижения конверсии не произошло.

Далее компания протестировала цвет кнопки, изменив его с зелёного на красный. A/B-тестирование было проведено на тысячах пользователей, в течение недели тестировалась зелёная кнопка и неделю — красная. И вот тут-то и случилось открытие: красная кнопка показала подъём количества кликов в несколько раз. Был проверен каждый лендинг, страница тарифов и прочие страницы сайта UMI.ru. После каждого теста была выбрана кнопка, на которую пользователи кликают больше — то есть красная.

Сейчас конверсия кнопки призыва к действию на UMI.ru поднимается зачастую до 9% — это очень высокий показатель.

Сергей Котырев (Umisoft):
Каким бы специалистом по юзабилити вы ни были, вы не скажете точно, что красная кнопка будет эффективнее, чем зелёная. Это можно выяснить, только грамотно проведя A/B-тестирование.

Желательно тестировать только одно изменение. Например, в случае кнопки call-to-action это может быть или текст, или внешний вид. Чем меньше величина изменения, которое вы проводите через A/B-тест, тем более точные результаты вы получите. Если тестировать одновременно множество изменений (и цвет, и форму кнопки), вы не будете знать, какое из них повлияло на конверсию.

Кейс 2:  Eye-tracking кнопки режима редактирования при управлении сайтом на UMI.CMS

UMI.CMS — популярная платформа для управления сайтами. Сайт на UMI.CMS можно редактировать прямо на самих страницах, не входя в отдельную административную зону. На самом деле, это безумно удобно, и в своё время эта технология стала прорывом в управлении сайтами.

Чтобы войти в режим редактирования сайта, нужно нажать на кнопку «Редактировать», которая находится в панели наверху страницы. Но здесь крылся один подводный камень: красиво нарисованную дизайнерами кнопку светлого цвета трудно было найти на светлой полосе, расположенной на светлой странице. Нужно было присматриваться и искать кнопку в течение нескольких секунд — а это неудобно.  Для того, чтобы сделать инструмент удобнее, компания провела айтрекинг-исследование (eye-tracking).

Айтрекинг — технология, позволяющая отслеживать движение взгляда пользователя по монитору компьютера. Для тестирования в лабораторных условиях используется устройство ай-трекер, которое состоит из специальных очков, компьютера с инфракрасной камерой и программного обеспечения, позволяющего анализировать поведение человеческого глаза, строить «карты внимания» и другие виды отчётов.

До:
ab41
ab4
Респондентам из целевой аудитории UMI.CMS было дано задание: включить режим редактирования сайта на UMI.CMS. Пока пользователь искал нужную кнопку, устройство отслеживало движение его глаз. По результатам исследования была составлена тепловая карта, при анализе которой стало понятно, насколько легко/сложно было выполнить заданное действие. Красным пятном на карте выделяется то место, где взгляд пользователя задерживается дольше всего. Мы видим, что пользователи чаще всего искали нужную кнопку не в левом верхнем углу, где она расположена, а в правой части страницы.

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

После:
ab51
ab5

Результаты исследования

  • Время на поиск кнопки: серая кнопка: 26 секунд, чёрная — 17 секунд. Пользователю понадобилось 26 секунд, чтобы найти на экране кнопку редактирования. После изменения цвета время сократилось до 17 секунд — практически в полтора раза.
  • Движения глаз пользователя при поиске кнопки: серая кнопка — 60 движений, чёрная — всего 38 движений. Опять же, пользователю понадобилось в полтора раза меньше движений, чтобы обнаружить нужную кнопку на странице, после того как она была перекрашена в более тёмный цвет.
  • Время от «нашёл кнопку» до «кликнул»: серая кнопка — 15 секунд, чёрная — 10 секунд.
  • Общее время эксперимента (от начала эксперимента до клика по кнопке) — серая кнопка — 43 секунды, чёрная кнопка — всего 29 секунд.
Мы видим, что изменение всего лишь цвета кнопки привело к повышению удобства пользования инструментом (юзабилити) и росту конверсии (в данном случае — времени, затрачиваемом на выполнение задачи) на 50%.

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

Сергей Котырев (Umisoft):
Исследование движения глаз помогает выявить, на какие детали на странице пользователи обращают внимание в первую очередь, смотрят ли они туда, куда вы рассчитывали, что их «зацепило» на конкретной странице, а что заставило её покинуть.

Многие скажут, что аналогичный сервис есть в Яндекс.Метрике, который рисует тепловые карты кликов (зоны, где пользователь водит мышкой). Мы провели эксперимент — сравнили тепловые карты взглядов и карты кликов от Яндекс.Метрики. И мы выяснили, что эти тепловые карты совершенно не совпадают: человек движет взглядом и мышкой по сайту  совершенно асинхронно. Иными словами, пользователь не обязательно направляет курсор мышки в то место, куда смотрит.

***
ab6

***

Сколько бы учебников, теоретических рекомендаций и чужой аналитики вы не изучали, никогда нельзя знать наверняка, что именно на вашем сайте покажется пользователям удобным, привлекательным либо наоборот отталкивающим, что сработает, а что нет. Ваши коллеги могут высказать свои предположения, однако доверять вы можете только тестированию, и его результаты могут вас удивить. Нельзя утверждать, что A/B-тестирование совершенно, однако оно принесёт вам намного больше пользы, чем догадки коллег и теоретические знания из различных маркетинговых статей. Удачных тестов!

Изображения: usabilitygeek.comconversionxl.com | Титульное изображение: emarketingblog.nl