Погодьтеся, є щось захопливе в тому, щоб після внесення навіть незначних змін у дизайн інтернет-магазину спостерігати за зростанням коефіцієнта конверсії. Це майже як гра, де ви повинні визначити, на які кнопки натискати, аби заробити ще більше очок.
Але із кількома випадковими змінами далеко не зайдеш. Після таких експериментів можна отримати як зростання кількості замовлень, так і падіння. Хочете продовжити збирати очки – підходьте до процесу стратегічно.
У цьому матеріалі разом з Антоном Чеботаренком та Ігорем Степурою, UX/UI дизайнерами Promodo, ми дослідили, як вимірювати коефіцієнт конверсії інтернет-магазину, назвали ключові метрики, на які впливає CRO, і розглянули 10 практик, які покращують юзабіліті сайту і збільшують продажі.
Що таке CRO?
Оптимізація коефіцієнта конверсії (CRO, Conversion Rate Optimization) – це практика з підвищення відсотка відвідувачів, які виконали конкретну дію на сайт: клік, покупка, підписка, створення облікового запису, заповнення анкетної форми тощо.
CRO проводиться на основі даних, отриманих за допомогою аналітичних інструментів: Google Analytics, Google Tag Manager, Hotjar, Vebvisor тощо. На їх основі фахівці з UX формують гіпотези та перевіряють їх шляхом A/B-тестування.
A/B-тестування – це процес порівняння двох версій вебсторінки, щоб побачити, яка з них працює краще з точки зору коефіцієнта конверсії.
«Перед початком таких робіт бізнесу насамперед варто визначити пріоритетність своїх бізнес-цілей. Адже CRO – це не гра у випадковість, а розв’язання конкретної проблеми вашого сайту. І цей процес ніколи не припиняється», – Ігор Степура, UX/UI дизайнер.
Як розрахувати коефіцієнт конверсії інтернет-магазину
Щоб розрахувати коефіцієнт конверсії, розділіть кількість конверсій (ключових дій) на загальну кількість відвідувачів, а потім помножте на 100, щоб отримати дані у відсотковому значенні.
Що таке хороший рівень конверсії інтернет-магазину
Неможливо однозначно виділити хороший або поганий рівень конверсії, навіть якщо магазини реалізують однотипні товари. Наприклад, один магазин продає косметику сегмента люкс і має коефіцієнт конверсії сайту 10%. А другий магазин продає косметику рівня мас-маркет і має 1%. Може здатися, що перший магазин у виграші, але тут включається проста математика.
Нехай у першого магазину середній чек складає 2000 грн і трафік 2000 відвідувачів за місяць, тоді його дохід:
2000 х 0,1 х 2000 = 400 000 грн/міс.
Другий магазин має середній чек 550 грн і 100 000 відвідувачів за місяць. Його дохід складе:
100 000 х 0,01 х 550 = 550 000 грн/міс.
Ось ми й бачимо, що конверсія в 1% принесла другому магазину більше доходу, ніж конверсія у 10% першому.
Тож, як казав засновник ConversionXL Піп Лай: «Хороший коефіцієнт конверсії – це коли він кращий за той, який ви мали минулого місяця».
Що таке юзабіліті вебсайту та як воно пов’язане із CRO?
Бренди, які мають схожі продукти/послуги на конкурентному ринку, часто намагаються вирізнитися з-поміж конкурентів. Тож зосереджуються на естетиці дизайну, а не на практичності сайту. Проте нерозуміння користувача, де на сайті знайти кнопку «Купити» або «Пошук», призводить до втрати прибутку та негативного сприйняття бренду загалом.
Що з цього приводу говорить статистика?
1. Згідно з останніми даними Інституту Беймарда, майже 70% користувачів залишають сайт, так і не завершивши покупки.
2. Якщо у вас нефункціональний дизайн або макет сайту, приблизно 38% просто закривають його.
3. 57% кажуть, що вони не будуть рекомендувати компанію з неоптимізованим для телефонів сайтом.
4. 88% онлайн-споживачів навряд чи повернуться, якщо у них буде поганий досвід користування сайтом.
Основна мета юзабіліті-дизайну – забезпечити відвідувачам можливість швидко й інтуїтивно прокручувати ваш сайт, щоб знайти потрібну інформацію, а також оцінити user friendly ресурсу на різних пристроях. А CRO допомагає ухвалювати найкращі рішення щодо вебсайту і продукту у майбутньому.
«Запропонувавши гіпотези з покращення вебресурсу, ми можемо підтвердити або спростувати їх за допомогою тестування. Наприклад, усім відомий часовий таймер, який створює ефект терміновості, кілька років тому мав шалений CR. Проте сьогодні такого вже не буде, користувачі звикли до нього», – Ігор Степура, UX/UI дизайнер.
10 найкращих практик для оптимізації коефіцієнта конверсії за допомогою юзабіліті
Адаптуйте сайт під мобільні пристрої
У другому кварталі 2022 року на мобільні пристрої припало 59% із загальносвітового трафіку на вебсайти. Адаптивний дизайн є однією з основ зручного для користувача сайту.
Запровадивши його, обов’язково зверніть увагу на такі елементи:
- Оптимізоване розташування кнопок. Відвідувачам потрібно відразу побачити кнопку зі CTA. Для користувачів мобільних пристроїв найкращою практикою CRO є розміщення кнопки зі CTA посередині екрана.
- Коректна робота AMP (Accelerated Mobile Pages) пришвидшує роботу мобільної версії. Крім того, Google підвищує видимість сайтів, які використовують цей фреймворк.
- Перевірте адаптивність свого дизайну до мобільних пристроїв за допомогою інструмента Google.
Тестуйте зручність вашого сайту
Наступним кроком є перевірка взаємодії користувача з вашим сайтом.
Проведіть тестування, щоб побачити, як респонденти взаємодіють із ресурсом і переміщуються ним. Це може допомогти визначити, де вони «губляться» та спростити їхній шлях.
Збільшуйте швидкість завантаження сайту
Коли ми говоримо про час завантаження, ми говоримо про секунди. Показуйте юзеру, що ви дійсно цінуєте його час.
Група Nielsen Norman розробила три основні часові обмеження для оптимізації завантаження сторінки:
• 0,1 секунди – вебсторінка миттєво завантажилась.
• 1 секунда – невелика затримка помітна для користувача, тому він відчує невеликий дискомфорт.
• 10 секунд – користувач дратується і швидко покидає сторінку. У результаті конверсія не відбулася.
Один із найкращих способів підвищити швидкість вашого сайту – переконатися, що всі ваші зображення мають належний розмір. Використовуйте для фотографій формат JPEG, для іконок – SVG, ілюстрацій – PNG. Також набуває популярності формат WebP, оскільки при аналогічній якості він «легший» за PNG і JPEG на 26% і 34% відповідно. Про це свідчать дослідження, проведені компанією Google.
Передбачайте cross-sale та up-sale можливості
Інструменти up-sell та cross-sale покликані збільшувати середній чек і кількість SKU в чеку за допомогою взаємодії з асортиментом магазину.
Up-sell – це спосіб підвищити середній чек покупки шляхом демонстрації вигоди й економії покупки. Тобто збільшення обсягу товару, порції, розміру, розширення функціонала тощо за невелику доплату для отримання очевидної вигоди. Наприклад, у магазині для рукоділля Carisma, вказавши ціну за менше і більше фасування бісеру, демонструється вигода від купівлі більшого.
Інший варіант up-sale – зробити доставлення безкоштовним від певної суми. Aliexpress, наприклад, додатково стимулює покупців додати товар до кошика, щоб отримати вигоду у вигляді безкоштовного доставлення.
Cross-sell направлений на збільшення кількості товарів у чеку. Варіантами cross-sale можуть бути комплементарні товари «Разом з цим купують», додаткові сервіси (наприклад, подовжена гарантія) або комплекти зі знижкою «Разом дешевше».
Додавати всі (як роблять Comfy чи Foxtrot) або тільки деякі, а можливо створити свій інструмент – вибір за вами. Але він має базуватися на розумінні запитів вашої аудиторії.
Забезпечуйте прогнозованість сервісу
Сервісний блок на сторінці товару не менш важливий, аніж блок з відгуками чи характеристиками товару. Інформація про способи доставлення й оплати, умови гарантії та повернення за рівних умов має вирішальне значення.
Недостатньо просто написати про наявність тієї чи іншої опції доставлення, навіть недостатньо написати, коли ви відправите товар. Ця інформація вже є звичною та не задовольнить запит користувача на прогнозованість. У результаті він піде на наступний крок (до чекауту) з надією знайти там цю інформацію. І коли не знайде (або знайде, проте ця інформація його не влаштує), він вийде зі сторінки чекауту, що збільшить bounce rate і знизить конверсію.
Варто прогнозувати час і вартість доставлення на основі трекінгу геолокації користувача. API поштових операторів можуть віддавати прогнози по своїй роботі, а вам залишиться лише додати у формулу час відправлення замовлення. Так ви зможете задовольнити запит користувача на прогнозованість і зменшити кількість виходів зі сторінки.
Надавайте альтернативу
Часто буває так, що користувач приходить на сторінку товару і розуміє, що цей варіант йому не підходить. Це може бути, коли людина потрапляє на сайт з платної реклами, або якщо користувач належить до «ресьорчерів» і для того, щоб прийняти рішення про покупку, йому треба побачити 3-4 схожих товари. Аби не відпускати такого клієнта у «вільне плавання», пропонуйте йому альтернативу. Такий прийом має назву wide-sale і покликаний монетизувати максимальну кількість трафіку.
Ритейлери використовуємо блок «Схожі товари» на продуктовій сторінці саме з цієї метою. Розміщення може варіюватися. Це не принциповий момент, проте він повинен бути.
А ось інший приклад wide-sale від Aliexpress, покликаний допомогти користувачу-ресьорчеру швидше знайти те, що він шукає. Якщо людина приходить на сторінку товару з каталогу, а потім повертається назад, інтерфейс підказує, що є товари, схожі на той, який вона щойно бачила, і пропонує переглянути їх.
Мінімізуйте кількість виходів зі сторінки оформлення замовлення
Здавалося б, останній крок у конверсійній воронці. Користувач максимально зацікавлений і сконцентрований на здійсненні покупки, і раптом маємо 30-40% виходів зі сторінки чекауту.
Звісно, треба аналізувати причини, і їх може бути багато. Але в трійку найпоширеніших проблем входять: незручний блок реєстрації, недосконалий опис сервісному блоці та зайві шляхи виходу.
Важливо зробити інтерфейс сторінки оформлення замовлення мінімалістичним, щоб користувач був сфокусований на єдиній дії.
«Зазвичай для цього ми прибираємо «хлібні крихти» й трансформуємо хедер і футер. Прибираємо з них усі посилання на розділи сайту. Натомість додаємо контактну інформацію, щоб у разі виникнення проблеми користувач мав змогу зателефонувати оператору», – Ігор Степура, UX/UI дизайнер.
Розгляньмо два варіанти хедеру на сайті Carisma: стандартний на всіх сторінках сайту і трансформований на сторінці чекауту.
Стандартний (на всіх сторінках):
Трансформований (на сторінці чекауту):
Реєструйте акаунт користувача без додаткових дій
Дослідження Nilsen Norman Group показують, що обовʼязкова реєстрація/авторизація на сторінці оформлення замовлення зменшує відсоток конверсії. Як для нових користувачів, які не хочуть реєструватися, так і для постійних, які можуть банально забути пароль.
Найпростішою рекомендацією з цього приводу є надання можливості «гостьової покупки», що дійсно знижує рівень виходів із чекауту і, відповідно, підвищує конверсію. Проте це не єдине можливе рішення, адже покупка без реєстрації не дасть можливості повною мірою взаємодіяти з таким користувачем як, наприклад, із постійним.
Частіше ми використовуємо інше рішення – автоматично створюємо особистий кабінет за номером телефону. Це дає змогу логінити людину в особистому кабінеті відразу після покупки. Ключовий плюс такого рішення – не потрібно запамʼятовувати пароль, адже достатньо ввести телефон і код підтвердження зі смс.
Взаємодійте з постійними користувачами
Користувачі, які повертаються за наступною покупкою, формують ядро лояльної аудиторії. Лояльна аудиторія формує direct traffic, який знижує СРА та має вищий показник конверсії. Основною точкою входу для таких користувачів є головна сторінка.
Для взаємодії з ними ми використовуємо низку додаткових інструментів:
1) персональні рекомендації на основі попередніх покупок або переглянутих товарів;
2) візуалізація наявних промокодів і програми лояльності;
3) відображення товарів, які були додані до списку бажань;
4) відображення товарів, які були додані до кошика.
Наприклад, ось такий вигляд має блок із товарами у кошику в магазині Telemart.
Окрему увагу варто приділяти особистому кабінету та зберігати там всю важливу інформацію для покупця. Наприклад, персональні дані, останні місця доставлення та платіжні дані в особистому кабінеті, які автоматично завантажуються в чекаут, значно пришвидшують оформлення замовлення. Також це створює позитивний користувацький досвід і зменшує відсоток виходів зі сторінки оформлення замовлення.
Проводьте A/B-тестування
Після побудови будь-яких CRO-гіпотез завжди проводьте A/B-тестування. Лише такий підхід дасть розуміння, чи зможуть запропоновані зміни вплинути на поведінку користувачів і мати коротко- або довгостроковий вплив на майбутні ключові дії.
«Важливо зауважити, що не варто вносити більше однієї незалежної зміни в тестування. Тобто, якщо ви зробили апдейт кошика і паралельно змінили ще якийсь непов’язаний із ним елемент, то результати на A/B-тесті будуть неоднозначними. Цей підхід більше впливає не на сприйняття користувачів, а на безпосередню статистичну значущість кінцевого результату A/B-тестування», – Ігор Степура, UX/UI дизайнер.
