Урок 4: Практика — UX-аудит сайта с AI

Чему вы научитесь

• Проводить комплексный UX-аудит любого сайта или веб-приложения за 2–3 часа вместо 1–2 недель
• Объединять инструменты из уроков 1–3 (Attention Insight, эвристики Нильсена в Claude, JTBD-персоны) в единую систему доказательств
• Переводить найденные ошибки в наглядные решения «До и После» для защиты перед заказчиком или продакт-менеджером
• Приоритизировать бэклог правок через матрицу Impact–Effort и оформлять убедительный отчёт

Для практики используем arckep.ru — все основные модели, без VPN, оплата рублями. Вы можете использовать любые другие сервисы.

Что такое доказательный UX-аудит с AI

UX-аудит — это систематическая диагностика интерфейса, цель которой — найти узкие места, снижающие конверсию в регистрацию, покупку или целевое действие. В классических агентствах такой аудит занимает 1–2 недели работы команды и стоит от 150 000 рублей, причём нередко сводится к субъективным замечаниям дизайнера («тут шрифт мелковат, а тут отступы неровные»).

Связка специализированных AI-инструментов позволяет пройти все пять ступеней диагностики за 2–3 часа. Вы не заменяете живых пользователей полностью, но снимаете 75–80% всех структурных, визуальных и сценарных барьеров до старта дорогих доработок, подкрепляя каждую рекомендацию цифрами и проверенными эвристиками.

5 этапов комплексного UX-аудита с AI:

1. Диагностика внимания   → Attention Insight (Areas of Interest + Clarity Score)
2. Эвристическая оценка   → Claude Vision (10 эвристик Якоба Нильсена + WCAG)
3. Сценарный стресс-тест  → Claude (прогон экрана глазами JTBD-персоны)
4. Приоритизация бэклога  → Матрица Impact–Effort (Quick Wins vs Major Projects)
5. Сборка отчёта и макета → Документ + наглядное сравнение «До / После»

UX-воркшоп: стикеры и journey map (Nano Banana 2 через arckep.ru)

Пошаговый алгоритм проведения аудита

1. Этап 1. Визуальный анализ и замер распределения внимания (30 минут). Сделайте скриншоты ключевых экранов воронки (главная страница, каталог/тарифы, корзина или форма заявки) в десктопном и мобильном разрешении через Chrome DevTools (F12 → Ctrl+Shift+P → Capture area screenshot). Прогоните их через Attention Insight и разметьте зоны интереса (AOI).

2. Этап 2. Мультимодальная проверка по 10 эвристикам Нильсена (40 минут). Загрузите скриншоты экранов в Claude и запустите структурный разбор по классическим эвристикам юзабилити Якоба Нильсена с обязательной привязкой к конкретным зонам интерфейса.

3. Этап 3. Проверка барьеров глазами JTBD-персоны (30 минут). Задайте контекст реального покупателя (с его страхами и ограничениями времени) и проверьте, на какие вопросы интерфейс не даёт ответа в момент принятия решения.

4. Этап 4. Сортировка находок по матрице Impact–Effort (20 минут). Соберите все выявленные проблемы из первых трёх этапов в единый список и разделите их на быстрые победы (Quick Wins за 1–2 дня) и крупные архитектурные переделки.

5. Этап 5. Проектирование экрана «До / После» и упаковка отчёта (40 минут). Не оставляйте заказчика один на один со списком критики — соберите в Figma исправленную версию самого проблемного экрана и покажите измеримую разницу.

Детальный разбор этапов 1–3

Этап 1: Фиксация базовых метрик в таблице внимания

На первом шаге ваша задача — получить сухие числа исходного состояния интерфейса (Baseline), от которых вы будете отталкиваться при защите редизайна:

Зона интерфейса (AOI)   │ % внимания │ Здоровая норма │ Статус диагностики
────────────────────────┼────────────┼────────────────┼────────────────────
Главная кнопка (CTA)    │    2.9%    │ от 6–9% и выше │ Критичный провал
Заголовок оффера (H1)   │    9.4%    │ 15–25%         │ Слабый контраст
Шапка и меню навигации  │   21.5%    │ до 12–15%      │ Перетягивает фокус
Декоративный баннер     │   36.0%    │ 10–20%         │ «Вампир внимания»
Блок доверия / условия  │    3.1%    │ 8–12%          │ Не считывается

Clarity Score исходного экрана: 39 / 100 (цель после редизайна: > 65)

Этап 2: Эвристическая оценка скриншота через Claude

Загрузите скриншот проверяемой страницы в Claude (на arckep.ru доступна актуальная мультимодальная модель Claude с поддержкой детального чтения интерфейсов) и используйте следующий промпт:

Ты — ведущий UX-аудитор. Проведи детальную проверку прикреплённого скриншота интерфейса по 10 эвристикам юзабилити Якоба Нильсена и базовым стандартам доступности (контраст текста, размер кликабельных зон не менее 44×44px).

Для каждой из 10 эвристик укажи:
1. Оценку от 1 до 5 (где 1 — критическое нарушение, блокирующее сценарий; 5 — эталонная реализация).
2. Точное описание проблемы с привязкой к конкретному элементу на скриншоте (никаких общих фраз — указывай точный текст кнопки, поле формы или блок).
3. Конкретную инженерно-дизайнерскую рекомендацию: что именно изменить в вёрстке, микрокопирайтинге или состояниях компонента.

Список эвристик для проверки:
1. Видимость состояния системы
2. Соответствие между системой и реальным миром (понятный язык без внутреннего жаргона)
3. Пользовательский контроль и свобода (возможность отменить действие и вернуться назад)
4. Консистентность и стандарты
5. Предотвращение ошибок до их совершения
6. Распознавание вместо запоминания (вся нужная информация перед глазами)
7. Гибкость и эффективность использования
8. Эстетика и минималистичный дизайн (отсутствие визуального шума)
9. Помощь пользователям в распознавании, диагностике и исправлении ошибок
10. Справка и контекстные подсказки

В финале выдели ТОП-3 критических блокера, которые сильнее всего бьют по конверсии этого экрана.

Этап 3: Стресс-тест сценария глазами персоны

Эвристики находят ошибки в компонентах, а JTBD-персона находит смысловые дыры (например, когда на странице оформления заявки все кнопки ровные и контрастные, но нигде не написано, спишутся ли деньги сразу после ввода карты).

Мы проводим UX-аудит экрана [описание/скриншот] для продукта [тип бизнеса].
Посмотри на этот экран глазами первичной JTBD-персоны:
- Кто это: [например, владелец небольшой кофейни, 38 лет, выбирает CRM-систему с телефона в перерыве между поставками]
- Главная задача: понять стоимость внедрения за 2 минуты и открыть демо-доступ без звонка навязчивого менеджера.
- Главный страх (Anxiety): «Сейчас оставлю телефон, и мне начнут звонить продавцы по 10 раз в день, а цен я так и не узнаю».

Ответь на 3 вопроса:
1. В какой именно момент на этом экране наш пользователь закроет вкладку и почему?
2. Какой критически важной информации не хватает рядом с главной кнопкой?
3. Как переписать заголовок, подзаголовок и текст на кнопке CTA, чтобы снять его страх?

Реальный кейс: экран «До и После» по итогам UX-аудита

Любой текстовый аудит работает в десять раз убедительнее, когда вы сопровождаете его наглядной переработкой самого узкого места воронки. Разберём реальный пример аудита страницы оформления пробного доступа в облачном B2B-сервисе складского учёта:

Этап 4: Приоритизация находок через матрицу Impact–Effort

Когда у вас на руках 15–20 замечаний, выкатывать их заказчику единым несортированным списком — грубая ошибка: разработчики утонут в мелочах, а критичные блокеры конверсии отложат на следующий квартал. Разделите все задачи через Claude по матрице «Влияние на бизнес (Impact) / Сложность внедрения (Effort)»:

Вот список из [N] UX-проблем, найденных в ходе аудита:
[Вставьте список проблем]

Оцени каждую проблему по пятибалльной шкале по двум осям:
- Impact (1–5): влияние на конверсию в целевое действие и удержание пользователя
- Effort (1–5): трудозатраты дизайна и фронтенд-разработки на исправление

Распредели все пункты по 4 квадрантам:
1. Quick Wins (Высокий Impact ≥ 4, Низкий Effort ≤ 2) — быстрые победы на 1–2 дня (правки текстов, контраста CTA, скрытие лишних полей, добавление подсказок).
2. Major Projects (Высокий Impact ≥ 4, Высокий Effort ≥ 3) — стратегические задачи на ближайший спринт (пересборка навигации, новый калькулятор).
3. Fill-ins (Низкий Impact ≤ 3, Низкий Effort ≤ 2) — косметические полировки по остаточному принципу.
4. Отложить (Низкий Impact ≤ 2, Высокий Effort ≥ 3) — задачи, которые не окупят время разработки.

Этап 5: Структура финального отчёта для клиента или команды

Оформляйте документ в Notion, Google Docs или Gamma так, чтобы руководитель бизнеса понял главную ценность за первые 2 минуты чтения:

1. КРАТКАЯ СВОДКА (Executive Summary)
   - Текущая оценка юзабилити и визуальной иерархии (Clarity Score, % внимания на CTA)
   - 3 критических блокера, из-за которых бизнес теряет заявки прямо сейчас
   - Ожидаемый эффект от внедрения быстрых правок (Quick Wins)

2. МЕТОДОЛОГИЯ И ИСХОДНЫЕ ДАННЫЕ
   - Предиктивный анализ внимания (Attention Insight — десктоп и мобайл)
   - Эвристическая диагностика по 10 правилам Якоба Нильсена и доступности WCAG
   - Сценарный разбор для первичной и вторичной JTBD-персоны

3. ДЕТАЛЬНЫЙ РАЗБОР НАХОДОК (по экранам воронки)
   - Визуальная иерархия: тепловые карты с разметкой зон интереса (AOI)
   - Юзабилити и формы: найденные нарушения с оценкой критичности
   - Смысловые барьеры: где интерфейс не отвечает на страхи покупателя

4. НАГЛЯДНОЕ РЕШЕНИЕ «ДО И ПОСЛЕ»
   - Редизайн главного проблемного экрана с замером новых метрик внимания

5. ДОРОЖНАЯ КАРТА ВНЕДРЕНИЯ (Impact–Effort)
   - Спринт 1 (Quick Wins на 1–2 дня без переписывания бэкенда)
   - Спринт 2 (Архитектурные улучшения на 1–2 недели)