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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

‍

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Резюмуємо

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

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

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

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

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