02.10.26
Автор
Kirill Chistiakov
Інтернет магазин може мати сучасний дизайн, великий каталог і стабільний трафік, але все одно втрачати потенційні замовлення через проблеми в інтерфейсі.
Користувач не знаходить потрібний товар. Не розуміє різницю між варіантами. Не бачить термін доставки. Губиться у фільтрах. Не може нормально змінити кількість товарів у кошику. Зустрічає помилку під час оплати і не розуміє, чи було створене замовлення.
Кожна окрема проблема може здаватися незначною. Але разом вони створюють зайве навантаження на користувача і поступово знижують ймовірність покупки.
Саме для пошуку таких проблем проводиться UX аудит.
Ми підготували чекліст зі 190 пунктів, за яким можна самостійно пройти основні сценарії інтернет магазину та знайти потенційні проблеми у навігації, пошуку, каталозі, картках товарів, кошику, checkout, мобільній версії та інших частинах продукту.
Що таке аудит юзабіліті інтернет магазину
UX аудит це системна перевірка інтерфейсу та основних користувацьких сценаріїв. Його задача полягає не просто в тому, щоб знайти елементи, які виглядають незручно.
Потрібно зрозуміти, де користувачеві складно знайти товар, отримати необхідну інформацію, прийняти рішення або завершити покупку.
Повноцінний аудит може поєднувати експертний аналіз, продуктову аналітику, записи сесій, теплові карти, опитування та usability testing. Але навіть базова експертна перевірка за структурованим чеклістом може допомогти знайти значну кількість проблем.
Важливо лише пам’ятати, що чекліст не є універсальним законом. UX магазину електроніки, fashion магазину, супермаркету та B2B каталогу буде відрізнятися.
Тому кожен пункт потрібно оцінювати в контексті конкретного бізнесу та поведінки його користувачів.
1. Загальний UX та структура сайту
Почнемо з речей, які впливають практично на кожну сторінку магазину.
З першого екрану зрозуміло, що продає магазин.
Основна цінність магазину сформульована зрозуміло.
Ключові дії не потребують обов’язкової реєстрації.
Інтерфейс має чітку візуальну ієрархію.
Основний контент відокремлений від другорядного.
Рекламні банери не перекривають важливий контент.
Pop up вікна можна легко закрити.
Cookie banner не блокує критичні елементи інтерфейсу.
Клікабельні елементи візуально відрізняються від звичайного контенту.
Однакові компоненти поводяться однаково на різних сторінках.
Кнопки мають зрозумілі назви дій.
Основні CTA візуально відрізняються від другорядних дій.
Користувач розуміє результат дії до натискання кнопки.
Після виконання дії система показує зрозумілий результат.
Немає сторінок, з яких користувач не розуміє, куди рухатися далі.
2. Головна сторінка
Головна сторінка не повинна намагатися показати весь асортимент магазину одночасно. Її задача полягає в тому, щоб допомогти користувачеві швидко обрати наступний напрямок.
На головній зрозумілий асортимент магазину.
Основні категорії легко знайти.
Пошук доступний без додаткових дій.
Ключові категорії не заховані лише у банерах.
Банери мають зрозумілий CTA.
Текст на банерах читається на фоні зображень.
Слайдери не змінюються настільки швидко, що користувач не встигає прочитати контент.
Користувач може самостійно керувати слайдером.
Зображення товарів у промо блоках ведуть до відповідних товарів або категорій.
Акції мають зрозумілі умови.
Для акцій видно термін дії, якщо він обмежений.
Блоки рекомендацій мають зрозумілу логіку.
Новинки, популярні товари та спеціальні пропозиції візуально розрізняються.
Головна не перевантажена однаковими товарними каруселями.
Повторний користувач може швидко продовжити покупки.
3. Навігація та каталог
Навіть хороший товар неможливо купити, якщо його складно знайти.
Основні категорії мають зрозумілі назви.
Назви категорій відповідають термінам, які використовують покупці.
Категорії не дублюють одна одну без необхідності.
Каталог не має надмірної кількості рівнів вкладеності.
Користувач розуміє, у якій категорії знаходиться.
Поточний розділ візуально виділений.
Breadcrumbs показують місце користувача у структурі каталогу.
Breadcrumbs дозволяють повернутися на попередні рівні.
Логотип веде на головну сторінку.
Кошик доступний з основних сторінок.
Обране доступне без пошуку в меню.
Акаунт користувача легко знайти.
Mega menu не закривається випадково під час руху курсора.
Пункти меню достатньо великі для комфортного натискання.
Другорядна навігація не конкурує з каталогом.
4. Пошук
Для магазинів із великим асортиментом пошук може бути одним із найважливіших способів навігації.
Пошук легко знайти на сторінці.
Поле пошуку має достатній розмір.
Placeholder пояснює, що можна шукати.
Пошук працює за назвою товару.
Пошук працює за брендом.
Пошук враховує категорії.
Пошук враховує характеристики товару, якщо це доречно.
Пошук розуміє поширені помилки.
Пошук враховує альтернативне написання товарів.
Пошук працює із синонімами.
Autocomplete з’являється під час введення запиту.
Підказки autocomplete релевантні введеному тексту.
У підказках можна показувати категорії, бренди та товари.
Клавіатурою можна переміщатися між підказками.
Пошукова видача відповідає запиту.
На сторінці видно введений пошуковий запит.
Видно кількість знайдених товарів.
Пошукову видачу можна фільтрувати.
Пошукову видачу можна сортувати.
Сторінка без результатів не стає тупиком.
При нульовому результаті користувач отримує альтернативні запити або категорії.
5. Категорія та список товарів
Product Listing Page повинна допомагати швидко переглядати великий асортимент і відкидати нерелевантні варіанти.
Назва категорії чітко описує її вміст.
Видно кількість товарів у категорії.
Картки товарів мають однакову структуру.
Основне фото достатньо велике для оцінки товару.
Зображення не обрізають важливі частини товару.
Для товару доступні додаткові фото, якщо вони допомагають вибору.
Назва товару читається повністю або достатньо для його ідентифікації.
Ціна добре помітна.
Стара та нова ціна не створюють плутанини.
Розмір знижки зрозумілий.
Статус наявності видно до переходу на картку товару.
Основні варіанти товару можна побачити у списку, якщо це важливо для вибору.
Рейтинг видно без переходу на PDP, якщо магазин використовує відгуки.
Кількість відгуків показана поруч із рейтингом.
Товар можна додати в обране зі списку.
Користувач може швидко порівняти товари у категоріях, де порівняння має сенс.
Після повернення з картки товару користувач потрапляє на попередню позицію списку.
Стан фільтрів після повернення зберігається.
6. Фільтри та сортування
Фільтри повинні скорочувати асортимент, а не створювати ще одну складну систему всередині магазину.
Доступні фільтри відповідають характеристикам конкретної категорії.
Найважливіші фільтри знаходяться вище другорядних.
Можна обрати декілька значень одного фільтра, якщо це логічно.
Видно кількість товарів для значень фільтрів, де це корисно.
Застосовані фільтри добре помітні.
Окремий фільтр можна швидко видалити.
Усі фільтри можна очистити однією дією.
Після застосування фільтра зрозуміло, що список оновився.
Інтерфейс не стрибає на початок сторінки без необхідності.
На мобільному видно кількість активних фільтрів.
Після закриття мобільної панелі вибрані параметри зберігаються.
Сортування має зрозумілі назви.
Доступні релевантні варіанти сортування.
Поточний тип сортування видно користувачеві.
7. Картка товару
Product Detail Page є одним із головних місць прийняття рішення про покупку.
Назва товару одразу помітна.
Ціна знаходиться поруч із основним блоком покупки.
Знижка пояснена зрозуміло.
Основне фото товару достатньо велике.
Галерею легко переглядати.
Користувач бачить, скільки зображень доступно.
Зображення можна збільшити.
На мобільному zoom працює передбачувано.
Є фото товару з різних ракурсів.
Для товарів, де масштаб важливий, є можливість зрозуміти реальний розмір.
Відео не запускається зі звуком автоматично.
Варіанти кольору зрозуміло представлені.
Розміри представлені як легко доступні варіанти вибору.
Недоступні варіанти відрізняються від доступних.
Є size guide для товарів, де розмір має значення.
Після зміни варіанту оновлюються фото, ціна та наявність.
CTA додавання в кошик добре помітний.
Після додавання в кошик користувач отримує підтвердження.
Користувач не втрачає контекст після додавання товару.
Статус наявності зрозумілий.
Орієнтовний термін доставки доступний до додавання в кошик.
Вартість доставки або спосіб її розрахунку зрозумілі.
Інформацію про повернення можна знайти без переходу через декілька сторінок.
Основні характеристики легко сканувати.
Технічні характеристики структуровані.
Опис відповідає на питання, які впливають на рішення про покупку.
Важлива інформація не прихована за маркетинговим текстом.
Рейтинг має зрозуміле походження.
Видно загальну кількість відгуків.
Відгуки можна сортувати або фільтрувати, якщо їх багато.
Фото покупців легко переглядати, якщо вони доступні.
Рекомендовані товари не відволікають від основної покупки.
8. Кошик
Кошик є не просто списком товарів. Частина користувачів використовує його для перевірки, порівняння та тимчасового збереження вибраних товарів.
У кошику видно фото товару.
Назва товару веде назад на його сторінку.
Видно вибраний колір, розмір та інші варіанти.
Ціна кожного товару зрозуміла.
Кількість можна легко змінити.
Загальна сума оновлюється одразу після зміни кількості.
Товар можна легко видалити.
Після випадкового видалення доступне повернення товару, якщо це можливо.
Товар можна перенести в обране або зберегти на потім.
Видно проміжну суму замовлення.
Додаткові витрати не приховуються до останнього кроку.
Знижки відображаються окремо.
Promo code не займає непропорційно багато уваги.
CTA переходу до оформлення добре помітний.
9. Checkout
Checkout це один із найкритичніших сценаріїв у всьому інтернет магазині.
Покупку можна оформити без створення акаунта.
Guest checkout легко знайти.
Користувач бачить основні етапи оформлення.
Форма містить тільки необхідні поля.
Обов’язкові та необов’язкові поля позначені зрозуміло.
Labels не зникають після початку введення.
Для полів використовується правильний тип клавіатури на мобільному.
Дані браузера та password manager можна використовувати для автозаповнення.
Адресу можна заповнити з мінімальною кількістю ручного введення.
Користувачеві не потрібно повторно вводити вже надані дані.
Формат телефону зрозумілий.
Якщо телефон обов’язковий, зрозуміло навіщо він потрібен.
Помилка показується біля проблемного поля.
Повідомлення про помилку пояснює, як її виправити.
Після помилки правильно введені дані не зникають.
Способи доставки легко порівняти.
Замість абстрактної швидкості показується орієнтовна дата доставки.
Самовивіз та доставка представлені зрозуміло.
Доступні способи оплати видно до фінального підтвердження.
Загальна сума замовлення видима перед оплатою.
Доставка, податки та інші платежі показані окремо.
Користувач може повернутися до попереднього кроку без втрати даних.
Перед оплатою можна перевірити склад замовлення.
Кнопка оплати чітко пояснює фінальну дію.
Подвійне натискання не створює два замовлення.
Під час обробки платежу зрозуміло, що система працює.
Після успішної покупки є чітке підтвердження замовлення.
Номер замовлення легко знайти та скопіювати.
10. Mobile UX
Мобільна версія не повинна бути просто зменшеною копією desktop інтерфейсу.
Основні сценарії можна пройти однією рукою.
Інтерактивні елементи мають достатню площу натискання.
Важливі елементи не розташовані надто близько один до одного.
Sticky елементи не перекривають контент.
Клавіатура не перекриває активне поле форми.
Filter та Sort легко знайти.
Галереєю товару зручно керувати жестами.
CTA покупки залишається доступним у довгих картках товару, якщо це допомагає сценарію.
11. Доступність
Accessibility покращує інтерфейс не лише для користувачів assistive technologies. Багато таких принципів роблять магазин простішим для всіх.
Основний текст має достатній контраст із фоном.
Інформація не передається лише кольором.
Інтерактивні елементи доступні з клавіатури.
Keyboard focus добре видно.
Focus не перекривається sticky елементами.
Зображення товарів мають змістовний альтернативний текст там, де він потрібний.
Поля форм мають коректні labels.
Помилки можна зрозуміти без орієнтації лише на колір.
Збільшення тексту не руйнує основні сценарії.
Основні покупки можна завершити за допомогою клавіатури та screen reader.
Що ще перевіряти окремо від 190 UX пунктів
Є речі, які ми в CHIZZ не радили б змішувати з класичним heuristic UX аудитом, але обов’язково перевіряли б паралельно.
Швидкість роботи магазину
Повільний інтерфейс сам по собі стає UX проблемою. Особливо це помітно в каталозі, пошуку, фільтрах та checkout.
Перевіряйте Core Web Vitals, швидкість появи основного контенту, реакцію після взаємодії та стабільність layout. Не повинно бути ситуацій, коли користувач збирається натиснути кнопку, але через завантаження банера або зображення вона зміщується.
Особливу увагу варто приділити мобільним пристроям та повільнішому інтернету. Магазин, який чудово працює на MacBook із швидким WiFi, може мати зовсім інший UX на бюджетному смартфоні через мобільну мережу.
Empty, Loading та Error states
Дизайн часто перевіряють на ідеальних даних. У реальному продукті користувач постійно зустрічається з іншими станами.
Що відбувається, коли товарів немає? Що бачить користувач під час завантаження? Як виглядає порожнє обране? Що станеться, якщо не завантажилися рекомендації? Що показує магазин після помилки платежу?
Кожен такий стан повинен пояснювати ситуацію та, де це можливо, пропонувати наступну дію.
Акаунт та сценарії після покупки
UX інтернет магазину не закінчується на сторінці успішної оплати.
Користувач повинен мати можливість знайти свої замовлення, перевірити статус доставки, змінити особисті дані, повторити замовлення, отримати документи, оформити повернення або звернутися по допомогу.
Особливо важливо нормально показувати статус замовлення. Формулювання на кшталт «Processing» без пояснення не допомагає зрозуміти, що зараз відбувається і коли очікувати наступний етап.
Повернення товару
Повернення є частиною eCommerce UX, навіть якщо бізнесу хотілося б, щоб користувач ніколи ним не користувався.
Умови повернення потрібно легко знайти ще до покупки. Після покупки користувач повинен розуміти, чи можна повернути конкретний товар, скільки часу залишилося та що потрібно зробити.
Якщо період повернення вже завершився, не варто просто прибирати кнопку. Краще пояснити, чому повернення більше недоступне.
Підтримка
Контакт із підтримкою не повинен перетворюватися на окремий квест.
Телефон, чат, форма або інший доступний канал підтримки повинні знаходитися там, де користувач очікує їх побачити. Особливо важливо забезпечити доступ до допомоги в checkout, після помилки платежу та в інформації про замовлення.
Якщо користувач звертається щодо конкретного замовлення, системі бажано вже знати його номер та основну інформацію, замість того щоб змушувати людину вводити все повторно.
Як правильно проводити UX аудит інтернет магазину
Не потрібно просто відкривати головну сторінку та механічно ставити 190 галочок.
Почніть із ключових сценаріїв.
Наприклад, знайти конкретний товар через каталог. Знайти його через пошук. Відфільтрувати категорію. Порівняти декілька варіантів. Переглянути картку товару. Додати товар у кошик. Змінити його кількість. Оформити замовлення. Спробувати зробити те саме зі смартфона.
Після цього варто пройти менш очевидні сценарії. Пошук із помилкою. Нульова пошукова видача. Недоступний розмір. Порожній кошик. Помилка форми. Невдала оплата. Повернення назад із PDP у довгий каталог.
Саме в таких ситуаціях часто знаходяться проблеми, яких не видно на красивих макетах основних сторінок.
Не оцінюйте всі UX проблеми однаково
Після аудиту легко отримати список із десятків проблем. Але виправляти їх у випадковому порядку не варто.
У CHIZZ ми б оцінювали проблему щонайменше за трьома параметрами.
Вплив. Наскільки проблема заважає користувачеві виконати задачу?
Частота. Як часто користувачі потрапляють у цей сценарій?
Бізнес значення. Наскільки цей сценарій близький до покупки або іншої важливої для бізнесу дії?
Наприклад, невелика візуальна проблема у footer може зустрічатися на кожній сторінці, але практично не впливати на продажі. А незрозуміла помилка при введенні платіжних даних може виникати рідше, але безпосередньо блокувати замовлення.
Пріоритет у таких випадках очевидно буде різним.
Чекліст не замінює дослідження користувачів
Навіть 190 пунктів не можуть передбачити всі проблеми конкретного магазину. Експерт може знайти порушення відомих UX принципів, але не завжди може побачити проблеми, специфічні для аудиторії, асортименту або бізнес моделі.
Саме тому наступним кроком після експертного аудиту може бути аналіз продуктової аналітики, heatmaps, session recordings та usability testing.
Аналітика покаже, де користувачі залишають сценарій. Записи сесій допоможуть побачити, що вони робили перед цим. А usability testing дозволить зрозуміти, чому певний елемент або сценарій створює проблему.
UX аудит має закінчуватися не списком проблем, а планом покращень
Знайти 50 проблем і скласти їх у PDF недостатньо. Результатом хорошого аудиту має бути зрозумілий список гіпотез та рекомендацій із пріоритетами. Команда повинна розуміти, що варто виправити спочатку, чому це важливо та який користувацький сценарій зміниться.
Частину проблем можна виправити невеликими змінами в UI або текстах. Для інших потрібно переглянути інформаційну архітектуру, логіку каталогу, пошук або checkout. А іноді аудит показує, що окремий сценарій потрібно перепроєктувати повністю.
Саме тому UX аудит варто сприймати не як оцінку дизайну, а як спосіб знайти точки, де інтерфейс заважає користувачеві купувати.
