Кроки до успіху в ecommerce — кейс UX-аудиту для АТБ

Хто наш партнер

АТБ-Маркет — одна з найбільших торговельних мереж в Україні, орієнтована на масового споживача. 

Компанія має власний сайт, де покупці мають змогу переглядати акції, шукати товари, перевіряти наявність у магазинах і здійснювати покупки.

Цілі співпраці

АТБ впроваджує нові технології для кращого користувацького досвіду та утримання лідерства на ринку. У межах цієї стратегії партнер звернувся до нас для UX-аудиту сайту, щоб збільшити конверсії, рентабельність маркетингових інструментів і загальний дохід бізнесу.

Сайт АТБ має якісний функціонал і сучасний дизайн, однак певні бар’єри заважали відвідувачам завершити покупку. Наше завдання — знайти критичні точки в користувацькому шляху й запропонувати рішення. 

Стратегія роботи

Ми розробили комплексну стратегію роботи, що включала в себе три кроки.

Крок 1. Аналіз ринку і поведінки користувачів сайту

Наше дослідження складалося з трьох етапів.

1. Аналіз ринку й аудиторії. Вивчили відкриті джерела, ринкові тенденції та зміни у вподобаннях споживачів, щоб зрозуміти їхні очікування.
2. Глибинне якісне дослідження поведінки. Проаналізували теплові карти, записи сеансів, мапи кліків й інші інструменти UX-аналітики, щоб виявити проблеми в навігації та процесі покупки.
3. Кількісний аналіз поведінкових метрик. Використали дані з Google Analytics і наскрізної аналітики для оцінки тривалості сесій, відсотка відмов, користувацьких шляхів і ефективності воронки продажів.

Результати аналізу

За даними Dynamic Yield 2024 року, глобальний коефіцієнт конверсії для ecommerce — 3,29%, тоді як в АТБ — приблизно 2,5%. Це свідчить про значний потенціал для росту ефективності взаємодії та утримання клієнтів через UX-оптимізацію.

Загальний відсоток відмов (bounce rate) на сайті партнера за листопад становить 30,91% і є нормальним для ніші. Однак під час дослідження показників сторінок ми виявили етап для поглибленого аналізу — додавання до кошика.

Середній показник додавання продуктів харчування і напоїв до кошика у ecommerce становить 6,41%, в АТБ — 4,5%. Тому ми визначили це однією з основних точок розвитку. 

Наступною зоною аналізу став початок оформлення покупки. До цього етапу на сайті партнера доходить 33,4% відвідувачів, що додали товар до кошика. 

Однак лише 1,7% з них переходить до покупки.

Крок 2. Визначення точок втрати конверсії

Ми виокремили ключові сторінки, що безпосередньо впливають на конверсію.

1. Почали з головної сторінки, як із точки входу для нових і постійних користувачів.
2. Далі перейшли до «Каталогу товарів», де користувачі найчастіше взаємодіють із фільтрами, сортуванням і підвантаженням товарів.
3. Після цього проаналізували «Картку товару» та «Кошик», що потребували доопрацювання за даними записів Hotjar і теплових карт кліків.
4. Наступним кроком стала оптимізація сторінки «Оформлення замовлення» — ми зафіксували значний відсів користувачів на цьому етапі.
5. Окрему увагу приділили вдосконаленню пошуку, виявивши проблемні місця в його функціоналі.

Крок 3. UX-рішення для покращення ключових сторінок

Ми проаналізували кожну сторінку в переліку наших пріоритетів та визначили ключові рішення.

Головна сторінка

На головній сторінці ми виділили дві ключові зони для покращення:

• відсутність блоку переглянутих товарів;
• некоректна поведінка іконки «Головна», що не дає зворотного зв’язку при натисканні.

Блок переглянутих товарів

Зазвичай покупці переходять із головної сторінки до списку товарів, а звідти — на сторінку конкретного продукту. Часто вони повертаються назад, щоб продовжити пошук. Однак через відсутність блоку переглянутих товарів цей шлях на сайті обривається.

Як наслідок, 95,5% сесій на сайті партнера завершувалися одразу після початку — це критичний показник, що свідчить про втрату зацікавлених покупців.

Логіка іконки «Головна»

Згідно з тепловими картами Hotjar, 1,17% користувачів натискає на іконку «Головна», навіть коли вже перебуває на головній сторінці. З огляду на загальну кількість відвідувачів, це суттєва частка аудиторії, що взаємодіє з елементом, котрий не виконує жодної нової дії.

Одна з причин — нечіткий активний стан іконок. На сайті АТБ під час відвідування сторінки змінювався лише колір тексту під іконкою в навігаційній панелі. 

Інша ймовірна причина — відсутність зворотного зв’язку після кліку. Коли нічого не змінюється, користувач вважає, що натискання не спрацювало. Інколи покупці використовують іконку «Головна», щоб оновити сторінку або повернутися на її початок — в якості альтернативи кнопці «Оновити» чи прокрутці.

Рішення.

Каталог

Саме тут користувачі приймають більшість рішень: переглядають, фільтрують і додають продукти в кошик. Ми виявили два бар’єри, що уповільнювали вибір товару: 

• незафіксовані фільтри; 
• повторне підвантаження контенту. 

Фільтри при скролі

Під час гортання сторінок блок фільтрів і сортування залишався вгорі. Щоб змінити параметри, користувачеві потрібно повертатися назад — це сповільнювало процес. 

Підвантаження контенту

Коли користувач переглядав каталог і натискав на кнопку «Показати ще», система замість нових товарів показувала вже переглянуті. Це створювало плутанину, сповільнювало пошук і знижувало інтерес до подальших дій. 

Картка товару

Сторінка товару — один із основних етапів ухвалення рішення про покупку. Ми виявили два фактори, що стримували цей крок на сайті партнера: 

• нестача інформації; 
• незручність дії «Купити».

Додаткова інформація про товар

Записи Hotjar показали, що покупці активно переглядають характеристики і відгуки продуктів. Проте на сторінці товару бракувало інформації про харчову цінність — калорійність, вміст білків, жирів, вуглеводів тощо. 

Відсутність додаткових даних змушувало користувачів шукати інформацію на сторонніх ресурсах, що відволікає від покупки й часто призводить до відмови.

Розташування кнопки «Купити»

Згідно з тепловими картами, лише 8% користувачів на мобільних пристроях і 4% на десктопних гортають до кінця сторінки товару. Для категорій ці показники вищі — 30,9% на мобільних і 25% на десктопних. Водночас лише 4,54% з них додають товар до кошика. 

Одна з причин — незручне розташування кнопки «Купити». На мобільній версії кнопка покупки закріплена на екрані, що забезпечує її постійну доступність. Проте на десктопній версії після перегляду опису, характеристик чи відгуків покупцю доводилося повертатися вгору для завершення дії.

Кошик

За даними Hotjar, кнопка «Оформити замовлення» отримує приблизно 11,11% кліків, що робить її найпопулярнішим елементом на сторінці. Але при цьому 69% кошиків на сайті — покинуті. 

Фіксація кнопки «Оформити замовлення»

Ми виявили, що коли кількість товарів у кошику зростає, користувачі часто змушені гортати сторінку вгору, щоб побачити суму чи натиснути кнопку. Це створює незручності, знижує ентузіазм і сприяє збільшенню кількості покинутих кошиків.

Читайте більше про покращення конверсій через UX-аудит у кейсі «ВМ Техніка».

Оформлення замовлення

На цьому етапі ми виявили два технічні бар’єри, що ускладнювали процес і знижували ймовірність завершення покупки: 

• зникнення заповнених даних при редагуванні; 
• відсутність автозаповнення для постійних користувачів. 

Редагування замовлення 

За даними теплових карт Hotjar, приблизно 0,46% користувачів на мобільній версії та 0,41% на десктопній користуються кнопкою «Редагувати список товарів», що є впливовим показником з огляду на кількість відвідувачів.

Проте коли користувач заповнював поля оформлення (ім’я, адреса, спосіб доставки), але потім змінював кількість товару або редагував замовлення, усі введені дані зникали після повернення до форми. Це збільшує час оформлення і часто призводить до відмови від покупки.

Автозаповнення даних

Згідно з даними нашого аналізу, приблизно 29% відвідувачів сайту партнера повертаються для повторних покупок. Проте кожного разу їм доводилося заповнювати форму для оформлення замовлення вручну. 

Пошук

Пошук — це точка входу для кожного четвертого користувача. За даними Google Analytics, 25,4% відвідувачів сайту АТБ починають саме з нього. Але ми виявили два UX-бар’єри, які знижують конверсію вже на цьому етапі: 

• неможливість повернутися до переглянутого;
• відсутність гнучкості при додаванні товару до кошика. 

Показ переглянутих товарів у результатах пошуку

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

Доступ до редагування

Згідно з даними Hotjar, на початку сесії відвідувачі додають товари в кошик через пошук, а потім коригують їхню кількість у кошику, оскільки не можуть зробити це одразу. Це зайві дії, які часто призводять до зупинки процесу.

Результати та бізнес-інсайти

Під час UX-аудиту команда Netpeak Ukraine визначила точки росту і ключові аспекти, що впливають на взаємодію користувачів із сайтом АТБ.

1. Взаємодія з кошиком і оформлення покупки.

Відвідувачі стикалися з незручністю, коли потрібно гортати сторінку кошика для перегляду загальної суми і кнопки «Оформити замовлення». Це призводить до втрати концентрації та відмови від покупки.

Під час створення замовлення відвідувачі часто редагують товари. У разі повернення назад контактна форма очищувалася, і дані доводилося вводити повторно, що ускладнювало процес.

2. Пошукові функції, що створюють труднощі.

Під час введення назви товару в поле пошуку система не пропонувала варіанти у випадаючому списку без кліку на кнопку «Пошук» — це створювало враження відсутності товару. 

Фільтри застосовувалися автоматично, але це не додавало впевненості у збереженні змін. У такому випадку треба додати кнопку «Застосувати» для підтвердження.

3. Покинуті товари й незавершені покупки.

Якщо користувач додав товари до кошика, але залишив сайт, є вірогідність, що він про них забуде. Через відсутність блоку «Збережені товари» на головній сторінці або в кошику сайту партнера нічого не нагадувало про незавершене замовлення. 

Також брак опцій cross-sell у кошику зменшував ймовірність додавання супутніх товарів перед оформленням покупки.

4. Помилки навігації.

На мобільній версії відвідувачі часто натискали на іконку «Головна», навіть перебуваючи на основній сторінці. Це вказує на недостатньо виразний активний стан меню і спричиняє плутанину.

Деякі кнопки, як-от «Докладніше», не вказували на конкретну дію, знижуючи залученість покупців.

Відгуки про співпрацю

Олександр Фролов, керівник інтернет-магазину АТБ-Маркет