Как сравнить два варианта страницы на сайте магазина косметики

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

Что именно сравнивать: одна гипотеза вместо «нового дизайна»

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

Для магазина косметики хорошие кандидаты для проверки:

• способ выбора оттенка или объёма;
• место блока со способом применения и составом (речь только о расположении информации на странице);
• отзывы с фотографиями рядом с кнопкой покупки или ниже по странице;
• строка о сроках и стоимости доставки возле кнопки «В корзину»;
• подсказка в корзине о том, сколько не хватает до бесплатной доставки.

Условный пример: выбор оттенка в карточке тонального крема

Допустим, в карточке тонального крема 12 оттенков. В варианте А покупатель видит выпадающий список «Выберите оттенок» с названиями вроде «02 Натуральный беж». Кнопка «В корзину» активна сразу, а в списке по умолчанию стоит первый оттенок.

В варианте Б под фото расположен ряд цветных кружков. При выборе под ним появляется подпись с названием оттенка. Недоступные оттенки перечёркнуты и сопровождаются ссылкой «Сообщить о поступлении». Пока оттенок не выбран, кнопка неактивна, а рядом написано «Сначала выберите оттенок».

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

Какие показатели выбрать, чтобы не обмануться

Одной метрики мало. Для примера выше разумно заранее определить:

• Основная: доля посетителей карточки, оформивших заказ с этим товаром. Рост добавлений в корзину при том же числе заказов ничего не даёт.
• Промежуточные: клик по оттенку, добавление в корзину, переход к оформлению. Они показывают, где именно меняется поведение.
• Контрольные: ошибки на странице, время загрузки, доля обращений в поддержку с вопросом «как выбрать оттенок». Последнюю фиксируйте вручную по обоим периодам.

Цели нужно настроить в Яндекс.Метрике или Google Analytics до запуска, а не после. Отдельно смотрите результат на телефонах и компьютерах: кружки, удобные для пальца, на большом экране могут вести себя иначе. Долю мобильных посетителей возьмите из своих отчётов.

Как делить посетителей и сколько ждать

Принципы, которые защищают от ложных выводов:

• Делите людей, а не визиты. Один посетитель должен всегда видеть один и тот же вариант, иначе он увидит оба и данные смешаются. Сервисы A/B-тестирования обычно запоминают выбор в браузере.
• Запускайте оба варианта одновременно. Сравнение «неделя до и неделя после» ловит не страницу, а смену рекламы, погоды и зарплатных дней.
• Берите целые недели. В будни и выходные покупатели косметики ведут себя по-разному.
• Заранее запишите срок и условие остановки. Если остановить тест в тот день, когда один вариант вырвался вперёд, часто фиксируется случайный всплеск.
• Не запускайте тест вместе с крупной акцией, рассылкой или рекламой у блогера, если эти события не охватывают оба варианта равномерно. Сезонные распродажи искажают картину даже при равном делении трафика: поведение в такие дни отличается от обычного.

Нужный объём данных зависит от текущей конверсии и ожидаемого эффекта. Для оценки воспользуйтесь калькулятором размера выборки для A/B-тестов, а не интуицией.

Что делать, если заказов в магазине немного

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

• Тестируйте крупные изменения, а не цвет кнопки.
• Выбирайте страницы с максимальным трафиком, например самый популярный товар или корзину.
• Ориентируйтесь на метрики ближе к странице, например на добавление в корзину, но помните, что они слабее связаны с выручкой.
• Дополняйте цифры наблюдением: записи действий посетителей в Вебвизоре и короткий опрос на странице заказа.

Результат такого теста — ориентир для следующего шага, а не доказательство.

Проверочный список перед запуском

• Сформулирована одна гипотеза и записано, что считается успехом.
• Определена основная метрика и две-три промежуточные.
• Цели настроены и проверены тестовым заказом в обоих вариантах.
• Оба варианта работают на телефоне и в основных браузерах, нет «прыгающих» блоков.
• Посетитель закреплён за одним вариантом.
• Назначены даты начала и окончания, срок кратен неделе.
• В период теста не запланированы акции и смена рекламы, влияющие на варианты неравномерно.
• После завершения результат записан, победивший вариант внедрён полностью, а временный код теста удалён.

Все статьи блога