Инструкция: UX-аудит сайта

Trigger: «проверь сайт», «почему не конвертит», «сделай UX-аудит», «что не так с лендингом», «оцени юзабилити», «проверь формы».

Uses: instructions/landing_checklist, insights/honest_absence, insights/cite_dont_invent, behaviors/no_ai_slop

Зачем

UX-аудит — не список «плохо/хорошо», а аргументированный отчёт: каждая проблема объяснена в бизнес-терминах (конверсия, доверие, потерянные клиенты), а не в дизайн-паттернах. Клиент аудита обычно владелец бизнеса, не UX-специалист. Отличие от instructions/landing_checklist — этот аудит работает на любом сайте, не только на лендингах из iiminion-сборки.

Инструменты

Чтобы прочесть сайт — любой из доступных:

  • Exa MCP (web_search_exa с livecrawl: "preferred") — лучшее качество извлечения
  • WebFetch — встроен в Claude Code, без настройки
  • WebSearch — для базового анализа
  • Другие MCP-серверы веб-поиска

Шаги

Шаг 0 — Подготовка

Спроси у человека (если не сказано):

  • Главная цель конверсии — заявка / звонок / покупка / подписка
  • Целевая аудитория — кто и зачем
  • Особый фокус — формы / мобилка / сравнение с конкурентами

Если не хочет уточнять — определи сам после краула.

Шаг 1 — Сбор данных

Краули сайт:

  1. Главная — по URL
  2. Ключевые внутренние страницы — услуги, о компании, контакты, портфолио
  3. Страница контактов / заявки — отдельно

Для каждой страницы запиши: структура, все формы и CTA, контактная информация, мета-теги.

Промежуточные данные сохраняй в рабочий файл — в чате только сводка.

Шаг 2 — Учёт ограничений краула (критично)

Краул возвращает неполный текст. Burger-меню, попапы, элементы за JS-интеракцией (квизы, чат-виджеты, мессенджеры в подвале), iframe — всё это может не попасть в данные.

Железное правило (insights/honest_absence): никогда не пиши «на сайте нет X» (нет мессенджеров, нет меню, нет формы), если X могло быть в части страницы, которая не попала в краул. Пиши: «X не найден в данных краула — нужна ручная проверка».

Для навигации это особенно важно: один видимый пункт в шапке ≠ меню из одного пункта (полное обычно в burger или dropdown).

Шаг 3 — Аудит по 5 блокам (50 пунктов)

Блок 1 — Эвристики Нильсена (юзабилити)

  • Видимость состояния системы (понятно где находишься)
  • Соответствие миру пользователя (язык клиента, не корпоративный)
  • Свобода и контроль (можно отменить, вернуться)
  • Согласованность и стандарты (одинаковые кнопки одинаково выглядят)
  • Предотвращение ошибок (валидация в реальном времени)
  • Узнавание вместо вспоминания (понятные иконки + подписи)
  • Гибкость и эффективность (горячие клавиши, поиск)
  • Эстетика и минимализм (нет визуального шума)
  • Помощь в распознавании и восстановлении после ошибок (человеческие тексты ошибок)
  • Помощь и документация (FAQ, поддержка)

Блок 2 — Конверсия и убеждение

  • Главное предложение видно за 5 секунд
  • Одна страница — одна цель
  • CTA крупный, контрастный, выше первого скролла
  • CTA повторяется минимум 2 раза
  • Понятно что получит человек после клика
  • Социальные доказательства (отзывы, кейсы)
  • Доверие (логотипы партнёров, сертификаты, гарантии)
  • Снятие возражений (FAQ)
  • Срочность/дефицит (если уместно для индустрии)
  • Цена видна или объяснено почему «по запросу»

Блок 3 — Контент

  • Заголовок отвечает на «что это» за 5 секунд
  • Подзаголовок усиливает заголовок
  • Тон соответствует аудитории
  • Боль клиента описана его словами
  • Выгоды (не фичи)
  • Конкретика, не вода (см. behaviors/no_ai_slop)
  • Цифры верифицируемы
  • Грамотность (опечаток нет)
  • Алты у картинок
  • Тексты ссылок осмысленные (не «нажми здесь»)

Блок 4 — Техническое качество

  • HTTPS
  • Скорость загрузки (PageSpeed)
  • Адаптивность (мобильная версия)
  • Touch-цели на мобильном ≥ 44×44px
  • Шрифт на мобильном ≥ 16px
  • Контраст (WCAG AA — минимум 4.5:1 для текста)
  • Favicon
  • 404 страница
  • Открытие внешних ссылок в новой вкладке
  • robots.txt и sitemap.xml

Блок 5 — Информационная архитектура

  • Навигация интуитивная
  • Хлебные крошки на глубоких страницах
  • Поиск (если контент большой)
  • Контакты доступны с любой страницы
  • Связанные страницы предлагаются
  • Подвал содержит навигацию, контакты, юр. данные
  • URL человекочитаемые
  • Заголовки страниц уникальные и описательные
  • Meta description заполнены
  • Open Graph для соцсетей

Для каждого пункта:

  • OK — кратко что сделано хорошо
  • Проблема — описать, оценить серьёзность, дать рекомендацию
  • Не удалось проверить — честно: краул не дал данных. См. insights/honest_absence
  • Не применимо — пропустить

Важно: не выдумывай проблемы чтобы добить отчёт. Ценность аудита — точность.

Шаг 3.5 — Самопроверка (до отчёта)

Пройдись по каждой находке и спроси три вопроса:

  1. Это факт из краула или предположение? Если написал «на сайте нет X» — точно видел все страницы? Если нет — замени на «не найдено в данных краула». См. insights/honest_absence.

  2. Эта статистика реальна? Если ссылаешься на конкретные «X% по данным Y» — точно есть такое исследование с такими цифрами? Если нет — убери проценты, оставь принцип. См. insights/cite_dont_invent.

  3. CRITICAL оправдан? Проблема реально блокирует конверсию? Или просто неудобство? Раздутый приоритет убивает доверие ко всему отчёту.

Шаг 4 — Приоритизация

Приоритет Когда ставить Пример
CRITICAL Блокирует конверсию или убивает доверие. Посетитель уходит Форма не работает, нет телефона, нет HTTPS
MAJOR Заметно снижает конверсию или создаёт трение CTA не виден, форма из 8 полей, нет отзывов
MINOR Мелочи, не блокирует, но можно улучшить Нет favicon, опечатка в подвале

Проблемы на главной весят больше внутренних. Проблемы формы — больше текста «О нас». Мобилка — больше десктопа (больше половины трафика мобильное).

Шаг 5 — Отчёт

Сохрани в файл, путь согласуй с человеком. Пиши на языке человека.

# UX-аудит: [сайт]
Дата: YYYY-MM-DD
Цель конверсии: [из шага 0]
Аудитория: [из шага 0]

## Сводка
- Найдено: N CRITICAL, M MAJOR, K MINOR
- Общая оценка: [1-10]
- Главное: [одно предложение что чинить первым]

## Топ-5 критичных
1. [Заголовок проблемы]
   **Симптом:** ...
   **Причина:** ...
   **Влияние:** [как теряет конверсию]
   **Рекомендация:** ...

## Полный список по блокам
[По 5 блокам, в каждом — список с приоритетом]

## Не удалось проверить через краул
[Список того, что нужно посмотреть руками — см. [[insights/honest_absence]]]

Шаг 6 — Презентация в чате

  1. Сводка — сколько проблем по приоритетам, общая оценка
  2. Топ-5 CRITICAL/MAJOR
  3. Путь к полному отчёту

Спроси: «Углубиться в какой-то блок? Сравнить с конкурентами? Подготовить ТЗ на исправление?»

Как писать находку

Каждая проблема — мини-аргумент. Плохая находка называет симптом. Хорошая объясняет причину, влияние и решение.

❌ Плохо:

Кнопка плохо видна

✅ Хорошо:

CTA-кнопка «Оставить заявку» не контрастирует с фоном страницы. Для конверсионных элементов рекомендуется контраст ≥ 4.5:1 (WCAG AA). Когда CTA сливается с фоном, посетители не считывают её как интерактивный элемент. Рекомендация: увеличить контраст — проверить любым контрастомером. Оговорка: точный контраст без визуального доступа не измерить — см. insights/honest_absence.

❌ Плохо:

Форма слишком длинная

✅ Хорошо:

Форма заявки содержит 9 полей. Общая практика — ограничивать форму первого касания 3-5 полями, оставляя только критичное. Здесь обязательны: имя, телефон, тип проекта. Остальное (email, бюджет, площадь, комментарий, способ связи, время звонка) можно убрать или вынести во второй шаг.

Правило: не выдумывай статистику

Не цитируй «по данным X института 67%», если не уверен на 100% что такое исследование с такими цифрами реально существует. Выдуманная статистика убивает доверие ко всему отчёту. Вместо этого:

  • Ссылайся на устоявшиеся принципы (эвристики Нильсена, WCAG, правило Парето)
  • Объясняй логику: почему это проблема для этого бизнеса и этой аудитории
  • Если знаешь реальный источник — ссылайся. Не уверен — пиши «по UX-практике» или «общая практика» без процентов

См. insights/cite_dont_invent и behaviors/no_ai_slop (раздел «раздутые претензии»).

Учёт индустрии

Не все правила универсальны. «Осталось 3 места!» работает в e-commerce, но выглядит манипуляцией на сайте юриста. Сертификаты критичны для медицины, но необязательны для кофейни. «Показать цены» снижает порог в B2B-услугах, но может быть неправильно для люкса.

Перед фиксацией проблемы спроси: это реально проблема для этого бизнеса и этой аудитории?

Расширения (по запросу)

  • «Сравни с конкурентами» — найди 2-3 через web search, быстрый аудит ключевых параметров, сравнительная таблица
  • «Подготовь ТЗ на исправление» — техзадание разработчику/дизайнеру с требованиями по каждому фиксу, сгруппированному по приоритету
  • «Мобилку детально» — расширенно: touch-цели, размер шрифта, sticky-элементы, скорость на 3G
  • «Доступность» — дополнительный блок: контраст, alt-тексты, focus-индикаторы, ARIA-метки, навигация с клавиатуры

Типичные ошибки

  • «Раз краул не показал — значит нет» — нарушение insights/honest_absence. Burger-меню, попапы и виджеты часто за JS
  • «Раздуть до CRITICAL чтобы было серьёзно» — отбивает доверие ко всему отчёту
  • «67% пользователей бросают форму на 6-м поле» без источника — нарушение insights/cite_dont_invent
  • Писать как маркетолог — «синергия конверсий», «фундаментально трансформирует». См. behaviors/no_ai_slop
  • Универсальные правила без оглядки на индустрию — «нет урgency-блока» на сайте адвоката не проблема

Связано: instructions/landing_checklist, insights/honest_absence, insights/cite_dont_invent, behaviors/no_ai_slop, instructions/create_landing_page

Источник: sources/alena_zakharova — скил ux-audit. См. sources/share_repo.