Дизайн Вадим Скворцов
2 327

Многовариантное против A/B-тестирования: что выбрать для редизайна сайта

Старший UX-специалист в Nielsen Norman Group Аврора Харли — о разнице и преимуществах вариантов тестирования дизайна.

В закладки

Перевод Николая Геллара для Sketchapp.me.

В мире методов оптимизации дизайна A/B-тестирование — самый популярный метод. Многовариантное тестирование — менее понятная альтернатива, её часто считают слишком трудоёмкой для использования. Хотя этот метод имеет свои ограничения, они уравновешиваются преимуществами, которые трудно достигнуть с помощью A/B-тестирования.

Многовариантное тестирование (МВТ)

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

  • Использование видеоролика продукта вместо изображения.
  • Изменение подписи кнопки призыва к действию с «Купить сейчас» на «Добавить в корзину».

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

Разберёмся в терминологии.

  • Переменная — элемент интерфейса (например, изображение или заголовок) с несколькими возможными вариантами дизайна.

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

  • Вариант — каждая версия дизайна переменной.

Изображение и видео продукта представляют собой два варианта визуального представления переменной; подписи «Добавить в корзину» и «Купить сейчас» — это варианты призыва к действию.

  • Вариация — итоговый дизайн, содержащий вариант каждой переменной, который можно сравнить с другими вариациями.

В примере будут четыре вариации дизайна, соответствующие всем возможным комбинациям вариантов переменных: изображение и «Добавить в корзину», изображение и «Купить сейчас», видео и «Добавить в корзину», видео и «Купить сейчас».

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

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

Разница между многовариантным и A/B-тестированием

Многовариантное тестирование часто рассматривается как разновидность A/В-тестирования, хотя их настройка и сильные стороны несколько отличаются. Ниже приведены сходства и различия между ними.

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

Напротив, если вы используете МВТ, вы, как правило, сможете определить значимость одного конкретного варианта или комбинации вариантов. Таким образом, вы сможете, например, узнать, что видео продукта значительно увеличивает конверсию по сравнению с изменением подписи кнопки. Это может дать вам дальнейшую стратегию и понимание дизайна (например, что стоит инвестировать в создание хороших видеороликов).

МВТ измеряет взаимодействия между элементами

Вернёмся к нашему первому примеру с электронной торговлей. Вы можете задаться вопросом, дадут ли два последовательных A/B-теста тот же результат, что и МВТ. Представим, что сначала вы запускаете A/B-тест для сравнения видео с изображением — предположим, что видео победит. Затем по вариации выигрыша вы проведёте ещё один A/B-тест между двумя возможными подписями кнопок, и «Купить сейчас» окажется лучше. Разве этот результат не был бы эквивалентен тесту МВТ?

Необязательно. Возможно, оптимальная комбинация — это изображение и «Купить сейчас», но вы не проверили эту версию.

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

Ограничения МВТ

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

Добавление ещё одного варианта для переменной «призыв к действию» (например, «Покупка») создало бы ещё две вариации, генерируемые путём объединения этого варианта с 2 другими вариантами переменной визуального представления.

Количество вариаций будет получено путём умножения числа вариантов для каждой переменной. Tак что, если у вас было две переменные: одна с двумя и другая с тремя вариантами, вы получите шесть вариаций.

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

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

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

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

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

Используйте МВТ для улучшения дизайна, а не полной его переделки

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

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

Если ваша цель — перейти к основательному редизайну (например, редизайн макета), A/B-тест для сравнения этого нового дизайна с текущим является более подходящим, чем МВТ. Как только вы найдёте более эффективный дизайн, используйте многовариантные тесты для дальнейшего улучшения определённых элементов победившем макете.

#дизайн

{ "author_name": "Вадим Скворцов", "author_type": "editor", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 0, "likes": 15, "favorites": 1, "is_advertisement": false, "subsite_label": "design", "id": 37713, "is_wide": false, "is_ugc": false, "date": "Thu, 10 May 2018 11:43:49 +0300" }
{ "id": 37713, "author_id": 120027, "diff_limit": 1000, "urls": {"diff":"\/comments\/37713\/get","add":"\/comments\/37713\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/37713"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "possessions": [] }

Комментариев нет 0 комм.

Популярные

По порядку

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления
{ "page_type": "default" }