A/B тестирование в UX дизайне: чему учит нас пример Crystal Clear Memories?

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

Читайте дальше, чтобы получить несколько уроков из кейса Crystal Clear Memories и узнать, когда A/B-тестирование приносит реальную выгоду, а когда — лучше выбрать альтернативные решения.

Однако сначала предлагаем вам проверить свою интуицию: просмотрите дизайны ниже и попробуйте определить победителя A/B-тестирования. Правильный ответ будет ждать вас в конце статьи, так что A, B или C?

A/B тестирование UX/UI: что это и кому оно нужно (или же когда без него можно обойтись)?

Представьте, что вам нужно выбрать между двумя новыми вкусами мороженого, которые вы никогда не пробовали: "Сладкая лагуна" или "Манговое безумие". Что вы сделаете — наугад купите сразу килограмм на всю семью, или возьмете маленькую порцию на пробу? Последнее кажется более логичным, не так ли?

То же самое делает A/B-тестирование для вашего онлайн продукта — однако вместо вкусов вы тестируете основные страницы сайта, email рассылку, изменения в UI kit, рекламные тексты и тому подобное. Это позволяет выяснить, что больше всего откликается вашей аудитории для повышения KPI и ROI онлайн бизнеса. 

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

Существует несколько типов A/B-тестирования:

1. Сплит тестирование: сравнение двух совершенно разных версий веб-страницы, чтобы определить, какая из них работает лучше. Идеально подходит для полного редизайна сайта.
2. Многовариантное тестирование (A/В/n): одновременное тестирование нескольких элементов, чтобы понять, как их комбинация влияет на поведение пользователей: например, заголовки + CTA элементы + изображения.
3. Тестирование воронки продаж: оценка каждого шага пути пользователей, чтобы определить этапы, на которых они чаще всего покидают сайт для дальнейшей оптимизации конверсии: процесс заполнения чекаута, регистрации на сайте и т.д.

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

• Optimizely: Мощная цифровая платформа, предлагающая ряд эффективных инструментов для качественного анализа;
• VWO (Visual Website Optimizer): Удобный инструмент для бизнеса любого размера, позволяющий осуществлять A/В-тестирование, анализ поведения пользователей, в том числе и по тепловым картам;
• GA4 (Google Analytics 4): Надежный инструмент сбора данных для анализа взаимодействия пользователей с элементами сайта и оценки эффективности A/В-тестирования.

Продолжительность A/В-тестирования обычно варьируется от 1 до 4 недель и в основном зависит от размера трафика сайта и сложности теста. Для чего же оно нужно? A/В-тестирование позволяет бизнесу постоянно улучшать свое онлайн присутствие на основе реальных данных о предпочтениях пользователей, а не догадок. И самое важное, что это работает в любой нише — от е-коммерс до SaaS продуктов.

Однако несмотря на высокую эффективность, A/В-тесты это не волшебная пилюля, которая подходит всем. Если ваш сайт имеет небольшой трафик, достичь глубоких инсайтов будет сложно. Кроме того, если изменения, которые вы рассматриваете, имеют минимальное влияние на бизнес-цели, проведение A/В-тестирования может оказаться нерациональным. В таких случаях лучше сосредоточиться на качественном UX/UI исследовании и аналитике сайта.

A/B тестирование UI/UX в действии: история успеха Crystal Clear Memories

Готовы узнать победителя А/В тестирования? Что ж, мы готовы раскрыть вам все карты. 

С чего все началось?

Итак, знакомьтесь: Crystal Clear Memories — компания, которая продает клиентам высококачественные сувениры из хрусталя с индивидуальной гравировкой с запатентованной функцией LIVE PREVIEW™ ("Просмотр вживую"). 

И это гораздо больше, чем просто функция. Это основа бизнеса и действительно уникальная услуга бренда, которая позволяет клиентам увидеть визуализацию их 3D-кристалла еще до его покупки. Эта функция реализовывается в виде так называемого инструмента "Волшебник" (англ: 'wizard' как называют его в Crystal Clear Memories) — это онлайн-конструктор, где пользователи могут создать собственный 3D-кристалл, загружать собственные фото и проверять конечный результат, прежде чем оформить заказ. Звучит впечатляюще, не так ли?

Чувствуя большой потенциал, Crystal Clear Memories обратилась в студию Турум-бурум с запросом повысить конверсию главной страницы, страниц выдачи товаров и непосредственно страниц товаров на сайте.

UX-анализ и преимущества A/В-тестирования: как выглядит дизайн-победитель?

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

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

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

Первая гипотеза относительно главной страницы основывалась на том, что значительное количество пользователей (от 20% до 44%) не доходили до персонализации 3D кристалла в инструменте "Волшебник", игнорируя призыв на главном баннере. Кроме того, клиенты быстро покидали главную страницу, ведь не понимали ни услуги, ни ее ценности, а также не видели преимущества компании.

Поэтому мы решили разместить все блоки конструктора кристаллов, он же "Волшебник", на первом экране, чтобы пользователи сразу их видели, а баннер с образцом продукта оставить на заднем плане. Почему именно так? Мы предполагали, что это привлечет внимание пользователей и увеличит коэффициент конверсии на персонализированных страницах продуктов на 20%.

A/В-тест длился 19 дней и продемонстрировал положительные изменения в общем поведении пользователей и показателей эффективности е-коммерс. Но что именно изменилось? Прежде всего, уменьшился показатель отказов (-7%) — меньше пользователей покидали сайт. Во-вторых, пользователи остались на сайте дольше (длительность сессии увеличилась на 10%) и просматривали больше страниц за сессию (+9,7%). Другими словами, обновленный дизайн оказался более интуитивно понятным и привлекательным для посетителей сайта. 

Мы заметили, что хоть наши изменения и дали положительные результаты, основная цель — направить пользователей на страницу товара — не была полностью достигнута. Это не значит, что A/В-тест был неудачным; наоборот, он показал, что мы движемся в правильном направлении, однако блок "Волшебник" все еще нуждается в оптимизации. Поэтому мы решили провести второй эксперимент и проверить новую гипотезу.

В этом A/В тесте мы предложили не только рассказывать, но и демонстрировать магию "Волшебника" на первом экране. То есть позволить пользователям не только загружать фото, но и сразу видеть как будет выглядеть их продукт на различных формах 3D-кристалла. Мы ожидали, что это увеличит микроконверсию с блока "Волшебник" на страницу с подробной информацией о продукте на 25%.

Через 16 дней после запуска A/В-теста мы увидели значительные положительные изменения. Так, больше пользователей переходили на страницу товара (+14%), а также дольше оставались на сайте (продолжительность сессии +11%). Еще одним положительным изменением стало то, что меньше людей покидали главную страницу (показатель отказов -7%). Что это значит? А то, что новый формат "Волшебника" способствовал большему привлечению пользователей.

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

Что же в результате? Собственно, хэппи-энд. A/В-тесты доказали эффективность гипотез Турум-бурум, поэтому Crystal Clear Memories решили воплотить все рекомендации в жизнь (главная страница, страница товара и список выдачи товаров) и увидели значительное увеличение KPI сайта. А довольный клиент = счастливая команда.

Убедитесь в успехе проекта собственными глазами

Итог: быть или не быть, и почему A/B-тестирование важно?

A/В-тестирование — это эффективный метод повышения уровня вовлеченности пользователей, снижения показателя отказов и увеличения коэффициента конверсии. Этот инструмент позволяет компаниям улучшать свое онлайн-присутствие, опираясь на реальные данные о поведении пользователей, а не на предположения.

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

Поэтому, перед реализацией нового дизайна или внедрения определенных функций советуем осуществлять A/B-тестирование для проверки UX/UI гипотезы и принятия эффективных бизнес-решений. Результаты кейса Crystal Clear Memories еще раз демонстрируют, как сильно дизайн и расположение элементов сайта влияют на уровень вовлеченности клиентов и показатель отказов. 

Если вы все еще сомневаетесь, нужно ли A/В-тестирование вашему бизнесу, обратитесь к опытному UX/UI/CRO агентству, которое подскажет, какой подход будет наиболее эффективным именно для вашего проекта.

Кстати, какой вариант вы выбрали? Если второй, то мы вас поздравляем, ведь вы угадали!