НАПИСАТИ НАМ
30
.
03
.
2020

7 юзабіліті-помилок у eCommerce, які заважають купити

ЗМІСТ

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

 

Українські онлайн-шопери у 49% випадків оформляють замовлення зі смартфона, використовуючи мобільну версію сайту. Далеко не всі перейшли у додатки.

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

Помилка №1. Неточні кліки

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

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

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

 

Описуючи це спостереження, я звернув увагу на кілька популярних інтернет-магазинів і спробував передати момент торкання жіночого і чоловічого пальця по екрану:

oshibki_yuzabiliti_nyetochnost'_klikov

avtozvuk.ua - використання сайту однією рукою,

вибір пункту меню великим пальцем

avtozvuk.ua - використання сайту двома руками,

вибір пункту меню вказівним пальцем

yuzabiliti_sayta_klik_odnoy_i_dvumya_rukami

eldorado.ua - використання сайту двома руками,

вибір пункту меню вказівним пальцем

eldorado.ua - використання сайту однією рукою,

вибір пункту меню великим пальцем

Помилка №2. Пошук не дає релевантну підказку

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

Пошукова підказка з автозаповненням може як наблизити користувача до замовлення, так і збити з пантелику. Наприклад, якщо ви шукаєте крем для рук на сайті eva.ua і вводите запит «крем» або «крем для», то підказка не пропонує на вибір категорії товарів, а показує кілька товарів з 1 000 позицій. Уточнюючи запит на «крем для рук», підказка знову пропонує кілька товарів, але вже з 504 позицій.

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

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

tipovyiye-oshibki-yuzabiliti-v-intyerfyeysye
Приклад запиту на eva.ua. Приклад запиту на watsons.ua

Кілька порад по візуальній складовій підказки:

• показуйте пошук і підказки на весь екран (в мобільній версії);

• гуртуйте результати в підказці (товари, категорії, властивості);

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

• уникайте прокрутки в версії для ПК;

• дайте можливість швидко очистити поле з пошуковим запитом.

Помилка №3. Пошук не видає результати при альтернативних запитах

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

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

yuzabiliti_primyeryi_al'tyernativnyiye-zaprosyi-v-poiskye
Приклад запиту «батареї» на сайті nl.ua Приклад запиту «радіатори» на сайті nl.ua


Інший приклад: шукаємо дитячі підгузки, використовуючи назву «памперси».

yuzabiliti-ryekomyendacii_vyidacha-ryezul'tatov-poiska
Приклад запиту «памперси» на сайті prostor.ua.  Приклад запиту «підгузники» на сайті prostor.ua

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

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

Помилка №4. Немає можливості відфільтрувати результати пошуку

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

Приклад запиту «ноутбуки» на сайті allo.ua. Користувач відразу переходить в потрібну категорію і працює з фільтрами.

image3

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

Приклад запиту «ноутбуки» на сайті eldorado.ua. При повній відповідності запита назві категорії, користувач не має можливості фільтрувати товари. Навіть після вибору запропонованої категорії, фільтрація не з'являється.

povyishyeniye-yuzabiliti_nyeudachnyiy-primyer-fil'tracii_1

Приклад запиту «ноутбуки» на сайті citrus.ua. При повній відповідності запита назві категорії, користувач не має можливості фільтрувати товари за їх атрибутами. Після натискання на чекбокс з запропонованою категорією нічого не відбувається, а закриття вікна повертає користувача на сторінку без змін.

povyishyeniye-yuzabiliti_nyeudachnyiy-primyer-fil'tracii_2

Помилка №5. Не відображаються застосовані фільтри

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

Кейс 1: Ви гуглите «пилососи для алергіків» або подібну комбінацію «категорія + призначення», «категорія + бренд», і переходите на сайт. Як правило, з метою пошукової оптимізації, перехід за такими запитами реалізується через включення фільтрів на сторінці категорії.

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

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

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

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

uluchshyeniye-yuzabiliti_otobrazhyeniye-primyenyennyih-fil'trov

Другий приклад: stylus.ua — застосовані фільтри не відображаються, а для скасування хоча б одного необхідно зробити ряд додаткових дій.

primyenyennyiye-v-poiskye-fil'tryi-nye-otobrazhayutsya

Вирішити цю проблему можна мінімум двома способами:

• відобразити застосовані фільтри в хлібних крихтах;

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

yuzabiliti-ryekomyendacii_otobrazhyeniye-primyenyennyih-fil'trov

Незалежно від способу реалізації, робота з відфільтрованим списком повинна відповідати наступним критеріям:

Підтвердження. Даємо користувачеві зрозуміти, що обрані ним фільтри дійсно застосовані.

Контекст. Показуємо, за якими параметрами фільтрується поточний список товарів.

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

Помилка №6. Неточні назви для фільтрів товарів

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

Перший приклад: foxtrot.ua — галузеві фільтри при виборі праски можуть бути не зрозумілі.

otraslyevyiye-fil'tryi

Другий приклад: watsons.ua — фільтри з назвами спецпропозицій «K-BEAUTY» також можуть бути не зрозумілі.

nyetochnyiye-nazvaniya-dlya-fil'trov-tovarov_primyer-2

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

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

сoolblue.nl — вдалий приклад пояснення галузевих фільтрів в мобільній версії сайту.

podskazka-s-poyasnyeniyem-fil'tra

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

Помилка №7. Взаємовиключаючі фільтри

Всупереч очікуванням користувачів багато інтернет-магазини реалізують застосування фільтрів по взаємовиключих умовах, за логікою «або/або». Серед популярних українських сайтів проблема має точковий характер, але її наявність може бути причиною високого показника відмов.

45% користувачів намагаються застосовувати більше одного значення фільтра одного і того ж типу. Наприклад: колір «синій» і «жовтий»..

Давайте розглянемо реальні приклади. Припустимо, ви вибираєте шуруповерт в інтернет-магазині Leroy Merlin. Перейшовши до відповідної категорії, ви хочете відфільтрувати список товарів по декільком брендам. Вибравши одного з виробників, ви вже не зможете обрати інших і будете змушені вивчати товари різних брендів окремо.

vzaimoisklyuchayuschiye_fil'tryi

Сайт rabota.ua — робота з фільтром «тип зайнятості» доставляє незручності, не дозволяючи шукати вакансії у двох форматах одночасно.

image20

Підсумуємо

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

В закладки

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

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

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