Тестирование разных стилей кнопок оформления заказа

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

Некоторое время назад мы изучали цвет кнопок действий на главной странице Nelio Content. Благодаря A/B-тестированию стилей CSS мы смогли увидеть, как зеленый цвет лучше всего подходит для наших англоязычных посетителей этой страницы.

Мы не можем предположить, что это будет иметь место для любой страницы. Вот почему сегодня мы собираемся протестировать цвет и размер кнопок оформления заказа из таблицы цен, которая появляется на странице покупки Nelio A/B Testing.

Определение A/B-теста

Наша гипотеза улучшения состоит в том, что изменение цвета и размера кнопок оформления заказа в таблице цен Nelio A/B Testing позволит получить больше кликов по этим кнопкам и, как следствие, у нас будет больше продаж.

Первоначальная версия таблицы цен на Nelio A/B Testing показывает три плана, которые мы продаем, каждый со своей ценой, деталями и кнопкой для подписки на услугу. Вы можете увидеть это на следующем скриншоте:

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

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

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

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

Таким образом, у нас есть три разные версии стилей CSS таблицы цен на A/B-тестирование Nelio:

• Оригинал, без изменений стилей.
• Первый вариант с более яркими цветами на кнопках.
• Второй вариант с яркими цветами и большим размером кнопки.

Проделав всю эту работу, мы можем перевести ее в A/B-тестирование стилей CSS. Для этого Nelio A/B Testing позволяет создавать A/B-тесты различных стилей CSS, с помощью которых вы можете легко тестировать изменения стилей в WordPress.

Мы создаем новый CSS A/B-тест и три альтернативы внутри него. На самом деле скриншоты вариантов, которые вы видели раньше, — это скриншоты редактора стилей CSS, который Nelio A/B Testing включает для создания альтернатив.

Как вы можете видеть на снимке экрана выше, мы ограничили объем теста страницей с ценами Nelio A/B Testing, а также тем фактом, что мы определили пять целей, которые должны быть измерены в рамках теста:

• Нажимает на кнопки любого плана.
• Щелкает по кнопкам базового плана.
• Нажимает на кнопки профессионального плана.
• Нажимает на кнопки корпоративного плана.
• Сумма покупок.

Со всем этим созданным, то, что не займет у вас более 10 минут, мы запускаем тест и ждем результатов. Теперь очередь за Nelio A/B Testing. Наш плагин отвечает за разделение входящего трафика между различными вариантами и подсчет конверсий для каждой цели, определенной в тесте A/B.

Анализ результатов A/B-тестирования

Этот A/B-тест продлится три месяца на нашем сайте. Результаты можно увидеть ниже. Мы собираемся подробно проанализировать каждую цель, чтобы понять выводы, которые мы сделали из этого теста.

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

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

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

Точно так же статистика не может с достаточной уверенностью идентифицировать версию с новыми цветами как явного победителя.

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

Можно сказать, что, используя более заметные цвета, мы получаем большее количество кликов. Оранжевая кнопка работает лучше, чем синяя кнопка, которая была у нас раньше.

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

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

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

В следующих результатах мы видим, что это именно то, что происходит. Версия с новыми цветами продается на 24,5% меньше, а версия с комбинацией цветов и размеров продается на 16,6% меньше, чем текущая версия нашей страницы (та, что без изменений).

С этими результатами мы должны видеть, что воронка конверсии сложна, и, хотя мы часто делим ее на фазы и подсчитываем микроконверсии, мы не должны упускать из виду всю картину.

Преимущество создания многоцелевых A/B-тестов заключается в том, что у нас могут быть все точки зрения, которые мы хотим, чтобы получить полную картину того, насколько хорошо (или плохо) работает наш веб-сайт. Только так мы сможем с уверенностью выбрать победителя с полным спокойствием, глядя на данные результатов А/В-тестирования.

Рекомендуемое изображение от Grooveland Designs на Unsplash.