Привет, Хабр! Если вы хотите протестировать сразу несколько факторов на странице (например, текст на кнопке, её цвет, размер, расположение) и понять, как эти факторы взаимодействуют — то вам нужно многовариативное тестирование.

Сегодня рассмотрим несколько способов многовариантного тестирования.

Способы многовариантного тестирования

Факторный дизайн

Факторный дизайн — это один из самых крутых методов многовариантного тестирования, который позволяет протестировать все возможные комбинации факторов. Здесь не просто тестируются отдельные изменения (например, изменение только цвета кнопки или текста), а сразу все возможные сочетания нескольких факторов.

Представьте, что есть три переменные: цвет кнопки, текст на кнопке и размер кнопки. Если у нас 3 варианта цвета, 2 варианта текста и 2 размера, то всего получаем возможных вариантов. Тестируем все возможные комбинации и анализируем, какой из вариантов работает лучше.

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

const variants = [
  { color: 'red', text: 'Купить', size: 'small' },
  { color: 'red', text: 'Купить', size: 'large' },
  { color: 'blue', text: 'Добавить в корзину', size: 'small' },
  { color: 'blue', text: 'Добавить в корзину', size: 'large' },
  { color: 'green', text: 'Купить', size: 'small' },
  { color: 'green', text: 'Купить', size: 'large' }
];

function getRandomVariant() {
  return variants[Math.floor(Math.random() * variants.length)];
}

const selectedVariant = getRandomVariant();
document.getElementById("button").style.backgroundColor = selectedVariant.color;
document.getElementById("button").innerText = selectedVariant.text;
document.getElementById("button").style.width = selectedVariant.size === 'small' ? '100px' : '200px';

Здесь тестируем все 12 комбинаций факторов, чтобы понять, какой вариант кнопки будет наиболее эффективным.

Дизайн с частичной факторизацией

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

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

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

Предположим, есть 12 комбинаций, но мы тестируем только 6 из них.

const selectedVariants = [
  { color: 'red', text: 'Купить', size: 'small' },
  { color: 'blue', text: 'Добавить в корзину', size: 'large' },
  { color: 'green', text: 'Купить', size: 'small' },
  { color: 'red', text: 'Добавить в корзину', size: 'large' },
  { color: 'blue', text: 'Купить', size: 'small' },
  { color: 'green', text: 'Добавить в корзину', size: 'large' }
];

const selectedVariant = selectedVariants[Math.floor(Math.random() * selectedVariants.length)];

document.getElementById("button").style.backgroundColor = selectedVariant.color;
document.getElementById("button").innerText = selectedVariant.text;
document.getElementById("button").style.width = selectedVariant.size === 'small' ? '100px' : '200px';

Здесь выбираем только 6 ключевых вариантов, чтобы ускорить тестирование, но всё равно получить точные результаты.

Метод A/B/C/D...

Если стандартное A/B‑тестирование с двумя вариантами не подходит, тогда на помощь приходит многовариантное тестирование. Здесь мы не ограничиваемся двумя вариантами, а тестируем сразу несколько.

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

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

Итак, этот метод используется, когда нужно протестировать не только два, а несколько вариантов одного и того же элемента, например, несколько вариантов текста на кнопке, цвета и размера.

const variants = [
  { color: 'red', text: 'Купить' },
  { color: 'blue', text: 'Добавить в корзину' },
  { color: 'green', text: 'Купить' },
  { color: 'purple', text: 'Оформить заказ' },
  { color: 'orange', text: 'Узнать больше' }
];

const selectedVariant = variants[Math.floor(Math.random() * variants.length)];

document.getElementById("button").style.backgroundColor = selectedVariant.color;
document.getElementById("button").innerText = selectedVariant.text;

Здесь тестируем сразу 5 вариантов кнопки, чтобы узнать, какой из них будет самым эффективным.

Дизайн с обратным тестированием (Reverse A/B Testing)

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

Используйте, когда хотите улучшить существующую версию, но не менять её кардинально. Тестирование улучшений помогает увидеть, что влияет на пользователей.

const currentVersion = { color: 'red', text: 'Купить' }; // Текущий вариант
const improvedVersions = [
  { color: 'blue', text: 'Добавить в корзину' },
  { color: 'green', text: 'Купить' }
];

const selectedVariant = improvedVersions[Math.floor(Math.random() * improvedVersions.length)];

document.getElementById("button").style.backgroundColor = selectedVariant.color;
document.getElementById("button").innerText = selectedVariant.text;

Здесь тестируем улучшенные версии против текущей, чтобы понять, какие изменения дают наибольший результат.

Тестирование в несколько этап

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

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

let step = 1; // Начинаем с первого этапа

const variantForStep1 = { color: 'red', text: 'Купить' };

if (step === 1) {
  // Тестируем только цвет кнопки
  document.getElementById("button").style.backgroundColor = variantForStep1.color;
  document.getElementById("button").innerText = variantForStep1.text;
}

// Если первый этап успешен, переходим ко второму
if (step === 1 && userSuccess) {
  step = 2;
  const variantForStep2 = { color: 'blue', text: 'Добавить в корзину' };
  document.getElementById("button").style.backgroundColor = variantForStep2.color;
  document.getElementById("button").innerText = variantForStep2.text;
}

Здесь тестируем поэтапно, начиная с одного параметра, а потом добавляем другие, если предыдущий этап успешен.

Адаптивное тестирование с машинным обучением

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

1. В начале случайным образом выбираем варианты с некоторой вероятностью ε (например, 10%).

2. С 90% вероятностью выбираем вариант, который показал наилучший результат в прошлом (на основе кликов).

3. Таким образом, алгоритм постепенно обучается, какой вариант работает лучше всего.

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

const variants = [
  { color: 'red', text: 'Купить', clicks: 0, conversions: 0 },
  { color: 'blue', text: 'Добавить в корзину', clicks: 0, conversions: 0 },
  { color: 'green', text: 'Купить', clicks: 0, conversions: 0 }
];

let epsilon = 0.1; // Вероятность случайного выбора
let bestVariantIndex = 0; // Индекс лучшего варианта

// Функция для выбора варианта с использованием ε-Жадности
function getBestVariant() {
  if (Math.random() < epsilon) {
    // С вероятностью ε выбираем случайный вариант
    return Math.floor(Math.random() * variants.length);
  } else {
    // Иначе выбираем лучший вариант
    let maxConversionRate = -1;
    variants.forEach((variant, index) => {
      let conversionRate = variant.conversions / (variant.clicks || 1); // Учитываем возможное деление на ноль
      if (conversionRate > maxConversionRate) {
        maxConversionRate = conversionRate;
        bestVariantIndex = index;
      }
    });
    return bestVariantIndex;
  }
}

// Функция адаптивного тестирования
function adaptiveTesting() {
  const selectedVariantIndex = getBestVariant(); // Получаем индекс лучшего варианта
  const selectedVariant = variants[selectedVariantIndex];

  // Показали выбранную кнопку
  document.getElementById("button").style.backgroundColor = selectedVariant.color;
  document.getElementById("button").innerText = selectedVariant.text;

  // Обновляем данные о кликах
  selectedVariant.clicks++;

  // Здесь имитируем конверсию, например, с 5% вероятностью пользователь нажимает
  if (Math.random() < 0.05) {
    selectedVariant.conversions++;
  }
}

// Запуск теста, например, раз в секунду
setInterval(adaptiveTesting, 1000);

Адаптивное тестирование с алгоритмом ε‑Жадности позволяет динамически выбирать наилучший вариант, основываясь на данных о кликах и конверсиях, постепенно исключая неэффективные варианты. Сначала алгоритм выбирает случайные варианты с вероятностью ε, а затем постепенно выбирает вариант с наилучшей конверсией, уменьшая ε с течением времени

На первом этапе вероятность выбора случайного варианта будет высокой , и алгоритм будет исследовать, какие варианты работают лучше. Со временем ε будет уменьшаться (например, до 0.01), и алгоритм будет больше выбирать лучшие варианты, чем случайные.

Crossover Testing

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

То есть мы показываем пользователю несколько вариантов, но не все сразу.

let currentVariant = 'red'; // Изначально показываем красную кнопку
let variantHistory = ['red', 'blue', 'green'];

function crossoverTesting() {
  const randomIndex = Math.floor(Math.random() * variantHistory.length);
  currentVariant = variantHistory[randomIndex];

  document.getElementById("button").style.backgroundColor = currentVariant;
}

Здесь мы показываем пользователю различные варианты, чтобы понять, как их восприятие меняется со временем.

A/B-тестирование с мультифакторами

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

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

const variants = [
  { color: 'red', text: 'Купить', size: 'large' },
  { color: 'blue', text: 'Добавить в корзину', size: 'small' },
  { color: 'green', text: 'Купить', size: 'medium' }
];

const selectedVariant = variants[Math.floor(Math.random() * variants.length)];

document.getElementById("button").style.backgroundColor = selectedVariant.color;
document.getElementById("button").innerText = selectedVariant.text;
document.getElementById("button").style.width = selectedVariant.size === 'small' ? '100px' : selectedVariant.size === 'large' ? '200px' : '150px';

Здесь сразу тестируем несколько параметров кнопки для анализа их эффективности.

9. Сплит-тестирование по сегментам (Segmented A/B Testing)

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

Как это работает?

Мы делим пользователей на группы (например, по устройствам или географическому положению) и тестируем разные варианты для каждой из групп.

Когда использовать?

Когда нужно проверить, как различные группы пользователей реагируют на изменения.

Реализация в коде

const userSegment = 'mobile'; // Пример сегмента
const variants = {
  mobile: { color: 'red', text: 'Купить' },
  desktop: { color: 'blue', text: 'Добавить в корзину' }
};

const selectedVariant = variants[userSegment];

document.getElementById("button").style.backgroundColor = selectedVariant.color;
document.getElementById("button").innerText = selectedVariant.text;

Здесь мы разделяем пользователей на сегменты и тестируем разные варианты для каждого сегмента.

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

В заключение всех, кому интересен бизнес-анализ, приглашаем на открытые уроки:

• 16 января: Графическое описание бизнес-процессов и требований. Узнать подробнее

• 27 января: Управление изменениями требований. Узнать подробнее