Найбільші розчарування користувачів в e-commerce — та як їх виправити

Всім привіт. Мене звати Настя Наумець, я UX-дизайнерка в Astound Commerce. У цій статті я розповім про найбільші розчарування користувачів в e-commerce, а саме:

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

та поділюся практичними порадами про те, як їх виправити. В основу підбірки лягли приклади з власного досвіду, а також зі звітів та досліджень Nielsen Norman Group іBaymard Institute.

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

Вступ до розчарувань

Оскільки причиною більшості розчарувань є порушення принципів юзабіліті, матеріал буде корисним усім UX-дизайнерам, незалежно від індустрії (більше про самі принципи можна дізнатись зі статей 10 Usability Heuristics by J. Nielsen та Principles of Interaction Design by B. Tognazzini).

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

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

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

№ 1. Тривале завантаження

Ніхто не любить чекати. 70% користувачів визнають, що в них зникає бажання купувати товари на сайті, сторінки якого довго завантажуються (джерело: Unbounce).

До того ж згідно зі статистикою Akamai study report, 47% користувачів вважають прийнятною швидкість сторінки не більше 2 секунд. В той час, як при умові завантаження протягом 3 секунд і більше, 40% користувачів покинуть сайт.

Є багато сервісів, що допомагають визначити швидкість завантаження сторінки, а також пропонують базові рекомендації з оптимізації, наприклад: PageSpeed Insights, Test my site, WebPageTest. Для глибшого аналізу знадобиться Site Speed репорт в Google Analytics або в одному з його аналогів.

Однак, навіть при дотриманні усіх технічних рекомендацій, потрібно пам’ятати про повільний мобільний інтернет, застарілі девайси, залежність від інтеграцій зі сторонніми сервісами. Та навіть за цих умов, ми, як дизайнери, можемо вплинути на сприйняття очікування, тобто створити враження, що сторінка незабаром завантажиться. Для цього необхідно:

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

Наприклад, на сторінці списку товарів найпріоритетнішим є: головне меню, фільтри, сортування та картки товарів у верхній частині сторінки. Ці елементи повинні завантажуватися в першу чергу. Також користувач повинен отримати деякий зворотній зв’язок: «сайт ще завантажується, але ви вже можете почати переглядати сторінку.» З цією метою використовуємо індикатори прогресу: скелетон, спіннер, лінійний індикатор. Розглянемо приклад з проєкту Astound Commerce:

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

№ 2 Незручна навігація

Працюючи з e-commerce сайтами ми часто виявляємо проблеми з організацією категорій в головному меню, а також непослідовністю навігаційних стежок («хлібних крихт»), що негативно впливає на здатність користувачів орієнтуватися на сайті.

Головне меню — найважливіший елемент навігації. Організація і найменування категорій головного меню повинні бути зрозумілими і доступними.

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

В головному меню на прикладі вище, товари розподілені по «колекціям», а не категоріям (permanent collection, rituals sets & collections, special editions). Така напрочуд суб’єктивна організаційна схема створює перешкоди для пошуку товарів, оскільки не усім користувачам очевидно, до якої колекції відноситься їх товар.

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

За такої кількості підкатегорій (29), а також за відсутності візуального групування та відступів між підгрупами, користувачі можуть бути дезорієнтовані та неспроможні знайти потрібні товари.

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

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

На цьому прикладі навігаційна стежка вказує неправильні поточну та батьківські сторінки (правильний варіант: Home / Lingerie / Lingerie Sets / «Set Title»). Додамо до цього відсутність заголовка товару і, як результат, користувач навряд зрозуміє, на якій саме сторінці знаходиться.

Для боротьби з незручною навігацією пропоную розглянути наступні рекомендації:

  1. Слідкувати за кількістю та вмістом категорій товарів: категорії 1-го рівня не повинні містити понад 10 підкатегорій; занадто малі категорії (що налічують 10-20 товарів) варто перегрупувати. У виняткових випадках допускається дублювання тих підкатегорій, які вписуються в декілька категорій 1-го рівня (більше про застосування поліієрархії можна почитати у статті Polyhierarchies Improve Findability for Ambiguous IA Categories). До того ж потрібно пам’ятати про очікування користувачів щодо структури головного меню. Для цього необхідно переглянути сайти з однієї вертикалі (наприклад, «одяг» або «косметика»).
  2. На прикладі нашого проєкта бачимо, що підкатегорія «PUMA x TMC» присутня в категоріях «New Arrivals» та «Collaborations». Оскільки дана підкатегорія продубльована, користувачі з більшою ймовірністю зможуть її знайти.
  3. Слідкувати за консистентністю найменувань в меню і хлібних крихтах.
  4. Зображати ієрархічне відношення категорій у головному меню за допомогою візуальних засобів: стилів шрифту, відстаней, розмірів.
  5. Попри велику кількість категорій, головне меню можна легко просканувати завдяки візуальному групуванню, відмінностям у накресленні та розмірах шрифтів.
  6. Правильно показувати хлібні крихти: вони повинні вказувати шлях від головної до поточної сторінки і показуватися як послідовність посилань (крім поточної сторінки). На мобільних пристроях варто показувати лише посилання на батьківську сторінку.

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

Кіт Інстоун пропонує простий спосіб перевірки ефективності навігації — «Навігаційний стрес-тест». Його суть полягає в тому, що, опинившись на будь-якій сторінці сайту, користувачі повинні відповісти на запитання:

  • На якій ви сторінці?
  • Що це за сайт?
  • Що це за категорія товарів?
  • Звідки ви сюди прийшли?
  • Куди ви можете перейти?

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

№ 3. Перенавантажений список товарів

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

У категорії All Sale міститься 490 товарів, 361 з яких знаходяться на першій сторінці. Перегляд такого довгого списку може стомити користувачів.


На цій сторінці товарів користувач може дізнатися порядок сортування, тільки якщо клікне на випадний список «Sort», інакше значення не показується.


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

Щоб зробити перегляд товарів зручним, а користувачам забезпечити почуття комфорту на сторінці, необхідно дотримуватися наступних рекомендацій:

  1. Насамперед показувати загальну кількість товарів у даній категорії зверху списку. По-друге, показувати оптимальну кількість товарів на одній сторінці (50-150 — для великих екранів, 15-30 — для мобільних). Замість «нескінченного скрола» та пагінації, використовувати кнопку «Load More» — при натисканні завантажується наступна порція товарів. Згідно з юзабіліті-тестуванням Baymard Institute, цей підхід ефективний як на великих, так і на маленьких роздільних здатностях (resolutions).
  2. Щоб товари у списку було зручно порівнювати між собою, картки товарів повинні бути консистентними та містити лише необхідну інформацію: ціну, назву, зображення, рейтинг, варіації. Але, залежно від специфіки продуктів та потреб цільової аудиторії, допускаються винятки. Наприклад, на одному з наших проєктів для бренду товарів з консервації ми додали короткий опис розміру банки на картку товару, тому що не всі користувачі розуміють такі значення, як галон, кварта, пінта.
  3. Щоб у користувачів не виникало сумнівів щодо застосованих фільтрів та сортування, варто обов’язково показувати вибрані значення над списком товарів, а також оновлювати кількість результатів. До того ж необхідно надати можливість швидко і легко редагувати вибрані фільтри або очистити їх одним махом. Нижче зображено приклад одного з наших проєктів з урахуванням даних рекомендацій.

№ 4. Ускладнений чекаут

Чекаут — найбільш делікатна і важлива частина користувальницького шляху на e-commerce сайті. За даними численних досліджень, у середньому 70% відвідувачів залишають сайт в процесі чекауту. Найпоширеніші причини:

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

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

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



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

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

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

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

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


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



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

  • максимально спростити форму з особистою інформацією та адресою доставки;

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


Геотаргетинг дозволяє визначити країну

  • не показувати форму з платіжною адресою, пропонуючи користувачеві використовувати адресу доставки як платіжну;

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

  • звернути особливу увагу на дизайн форми банківської картки;

Зручний та інтуїтивний дизайн форми банківської картки повинен враховувати наступне: 1. Порядок полів відповідає порядку інформації на фізичній карті (номер, термін дії, код). 2. Номер картки вводиться з урахуванням пробілів (input mask). 3. Тип картки визначається автоматично. 4. Є пояснення, де знайти Security Code. Єдиний, неврахований тут момент — формат року має складатися із двох символів (YY), так само як і місяця (ММ).

№ 5. Негативний мобільний досвід

Всі вищезгадані рекомендації можуть застосовуватись незалежно від пристрою або розміру екрана. Але, оскільки значна кількість користувачів робить покупки з телефонів, хочу виділити кілька mobile-only проблем, які можуть бути виправлені при мінімумі зусиль:

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

Користувачі не зможуть влучити у кнопку пальцем, якщо область натискання надто маленька або відстані між тапабельними елементами недостатні.

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

Дослідники з Baymard Institute радять робити область натискання, як мінімум, розміром 7×7 мм (за рекомендаціями NNG — 1×1 см), а також мінімальну відстань між елементами — 2 мм. Щоб перевести міліметри у пікселі, можна знайти значення PPI (pixel density) для конкретної моделі телефону та скористатись конвертером.

Наприклад, iPhone 11 Pro має 458 PPI. Для iPhone 11 Pro 1 мм ~ 18 px, тобто мінімальна область натискання в пікселях — 126×126 px.

Наприклад, кнопки Size у прикладі вище ~ 12.3 мм у ширину та ~6.6 мм у висоту, у той час, як область для натискання ~ 13.2 мм у ширину та ~7.6 мм у висоту (другий скріншот). Користувачам буде легко та зручно з такими елементами, а завдяки достатній відстані можна уникнути випадкових натискань.

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

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

Інформація про нову колекцію з 4-го слайду каруселі повторюється на сторінці списку товарів.

  • карусель повинна мати візуальні індикатори: крапки, стрілки або частково видимий останній елемент («ілюзія продовження»);
  • користувачі повинні мати можливість керувати каруселлю за допомогою свайпа.

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

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

Як видно з прикладів вище: для поля City відкривається звичайна текстова клавіатура, тоді як для поля ел. пошти — клавіатура зі знаком @.

Для полів Phone Number & Postal Code — цифрова клавіатура

№ 6. Вебнедоступність

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

Відповідно до World report on disability, 3.2% всього населення мають проблеми із зором, 6% — мають слухові порушення та 2.6% — когнітивні. Таким чином, людям, які використовують допоміжні технології, як-от екранне зчитування або розпізнавання мови, буде важко орієнтуватися і переміщуватися по сайту при неправильній розмітці контенту. Навігація стає доступною за наступних умов (джерело — W3C WAI):

  • заголовки організовані в ієрархічному порядку та позначені відповідними тегами;
  • доступні кілька способів навігації (посилання в меню або заголовки);
  • доступна інформація про поточне місцеперебування (хлібні крихти);
  • блоки повторюваного контенту можна обійти («Skip to main content» посилання);
  • індикатор фокуса видимий та порядок його переміщення послідовний;
  • зміст посилань очевидний поза контекстом.

Крім того, вебдоступність корисна для всіх користувачів без винятку, оскільки кожна людина час від часу зазнає тимчасових обмежень. Наприклад, ви переглядаєте сайт з телефону під яскравим сонцем і не бачите текст зі слабким контрастом (обмеження зору); у колеги стався перелом руки і він змушений користуватися тільки лівою під час роботи за комп’ютером (рухове обмеження); інший колега знаходиться у шумному офісі та забув навушники вдома (слухове обмеження).

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

  1. Види фізичних та когнітивних обмежень, а також пристрої та технології, якими користуються люди з обмеженими можливостями — ця тема добре розкрита у безкоштовному курсі «Introduction to Web Accessibility» від edX.
  2. Принципи вебдоступності, описані на сайті W3C Web Accessibility Initiative (WAI).
  3. Стандарти та гайдлайни: Web content accessibility guidelines (WCAG), а також довідник, що дозволяє кастомізувати список вимог під потрібний рівень: How to meet WCAG.
  4. Державні вимоги до вебдоступності: W3C WAI: Web Accessibility Laws & Policies.
  5. Вигода вебдоступності з точки зору бізнесу: The Business Case for Digital Accessibility.
  6. Хто відповідальний за вебдоступність у команді: Accessibility Responsibility Breakdown.
  7. Швидка перевірка на вебдоступність: Easy Checks — A First Review of Web Accessibility, Tips for getting started, WebAIM Color Contrast Checker — перевірка контрасту для різних розмірів тексту.

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

Дякую колегам Анастасії Самсоненко та Івану Пахарю за допомогу з перекладом статті українською мовою.

Сподобалась стаття? Натискай «Подобається» внизу. Це допоможе автору виграти подарунок у програмі #ПишуНаDOU

👍ПодобаєтьсяСподобалось10
До обраногоВ обраному8
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

побачив скрін з проекту — на якому працював, коли був в Астаунді.. всплакнув )))

Надіюся, всплакнув від гарних спогадів 😀

Дійсно, краще пам’ятати лише гарне ))) Ось вам чудова байка з особистого життя!
Коли тільки почав працювати в Астаунді, після онбоардінгу попав на проект магазину, де продають брендову дорогоу жіночу білизну (там вище є приклади, ггг ), й саме мені прилетіла таска, де є бага на фронті яка вилазе лише коли білизна розміру DD+, — тобто це розмір рівня шановної пані Р.Писанки )))
Так от, особистого кабінету у хаті в мене ще немає, то ж сиджу я, працюю віддалено з цими клятими картинками на продакт ліст пейдж, бажину фіксю, а тим часом у іншому кутку приміщення теща прасує купу білизни на всю сім’ю.. прасує та мовчить, прасує та мовчить..
А ввечері мені жінка сказала що мамо поскаржилася, що я не працюю на новій роботі — а цілий день таращився у інтернеті на товстих майже голих баб, збочинець клятий, хоч би таксувати пішов, бєстолочь )))

Прекрасно розумію, теж працювала на цьому проєкті ))

Підписатись на коментарі