Как я подсела на А/Б тестирование интерфейса

Read an article in English

Какого UX-ера не спроси «Что ты думаешь об А/Б-тестировании?» – все в один голос отвечают, что это самая необходимая в хозяйстве вещь и по-другому вообще нельзя. Но скажите честно, вы А/Б-тестите интерфейсы на постоянной основе?

Я сама прониклась силой А/Б-тестирования только когда пришла работать в Nautal – международный маркетплейс для аренды яхт, где конверсия меняется в зависимости от сезона, страны и даже погоды.

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

Ну и погода, да, погода – это боль.

И речь идет не о 2-3% разницы. Конверсии одной недели могут отличаться от другой на 20-30%. В таких обстоятельствах невозможно понять, улучшают твои нововведения конверсию, или нет. Так что без А/Б-тестирования ты чувствуешь себя слепым и беспомощным.

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

Поэтому мы выбрали для своих целей Google Optimize – примерно то же самое по функциональности, но бесплатно :) Плюс, он работает в связке с Google Analytics – т.е. использует настроенные в GA цели, а в Аналитиксе можно смотреть отчеты по А/Б тестам.

Подключаем Analytics и Optimize через Google Tag Manager и все работает, как часы.

Итак, давайте посмотрим, что можно делать в Google Optimize.

Когда речь заходит об А/Б-тестировании, все почему-то приводят в пример кнопку, которую можно покрасить в зеленый или красный цвет :) Так вот, теперь это можно легко сделать.

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

Можно менять не только стили элементов, но и сам контент. Надписи на кнопках, заголовки и др.

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

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

Общее правило такое – сначала загружается оригинальная страница со всем статическим и динамическим контентом, потом применяются изменения Google Optomeze. Надо держать это в голове.

Одна из моих любимых функций – тестирования порядка блоков на странице: пункты меню, иконки, целые контентные блоки, например на лендинге.

Хватаешь блок мышкой и тащишь туда, куда хочешь. Можно поставить блок в любое место страницы (довольно трудно не сломать при этом верстку), либо воспользоваться настройкой по умолчанию, которая позволяет менять порядок однотипных блоков – элементов списка, div-ов одного уровня и др. В этот момент вы проникнитесь (или нет) уважением к своему фронтендеру и увидите как грамотно сделана верстка.

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

Никто не мешает в одном варианте эксперимента переставить боки местами, а в другом – совсем удалить один из блоков и посмотреть, что будет.

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

Поэтому я запустила тест с 3-мя вариантами: оригинальным, с переставленными местами блоками и вообще без блока «Безопасное бронирование».

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

Мы так любим добавлять в интерфейс новые штуки: галочки, фильтры, настройки, карусели, логотипы… но не всегда проверяем, меняют они что-то или нет. Так вот, проверить очень просто – создаешь эксперимент и в одном из вариантов удаляешь новенькую фичу. Через несколько дней сравниваешь конверсии и начинаешь рвать на себе волосы радуешься.

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

Можно попробовать убрать блок или передвинуть его в другое место и посмотреть, что как это повлияет на конверсию.

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

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

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

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

В Google Optimize весьма продвинутый конструктор правил для таргетирования аудитории для А/Б-эксперимента – 11 групп правил с помощью которых творятся чудеса.

Я пока использую две категории правил:

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

Поэтому я завела табличку, где отмечаю по каждому эксперименту:

• Включен он или выключен,
• Дату запуска,
• Цель (какую метрику хочу улучшить),
• Таргетинг (домен, группа страниц…),
• Гипотезу (что, собственно хочу проверить),
• Результат (кто таки победил),
• Выводы (что это означает).

Оказалось очень удобно. Во-первых, для себя – мотивирует организовывать работу и записывать выводы, плюс, удобно анализировать результаты. Во-вторых, для команды – когда они видят на сайте что-то странное –могут посмотреть в файлик и быстро понять, это мой эксперимент, или что-то сломалось :)

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

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

Хоть Optimize и не идеален, а я использую, наверное, только 20% его функциональности но уже определенно появляется ощущение уверенности и ориентиры, которых очень не хватает, когда твоя конверсия зависит от скорости полета мух. Чем больше его используешь, тем лучше понимаешь целевую аудиторию и рынок, появляется больше идей и они чаще оказываются удачными. Затягивает :)

Так, что считаю инструмент полезным. Дальше надо освоить эксперименты над динамическим контентом – карточками товаров и попапами. Если у вас есть такой опыт – буду очень рада о нем услышать.

Читайте продолжение.