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 сайту. А задоволений клієнт = щаслива команда.

Переконайтеся в успіху проєкту на власні очі

{{block}}

Підсумок: бути чи не бути, і чому A/B-тестування важливе?

A/В-тестування — це ефективний метод підвищення рівня залученості користувачів, зниження показника відмов і збільшення коефіцієнта конверсії. Цей інструмент дозволяє компаніям покращувати свою онлайн-присутність, спираючись на реальні дані про поведінку користувачів, а не на припущення.

За даними досліджень, 77% компаній у світі регулярно застосовують A/В-тестування для покращення користувацького досвіду своїх веб продуктів. І це не дивно, адже успішне впровадження цього методу може призвести до збільшення середнього доходу на одного відвідувача на 50% для е-коммерс.

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

Якщо ви все ще вагаєтесь, чи потрібно A/В-тестування вашому бізнесу, зверніться до досвідченої UX/UI/CRO агенції, яка підкаже, який підхід буде найефективнішим саме для вашого проєкту.

До речі, який варіант ви обрали? Якщо другий, то ми вас вітаємо, адже ви вгадали!