Як зробити юзабіліті-аудит сайту своїми силами: 7 безкоштовних інструментів

Чому варто почати з самостійного аудиту

Експертний юзабіліті-аудит у нас коштує від 25 000 грн. Перед тим як замовляти його, є сенс пройти самостійну перевірку — вона часто закриває 60-70% типових проблем безкоштовно.

7 безкоштовних інструментів — стек FOX

1. Google Analytics 4 (основа всього)

GA4 — це квантитативний фундамент аудиту. Безкоштовно, до 10 млн подій/міс.

Що дивитися:

• Engagement rate на ключових сторінках. Якщо менше 40% — серйозні проблеми.
• Average engagement time менше 30 сек = люди не читають
• Conversion funnel — на якому кроці відвалюються
• Path exploration — куди йдуть з landing page

Топ-3 звіти для юзабіліті:

2. Microsoft Clarity (безкоштовно, без лімітів)

Microsoft Clarity — безкоштовний аналог Hotjar без лімітів. Записи сесій + heatmaps + rage clicks.

Найцінніше:

• Rage clicks — користувачі багатократно клікають на одне місце (зазвичай — на не-клікабельний елемент)
• Dead clicks — кліки на елементи без реакції
• Excessive scrolling — гортають туди-сюди, не знаходять
• Quick backs — миттєво повертаються назад (помилкові переходи)

Підключення: 1 JS-скрипт у head, готово.

3. Hotjar Free (35 сесій/день)

Hotjar має платні плани, але free-tier (35 сесій/день) достатньо для аудиту малого сайту.

Що дає краще за Clarity:

• Survey-pop-ups — можна питати користувачів «Що не сподобалось?» прямо на сайті
• Funnel Reports — візуалізація конверсійної воронки
• Form Analytics — на якому полі люди йдуть з форми

4. Lighthouse у Chrome DevTools

Безкоштовний, вбудований у Chrome. Запуск: DevTools → Lighthouse → Analyze.

Що дивитись для юзабіліті:

• Accessibility score (треба ≥90)
• Best Practices score (треба ≥90)
• Tap targets are sized appropriately (mobile)
• Background and foreground colors have a sufficient contrast ratio (WCAG)

5. Google Mobile-Friendly Test

search.google.com/test/mobile-friendly — перевірка мобільної адаптації.

Тест показує:

• Скріншот як Google бачить мобільну версію
• Список проблем (текст замалий, кнопки близько, viewport не виставлено)

6. UsabilityHub (free 5 mins / day)

usabilityhub.com — справжні люди тестують ваш сайт. Free: 5 хвилин тестів на день.

Доступні тести:

• 5-second test: покажуть скріншот на 5 сек, потім запитають «що ви запам’ятали?» — перевірка hero-блоку
• First-click test: «де би ви натиснули, щоб виконати дію X?» — UX-карта
• Preference test: A vs B (наприклад, 2 варіанти кнопки)

7. Maze (free 3 user tests/study)

maze.co — більш просунутий за UsabilityHub. Дозволяє створити повноцінний сценарний тест (наприклад, «знайди ціну на товар X»).

Free: 3 тести на дослідження. Достатньо щоб протестувати 1 user journey.

Покроковий план самостійного аудиту (4 години)

Етап 1. Збір даних (45 хв)

1. Відкрийте GA4 → Reports → Engagement → Pages and screens — записати engagement rate і bounce rate топ-10 сторінок
2. Microsoft Clarity → Dashboard — переглянути 5 записів сесій по найважливішій сторінці (chekout/landing)
3. Lighthouse Mobile на 3 ключових сторінках — записати accessibility issues
4. Mobile-Friendly Test на тих самих сторінках

Етап 2. Hero-блок і перший екран (45 хв)

Перевірка за чеклістом (детально у статті про 25 типових проблем):

• CTA-кнопка на mobile видна без скролу?
• Заголовок пояснює що ви продаєте за 5 сек?
• Є proof-сигнали (відгуки, цифри, логотипи)?
• LCP < 2.5s?

Тест: UsabilityHub 5-second test на hero — запитайте «що цей сайт продає?»

Етап 3. Навігація і фільтри (45 хв)

• Логотип клікабельний → веде на головну?
• Поле пошуку видиме на всіх сторінках?
• Активний пункт меню виділений?
• Breadcrumbs присутні на глибоких сторінках?
• Фільтри з лічильниками результатів?

Тест: First-click test через UsabilityHub — «де натиснули б щоб подивитися продукт X?»

Етап 4. Конверсійна воронка (60 хв)

Найкритичніша частина. Використовуйте GA4 Funnel Exploration:

1. Створіть воронку: Landing → Product page → Add to cart → Checkout → Purchase
2. Дивіться conversion rate на кожному кроці
3. Який крок має drop-off >50% — там фокусуємось

На проблемному кроці:

• Microsoft Clarity → відфільтруйте сесії на цій сторінці → подивіться 10 записів
• Hotjar Form Analytics — на якому полі форми йдуть

Етап 5. Mobile-специфіка (30 хв)

• Touch targets ≥ 44×44 px
• Поля форми font-size ≥ 16px (запобігання iOS zoom)
• Швидкість LCP/INP/CLS на mobile у нормі?
• Hamburger menu не сховано на desktop 1280+?

Етап 6. Складання звіту і пріоритизація (15 хв)

Створіть Excel з 4 колонками:

• Знахідка — що знайшли
• Severity — Критична / Висока / Середня
• Effort — годин на виправлення
• Sprint — у який спринт винести

Що НЕ знайдете самостійно

DIY-аудит не знаходить 30-40% проблем:

Конкретно: експертний аудит дає сегментацію по поведінці (mobile vs desktop, новий vs повертається, з реклами vs органіки), бенчмарк з 3-5 конкурентами і конкретні рекомендації по копірайтингу, а не тільки «чого не вистачає».

Висновок

DIY юзабіліті-аудит — це 100% must-do перед замовленням експертного. Безкоштовно, 4 години, знаходите 60-70% типових помилок. Виправляєте — отримуєте +15-25% конверсії за 1-2 місяці.

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