Аудит UX/UI сайта

Аудит UX/UI сайта

Аудит UX/UI — структурированный анализ интерфейса, выявляющий несоответствия между текущим поведением пользователей и проектными намерениями. Результат — не список «что некрасиво», а конкретные проблемы с приоритетами и рекомендациями по устранению. Разница между аудитом и редизайном в том, что аудит отвечает на вопрос «почему не работает», а не «как сделать красиво».

Что входит в аудит

Аудит покрывает несколько слоёв, которые нельзя смешивать:

Эвристический анализ — проверка интерфейса по набору принципов (10 эвристик Нильсена, WCAG 2.1, platform-specific guidelines). Делается экспертно без привлечения пользователей. Выявляет структурные проблемы: непоследовательная терминология, отсутствие обратной связи, нарушения иерархии.

Анализ данных — работа с количественными метриками: показатели отказов по разделам, тепловые карты (Hotjar, Microsoft Clarity), записи сессий, воронки конверсии в GA4 / Amplitude. Данные показывают где проблема, но не почему.

Технический UX — скорость загрузки (Core Web Vitals: LCP, CLS, INP), стабильность рендера, поведение на разных устройствах и браузерах, корректность работы форм.

Accessibility — соответствие WCAG 2.1 уровням A и AA. Автоматическое сканирование через axe-core, Lighthouse, WAVE; ручная проверка keyboard navigation и screen reader (NVDA + Firefox, VoiceOver + Safari).

Процесс аудита по этапам

Этап 1: Сбор контекста (1–2 дня)

До начала анализа необходимо получить:

• доступ к GA4 / аналитической платформе за последние 3–6 месяцев
• записи сессий (минимум 50–100 по ключевым сценариям)
• данные Customer Support: топ обращений, связанных с навигацией или функциональностью
• бизнес-цели страниц/разделов, которые попадают в аудит
• конкурентный ландшафт (какие 2–3 сайта используются как ориентир)

Без этого аудит превращается в субъективные замечания.

Этап 2: Автоматизированный технический анализ

# Lighthouse CI для нескольких страниц
npx lighthouse-ci autorun --collect.url="https://example.com" \
  --collect.url="https://example.com/catalog" \
  --collect.numberOfRuns=3

# axe-core через CLI
npx axe https://example.com --save axe-results.json

Инструменты:

• Lighthouse — Core Web Vitals, accessibility score, best practices
• axe DevTools / axe-core — WCAG-нарушения с точными селекторами элементов
• WebPageTest — waterfall-анализ загрузки, filmstrip рендера
• Chrome DevTools Coverage — неиспользуемые CSS/JS

Этап 3: Экспертный анализ

Проверяется каждый ключевой сценарий пользователя. Например, для интернет-магазина:

1. первый визит → поиск товара → добавление в корзину → оформление
2. возврат пользователя → избранное → повторный заказ
3. мобильный сценарий (тач-навигация, размер целей касания)

Каждая проблема документируется по шаблону:

Этап 4: Анализ тепловых карт и записей сессий

При просмотре записей сессий ищем паттерны:

• rage clicks — повторные клики по нереагирующему элементу
• u-turn — пользователь заходит на страницу и сразу уходит назад
• dead scrolling — прокрутка без взаимодействия через весь экран
• form abandonment — на каком поле уходят из формы

В Hotjar это настраивается через фильтры: rage_clicks > 2 или exit_page = /checkout.

Этап 5: Формирование отчёта

Структура отчёта:

1. Executive summary — 3–5 критических проблем с наибольшим влиянием
2. Детальный список проблем, сгруппированных по severity и разделам
3. Матрица приоритетов: Impact × Effort
4. Конкретные рекомендации с визуальными примерами (скриншоты + аннотации, не макеты)
5. Метрики для верификации после внедрения

Типичные находки

На большинстве сайтов аудит обнаруживает предсказуемые классы проблем:

Навигация и ориентация

• отсутствие breadcrumbs на глубоких страницах
• нет индикации текущего раздела в меню
• поиск спрятан или возвращает нерелевантные результаты

Формы

• валидация только при submit (вместо inline по blur)
• нечитаемые сообщения об ошибках («Поле обязательно» вместо «Укажите email в формате [email protected]»)
• автозаполнение (autocomplete атрибут) не настроено

Мобильная версия

• tap targets меньше 44×44px (рекомендация Apple HIG) / 48×48dp (Material)
• горизонтальный скролл из-за фиксированных ширин
• модальные окна не адаптированы для виртуальной клавиатуры

Производительность восприятия

• отсутствие skeleton loaders при асинхронной загрузке
• нет optimistic UI при отправке форм
• CLS из-за изображений без width/height или без aspect-ratio

Deliverables аудита

• PDF/Notion-отчёт с аннотированными скриншотами
• Таблица задач в Jira/Linear с готовыми описаниями и приоритетами
• Опционально: видео-обзор критических проблем (10–15 минут, для команды)

Сроки

Аудит лендинга или сайта-визитки (5–10 страниц) — 3–4 дня. Корпоративный сайт или интернет-магазин (20–50 шаблонов страниц) — 7–12 рабочих дней. Если в объём входит пользовательское тестирование с живыми участниками — отдельная оценка от +5 дней.