Юзабіліті #чекліст#юзабіліті#інтернет-магазин#e-commerce

Юзабіліті-аудит сайту: чекліст 25 типових проблем інтернет-магазину у 2026

Самостійна перевірка юзабіліті інтернет-магазину за 25 пунктами: hero-блок, фільтри, картка товару, кошик, чекаут, форми, мобільна версія. Чекліст PDF, евристики Нільсена, конкретні приклади і метрики.

Як користуватися чеклістом

Чекліст побудовано на евристиках Нільсена (UX-стандарт з 1994) + 17 років практики FOX з 50+ юзабіліті-аудитами в українському e-commerce. Кожен пункт має проблему, тест за 1-2 хв, фікс і пріоритет.

Рекомендуємо: відкрийте свій сайт у Chrome DevTools у режимі mobile (iPhone SE 375×667), створіть Excel з 4 колонками (№, Проблема, Знайдено?, Дата виправлення) і йдіть по списку. На середній інтернет-магазин (100-300 SKU) піде 2-4 години.

Зведена таблиця — топ-5 критичних

ПроблемаТиповий ріст конверсії
1CTA нижче першого екрану на мобільних+8-15%
11Ціна не видна без додавання в кошик+5-12%
16Обовʼязкова реєстрація для покупки+15-25%
18Форма чекауту 12+ полів+10-20%
24LCP мобільний > 2.5 сек+5-10%

🎯 Hero-блок і перший екран

1. CTA нижче першого екрану на мобільних — Критична

Проблема. Користувач відкриває сайт на телефоні і не бачить кнопки дії — треба скролити. Як перевірити. Відкрийте сайт у Chrome DevTools на iPhone SE (375×667). CTA-кнопка має бути видна без скролу. Як виправити. Скоротіть hero-блок: 1 заголовок + 1 рядок опису + 1 CTA. Видаліть зайві картинки/анімації над лінією згину.

2. Заголовок не пояснює що ви продаєте — Висока

Проблема. Заголовок «Якість і надійність з 2010 року» не каже що це за продукт. Як перевірити. Покажіть hero-блок незнайомій людині на 5 секунд. Чи зрозуміла вона що ви продаєте? Як виправити. Заголовок = «Що + Для кого + Унікальна вигода». Приклад: «Кошти для відновлення мебелі — для салонів і реставраторів».

3. Немає proof-сигналів (відгуки, цифри, логотипи клієнтів) — Висока

Проблема. Новий відвідувач не довіряє вам без соціальних доказів. Як перевірити. У hero-блоці або одразу під ним має бути 1 з: лічильник клієнтів, логотипи компаній, рейтинг 4.8/5, фото відгуку. Як виправити. Додайте 1-2 цифрові факти («2000+ задоволених клієнтів»), замініть стокові фото на реальні.

4. Слайдер з 5+ слайдами автопрокрутки — Середня

Проблема. Користувачі не дочікуються 5 слайдів, читають тільки перший. Як перевірити. У GA4 час на hero менше 8 сек на 80% сесій — слайдер не дивляться. Як виправити. Замініть слайдер на 1 статичний hero з найсильнішим повідомленням.

5. Hero завантажується довше 2.5 сек (LCP > 2.5s) — Критична

Проблема. Користувачі залишають сайт до того як побачать hero-блок. Як перевірити. pagespeed.web.dev → ваш URL → mobile. Якщо LCP > 2.5s — критично. Як виправити. Стисніть hero-зображення (WebP замість JPG), додайте preload, мінімізуйте CSS вище за лінією згину.

🧭 Навігація і структура

6. Меню сховано за гамбургером на desktop 1280px+ — Середня

Проблема. На великих екранах є місце для повного меню, але показано гамбургер. Як перевірити. На моніторі 1280+ меню має бути розгорнуте по горизонталі. Як виправити. Розкрийте горизонтальне меню для desktop.

7. Логотип не клікабельний або не веде на головну — Висока

Проблема. Класична UX-евристика: логотип = повернення додому. Як перевірити. Клікніть на логотип з будь-якої сторінки. Має повертати на /. Як виправити. Обгорніть логотип у <a href="/">. Це 1 рядок коду.

8. Немає breadcrumbs на глибоких сторінках — Середня

Проблема. Користувач на сторінці товару не знає в якій категорії знаходиться. Як перевірити. На сторінці товару має бути «Головна → Категорія → Підкатегорія → Товар». Як виправити. Додайте breadcrumbs з BreadcrumbList JSON-LD schema.

9. Поле пошуку відсутнє або сховане — Висока

Проблема. 30% користувачів інтернет-магазину одразу шукають через пошук. Як перевірити. Поле пошуку має бути в шапці на всіх сторінках. Як виправити. Додайте видиме поле пошуку з автокомплітом.

10. Активний пункт меню не виділяється — Низька

Проблема. Користувач не розуміє де він знаходиться у структурі. Як перевірити. На сторінці категорії пункт меню має бути візуально активним. Як виправити. Додайте active-стан для current page.

🛍️ Картка товару і фільтри

11. Ціна не видна без додавання в кошик — Критична

Проблема. Користувач не може порівняти ціни не вкладаючи товар. Як перевірити. На сторінці категорії і в картці товару ціна має бути одразу видна. Як виправити. Виведіть ціну на картку товару великим шрифтом.

12. Фото товару тільки 1, без можливості збільшити — Висока

Проблема. Без 5-8 фото з різних ракурсів конверсія падає на 30-40%. Як перевірити. У картці товару має бути ≥5 фото, zoom при кліку. Як виправити. Додайте галерею з мінімум 5 фото. Lightbox для zoom.

13. Немає інформації про доставку і повернення на картці — Висока

Проблема. Користувач має шукати ці дані у footer. Як перевірити. На картці товару має бути блок «Доставка / Повернення». Як виправити. Додайте sticky-блок з доставкою/поверненням під кнопкою «Купити».

14. Фільтри без лічильників результатів — Середня

Проблема. Користувач клікає фільтр і не знає скільки товарів залишиться. Як перевірити. У фільтрі «Колір: червоний» має бути «(23 товари)» одразу. Як виправити. Додайте AJAX-фільтри з показом лічильника.

15. Сортування за замовчуванням — «Новинки» замість «Популярні» — Низька

Проблема. Користувач хоче бачити те що купують інші. Як перевірити. За замовчуванням повинні бути «Популярні». Як виправити. Змініть default sort на «Popularity».

🛒 Кошик і чекаут

16. Обовʼязкова реєстрація для покупки — Критична

Проблема. 24% користувачів не хочуть створювати акаунт. Як перевірити. У чекауті має бути «Купити як гість». Як виправити. Додайте guest checkout. Збирайте email + телефон + адресу.

17. Чекаут на 1 сторінці без прогрес-бара — Висока

Проблема. Користувач не розуміє скільки кроків залишилось. Як перевірити. Чекаут має або 1 коротку сторінку, або прогрес-бар. Як виправити. Додайте прогрес-бар з 4 кроками.

18. Форма чекауту 12+ полів — Критична

Проблема. Кожне зайве поле знижує конверсію на 5-8%. Як перевірити. Порахуйте поля. Не більше 7. Як виправити. Видаліть надлишкові поля. Замініть «Місто+Вулиця+Будинок» на 1 поле з автокомплітом Нової Пошти.

19. Немає підтвердження замовлення на пошту — Висока

Проблема. Користувач не впевнений, що замовлення пройшло. Як перевірити. Після оплати email має прийти протягом 30 сек. Як виправити. Налаштуйте автомейл з номером замовлення, складом, ціною.

20. Промокоди заховані «глибоко» у чекауті — Середня

Проблема. Користувачі залишають чекаут шукати код в Google. Як перевірити. Не показуйте поле «Промокод» якщо у користувача його немає. Як виправити. Сховайте поле «Промокод» за accordion або застосовуйте автоматично.

📱 Мобільна версія + швидкість

21. Кнопки і посилання менше 44×44 px на мобільних — Середня

Проблема. Apple HIG і Google рекомендують мінімум 44px. Як перевірити. DevTools mobile view → inspect кнопок. Як виправити. Збільшіть padding кнопок.

22. Поля форми зум-аутають при фокусі (iOS bug) — Середня

Проблема. iOS зумить input з font-size менше 16px. Як перевірити. На iPhone клікніть у поле форми. Як виправити. Усі input в CSS: font-size: 16px (мінімум).

23. Тач-таргети розташовані надто близько — Низька

Проблема. Користувач промахується пальцем. Як перевірити. Між клікабельними елементами має бути мінімум 8 px. Як виправити. Збільшіть margin між кнопками.

24. LCP мобільний > 2.5 сек — Критична

Проблема. Користувачі залишають до того як hero завантажиться. Як перевірити. pagespeed.web.dev → mobile → LCP має бути < 2.5s. Як виправити. Стисніть hero, додайте preload, мінімізуйте JS, CDN.

25. CLS > 0.1 — контент стрибає під час завантаження — Висока

Проблема. Користувач починає читати, текст стрибає — клікає не туди. Як перевірити. pagespeed.web.dev → CLS має бути менше 0.1. Як виправити. Виставте розміри (width/height) для всіх зображень, відео, iframe.

Що робити після перевірки

  1. Виправляйте критичні проблеми (червоні) у першу чергу — за 1-2 тижні. Чекайте 14-21 день і вимірюйте конверсію.
  2. Потім беріться за високі (оранжеві) — за 2-3 тижні.
  3. Середні (жовті) — у фоновому режимі протягом 1-2 місяців.
  4. Якщо після виправлення критичних конверсія не зросла на 10%+ — потрібен експертний аудит.

Коли потрібен експертний юзабіліті-аудит від FOX

Самостійний чекліст знаходить 60-70% типових проблем. Решта 30-40% — це проблеми user flow, сегменти аудиторії, конкурентні переваги, глибокий аналіз GA4, поведінка по конверсійній воронці.

Юзабіліті-аудит від FOX охоплює всі ці пункти + видає PDF на 25-80 сторінок з пріоритизованими рекомендаціями. Ціна: від 25 000 грн (Express, до 5 сторінок) до 65 000 грн (Pro, інтернет-магазин 50+ типів сторінок).

Замовте юзабіліті-аудит у FOX

Знайдемо ще 30-40% проблем, які не видно з чеклісту. PDF-звіт за 5-10 днів з пріоритизованим планом впровадження.