НАПИСАТИ НАМ
26
.
06
.
2020

Юзабіліті чекауту: аналіз топових українських інтернет-магазинів

Дмитро Яценко
UX-дизайнер
ЗМІСТ

Наші UX-фахівці продовжують ділитися інсайтами. Цього разу Дмитро Яценко сфокусувався на найсуперечливішому місці багатьох українських інтернет-магазинів - чекауті або сторінці оформлення замовлення. Як і в першій статті з циклу — 7 юзабіліті-помилок в eCommerce, зберегли акцент на мобільних пристроях.

Покинутий кошик: хто винен і як виправити

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


Ми неодноразово стикалися з історіями користувачів, де кошик використовувався як тимчасовий інструмент для збереження посилань на товари, вивчення варіантів, порівняння продуктів. І це абсолютно нормальна модель поведінки. Такий паттерн легко накладається на офлайн-магазини, куди багато відвідувачів приходять познайомитися з асортиментом, потримати в руках нову модель або отримати консультацію, але зовсім не за покупкою. Який відсоток кинутих кошиків вважається допустимим, а коли потрібно бити на сполох?

Згідно кількісного аналізу Promodo українського eCommerce ринку у 2019, середні показники мобільного сегменту виглядають так:
- 25% ористувачів не показують активність щодо вибору товару;
- 93% не додають товари в кошик;
- 45% залишають кошик і не переходять до оформлення замовлення;
- 58% переходять до оформлення замовлення, але не закінчують його.

Щоб реально оцінити проблему з покинутим кошиком, спочатку користувачеві потрібно дати інструменти, які допоможуть закрити його завдання при роботі з каталогом товарів. Основна мета таких сторінок — ознайомлення з асортиментом і вибір відповідного товару. У вашого користувача достатньо інформації для ухвалення рішення про покупку на цьому етапі?

yuzabiliti-stranicyi-s-katyegoriyami_chto-dolzhno-na-nyey-byit'

Наприклад, йому буде достатньо побачити ось такий список товарів у вигляді звичних плиток? У випадку з умовно простими і недорогими товарами (напої, продукти, господарські товари) — швидше за все, так. Якщо це повернувся користувач, який вже відвідував сторінки товарів, але потім знову повернувся в каталог — теж так. А ось якщо користувач вперше зайшов в каталог пральних машин, навряд чи додавання до кошика або миттєва покупка буде однією з ваших пріоритетних задач.  

katalog-tovarov_yuzabiliti
moyo.ua – замість/або  у доповнення до кнопки купити доречно надити функціонал для додавання товару в обране або для порівняння

Спробуйте на сторінках категорій, товари на яких мають складні характеристики або високу ціну, замість CTA «Купити» прописати «Детальніше», або замінити на додавання в обране і для порівняння. Закликом до переходу на сторінку з більш детальною інформацією про товар може служити заголовок і фотографія.


Наприклад, walmart.com для категорії столів і холодильників не виводить на плитках товару кнопку «Купити» — і це цілком зрозуміло. Розмір самої плитки накладає обмеження  кількості інформації, що відображається, яка потрібна для рішення про додавання товару у кошик. Отже, замість кнопки із закликом «У кошик» вони розмістили інформацію, яка допомагає зацікавити користувача у вивченні товару (варіантів кольору, best seller, free delivery, free pickup).

Інший ритейлер, Argos.co.uk, надає своїм покупцям відразу три інструменти для кожної плитки товара:

• докладніше (перехід на сторінку товару з якорем на характеристики);

• додати в обране (wishlist);

• обрати опцію (перехід на сторінку товару, де можна вибрати модифікацію).

pravil'naya-cta-v-intyernyet-magazinye
walmart.com, argos.co.uk

Виділяємо переглянутий, доданий у кошик товар

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

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

yuzabiliti_prosmotryennyih-stranic-tovarov
comfy.ua - перший товар був доданий в кошик, у другому - переглянута сторінка товару, але при поверненні у каталог товари ніяк не позначені. сomfy.ua - товар №1 лежить у кошику. На сторінці каталогу (скрін зліва) товар не позначений як той, який вже додано в кошик
otrazhyeniye-tovarov-iz-korzinyi-v-katalogye
еva.ua - відображення товарів, вже доданих до кошика, у каталозі ніяк не відрізняється від інших

За результатами тесту інституту юзабіліті Baymard, де учасникам потрібно було замовити на сайті більше одного товару, користувачі після додавання продукту в кошик, часто поверталися назад до списків товарів. Швидше за все, в українських інтернет-магазинах, патерн поведінки користувача такий самий. Ми виділили три основні проблеми, з якими зустрічаються користувачі, повертаючись в каталог після додавання товару в кошик:


• користувачі відкривали сторінки непотрібних товарів, які вже були переглянуті і їм не підійшли;

• не розуміючи, чи доданий товар до кошика, користувачі знову натискали купити, тим самим несвідомо збільшували кількість товарів в замовленні;

• щоб дізнатися, чи доданий  товар до кошика, користувачі спеціально переходили до кошика, іноді роблячи це у новій вкладці.

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

sta_na_knopkye

Раджу починати роботи по поліпшенню інтерфейсу кошика і чекаута тільки після того, як ви вірно направите користувача відповідно до його задач. У такому випадку ви отримаєте  коректні дані про покинуті кошики і не будете губитися в здогадках, на якому саме етапі користувач залишає сайт.

Авторизація у чекауті — скасувати не можна залишити

37% користувачів відмовляються від оформлення замовлення через необхідність створити обліковий запис, а 18% з усіх, хто вже має обліковий запис, часто забувають пароль і стикаються з проблемою скидання по email. Як правило, листи не приходять відразу ж, не приходять взагалі, або потрапляють в спам.

avtorizaciya-v-chyekautye
sportmaster.ua - після переходу з кошика до оформлення замовлення, магазин акцентує увагу користувача на авторизації. У паролі необхідно використовувати букви і цифри. Немає можливості авторизуватися за допомогою соцмереж.

Що я рекомендую зробити:


• Дати користувачу явну можливість оформлення замовлення без авторизації.

• Якщо при оформленні замовлення неавторизований користувач вказує дані існуючого облікового запису, повідомляти про це. Можливо, авторизація дозволить йому скористатися накопиченими бонусами раніше.

• Знизити вимоги до складності пароля (якщо в ЛК не зберігаються дані про кредитні картки або інші корисні відомості) до 6 символів, без вимог до спецсимволів.

• Не згадувати про реєстрацію в чекауті, пропонувати зробити це на сторінці «Спасибі за замовлення».

І знову про великі форми і багато полів для заповнення

Проблемі великих форм і коректності відпрацювання полів присвячено безліч публікацій, але вона досі актуальна для українського eCommerce. Великі форми на сторінці оформлення замовлення є причиною покинутого кошика у 21% випадків. Зокрема, кількість полів сайту корелює із загальною конверсією. Тобто, чим менше полів у формах, тим вище ймовірність, що у сайту буде гарна загальна продуктивність.

Відображуйте поля, виходячи з конкретного завдання

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


Хороше рішення показує сайт flowwow.com, розділяючи форми за вкладками, що спочатку виключає повторне внесення однакових даних. У самій формі є детальні пояснення про час доставки, а також цікава опція «Не знаю адреси». Вибравши цю опцію, користувачеві не потрібно вносити додаткові дані, з ним зв'яжеться менеджер і з'ясує всі подробиці доставки.

stranica-oformlyeniya-zakaza_polya-dlya-zapolnyeniya
flowers.ua - в чекауті відображені дві форми. Обидві мають обов'язкові поля, змушуючи вводити дані двічі у разі, якщо замовник і отримувач -— одна людина. flowwow.com - чекаут сайту розділений вкладками для виключення непотрібних дій

Другий не найвдаліший приклад — чекаут сайту answear.ua. Тут користувачеві відразу пропонують вказати фактичну адресу проживання та заповнити ще 10 полів, з яких 7 обов'язкових, а на наступному кроці — обрати спосіб доставки. У разі, якщо користувач вибере доставку на відділення Нова пошта, стає незрозуміло, навіщо тоді він до цього вводив свою адресу.

vyibor-sposoba-dostavki-v-korzinye_-obyazatyel'nyiye-polya

Використовуйте одне поле «Повне ім'я». Заповнюючи поля чекаута, 42% користувачів вводять своє повне ім'я в рядок «Ім'я», а після переходу до поля «Прізвище» або «По батькові», помічають помилку і повертаються назад для виправлення. Очевидно, що використання одного поля для повного імені може прискорити оформлення замовлення.

polya_s_imyenyem_i_familiyey_v_chyekautye

«Акордеон» чекауту: розділяємо на кроки

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

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

• у згорнутому кроці може не відображатися інформація, яка була внесена;

• при натисканні на кнопку «Назад» у браузері або на системну кнопку «Назад» у смартфоні, користувач повертається не на попередній крок, а на попередню сторінку (у разі AJAX акордеона).

makeup_akkordyeon_v_chyekautye
makeup.ua - перебуваючи на другому кроці не відразу зрозуміло, яка інформація збереглася на першому кроці, і як її можна відредагувати
allo_akkordyeon_v_chyekautye
allo.ua - узагальнена контактна інформація на першому кроці, а також кнопка «Змінити» ясно дає зрозуміти, що інформацію можна виправити

Що я рекомендую зробити:

• Анімувати «акордеон» при переході на наступний крок.

• Відображати узагальнену інформацію і кнопки для її редагування.

• Налаштувати поведінку кнопки «Назад» у браузері або смартфоні відповідно до очікувань користувача: кнопка повинна повертати його до попереднього кроку (навіть якщо технічно, це та ж сторінка). Це може бути зроблено за допомогою API-історії HTML5. Функція history.pushState () дозволяє сайту викликати зміну URL-адреси без перезавантаження сторінки.

Зручна взаємодія з полями у чекауті

Виконуйте валідацію. Заповнюючи поля чекауту з клавіатури смартфона, багато користувачів допускають звичайні і друкарські помилки. І тут зовсім не рятують інтелектуальні методи введення. Щоб користувачі вводили інформацію у потрібному форматі, недостатньо відображати тільки приклад. Крім використання маски введення, виконуйте валідацію полів при переході до кожного наступного кроку і пропонуйте користувачеві цифрову клавіатуру. Особливо, якщо передбачається введення номера телефону або інформації про кредитну картку. Налаштуйте маску так, щоб клієнту не потрібно було вводити важкодоступні на клавіатурі смартфона символи: тире, дужки і так далі.

stranica-oformlyeniya-zakaza_maski-vvoda

shiny-diski.com.ua - у полі «телефон» немає маски введення, клавіатура відображається в режимі введення літер і цифр, а при переході з поля в полі не відбувається валідація. У ряді випадків це призведе до блокування підтвердження замовлення infoshina.com.ua - у полі «телефон» пропонується цифрова клавіатура і приклад введення, але самої маски немає, можна вводити будь-які символи. При переході в інше поле відбувається валідація, це дозволяє виправляти помилки тут і зараз, не повертаючись назад

Відзначайте обов'язкові і необов'язкові поля. Користувачеві не завжди зрозуміло, які поля є обов'язковими для заповнення. Як показало тестування форм чекауту, 32% користувачів пропускають поля, не зазначені як обов'язкові, і зустрічаються з помилкою. Також тест виявив, що маркування обов'язкових полів зірочкою достатньо, якщо інші поля позначені як необов'язкові.


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

prokrutka_k_propuschyennyim_polyam_v_chyekautye_kasta

kasta.ua - якщо користувач пропустив обов'язкове поле і опустився вниз сторінки, то він не побачить вимоги про обов'язкове заповнення
prokrutka_k_propuschyennyim_polyam_v_chyekautye_bonprix
вonprix.ua - чекаут сайту валідіє поля тут і зараз. Якщо користувач пропустив обов'язкове поле, при підтвердженні замовлення станеться автопрокрутка до нього

Прибирайте посилання, що ведуть користувача з сайту. Посилання, що ведуть користувача зі шляху оформлення замовлення, зустрічаються в половині інтернет-магазинів, для яких ми проводимо аудит. Найчастіше вони ведуть користувача на:

  • Сторінки категорій і товарів, що пояснюється наявністю повноцінної навігації і пошуку товарів в хедері чекаута.
  • Інформаційні сторінки: доставка, оплата, контакти, оферта, що пояснювалося наявністю цих посилань у футері. Багато випадків, коли ці посилання відкривалися в тій же вкладці браузеру.
  • Сторінки авторизації або особистого кабінету, при авторизації в чекауті, замість авто-заповнення особистих даних, відбувався редирект в призначений для користувача кабінет.

Перехід на інші сторінки - це завжди велика ймовірність, що частина користувачів вже не повернеться до оформлення замовлення, а ті, хто повернуться, можуть зіткнутися з повторним введенням інформації.

uvodyaschiye-ssyilki-v-korzinye

Чекаут інтернет-магазину sribnakraina.ua пропонує підписатися на розсилку, а також дає можливість повернутися в каталог товарів і на інші сторінки з футера. Це може відвернути користувача від цільової дії і бути причиною виходу зі шляху покупки.


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

Резюмуємо

Список проблем чекауту, описаний у статті, не обмежується тільки цими спостереженнями, і в моїй практиці він значно довший. Але саме процес оформлення замовлення є найвужчим місцем у воронці більшості eCommerce-проектів, а юзабіліті чекауту в мобільному вигляді може і зовсім бути блокуючим фактором.

Великі форми та некоректна робота полів на сторінці оформлення замовлення - основна перешкода для здійснення покупки.

Оформлення замовлення завжди має супроводжуватися можливістю це зробити без авторизації.

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

Високий показник покинутих кошиків не завжди говорить про поганий інтерфейс кошика, але може говорити про інтерфейс каталогу. Достовірність даних може бути спотворена тим, що кнопка «Додати до кошику» передчасна, або ж користувачам необхідний додатковий функціонал.

В закладки

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

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

Обговоримо ваш проєкт?
Надіслати заявку
Ваше повідомлення відправлено
Наш менеджер зв‘яжеться з вами найближчим часом.
Назад
Упс! Щось пішло не так. Спробуйте ще раз
ДОЛУЧАЙСЯ ДО
КОМАНДИ PROMODO ❤️
Надіслати заявку
Ваше повідомлення відправлено
Наш менеджер зв‘яжеться з вами найближчим часом.
Назад
Упс! Щось пішло не так. Спробуйте ще раз