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

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

• Проводить полный UX-аудит сайта за 2-3 часа вместо 1-2 недель
• Комбинировать инструменты из уроков 1-3 в единый workflow
• Оформлять результаты в структурированный отчет
• Расставлять приоритеты через Impact-Effort матрицу

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

Что такое UX-аудит с AI

UX-аудит — систематическая проверка интерфейса на проблемы юзабилити. Традиционный аудит: команда из 2-3 специалистов, 1-2 недели, отчет на 30-50 страниц. Стоимость: от 150 000 рублей.

С AI вы проходите тот же процесс за 2-3 часа. Результат не заменяет полноценного исследования, но выявляет 70-80% очевидных проблем и формирует гипотезы для дальнейшей работы.

5 этапов UX-аудита с AI:

1. Визуальный анализ      → Attention Insight (тепловая карта)
2. Эвристическая оценка   → Claude (10 эвристик Нильсена)
3. Анализ аудитории        → Claude (персоны и journey map)
4. Приоритизация           → Impact-Effort матрица
5. Оформление отчета       → Структурированный документ

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

Этап 1: Визуальный анализ

Подготовка скриншота

Шаг 1. Сделайте полноразмерный скриншот анализируемого сайта. В Chrome: F12 — Ctrl+Shift+P — введите «screenshot» — Capture full size screenshot. Это сохранит всю страницу целиком.

Шаг 2. Загрузите в Attention Insight. Отметьте 4-5 ключевых зон через Areas of Interest: главный CTA, заголовок/ценностное предложение, навигация, контактная информация, основная иллюстрация.

Шаг 3. Зафиксируйте результаты:

Элемент                 │ % внимания │ Ожидание │ Проблема?
────────────────────────┼────────────┼──────────┼──────────
Главный CTA             │     %      │ 5-8%+    │
Заголовок               │     %      │ 8-15%    │
Навигация               │     %      │ < 15%    │
Иллюстрация             │     %      │ 10-20%   │
Вторичный контент       │     %      │ < 10%    │

Clarity Score: ____/100 (цель: > 60)

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

Загрузите скриншот в Claude и отправьте промпт. Claude умеет анализировать изображения и находить конкретные проблемы интерфейса.

Промпт для эвристической оценки

Проведи UX-аудит этого интерфейса по 10 эвристикам Нильсена.

Для каждой эвристики:
1. Оценка: 1-5 (1 = серьезные проблемы, 5 = отлично)
2. Конкретная проблема (с указанием элемента на скриншоте)
3. Рекомендация по исправлению (конкретное действие)

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

В конце: топ-3 критических проблемы, которые нужно
исправить в первую очередь.

Что вы получите

Claude вернет структурированную оценку. Пример фрагмента:

Эвристика 5: Предотвращение ошибок — 2/5

Проблема: Форма заказа не валидирует email в реальном
времени. Пользователь заполняет все поля, нажимает
«Отправить» и получает ошибку. Заполненные данные
сбрасываются.

Рекомендация: Добавить inline-валидацию на каждое поле.
Показывать ошибку сразу при потере фокуса, а не после
отправки. Сохранять заполненные поля при ошибке.

Этап 3: Анализ аудитории

Создайте персоны для анализируемого сайта. Это переводит абстрактные «проблемы» в конкретные сценарии.

Промпт для быстрых персон в контексте аудита

Сайт: [URL или описание]
Тип: [e-commerce / SaaS / информационный / ...]

Создай 2 ключевые персоны:
- Первичная (70% аудитории) -- основной пользователь
- Вторичная (20%) -- дополнительная аудитория

Для каждой: имя, возраст, цель визита, главная боль,
tech-savvy (1-5).

Затем mini journey map для первичной персоны:
приход → поиск информации → целевое действие → уход.
Для каждого шага: эмоция (1-5) и потенциальная проблема.

Зачем персоны в аудите? Вместо «кнопка мелкая» вы пишете: «Мария, 55 лет, не может нажать кнопку “Оформить заказ” с мобильного — она 32px, а для пожилых пользователей с крупным пальцем нужно минимум 48px». Отчет с персонами убедительнее для заказчика.

Этап 4: Приоритизация

У вас список из 10-15 проблем. Исправить все сразу невозможно. Impact-Effort матрица помогает выбрать, с чего начать.

Промпт для приоритизации

Вот список UX-проблем:
[вставьте список]

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

Распредели по квадрантам:
1. Quick Wins (impact > 3, effort < 3) -- делать первыми
2. Major Projects (impact > 3, effort > 3) -- планировать
3. Fill-ins (impact < 3, effort < 3) -- если есть время
4. Not Worth It (impact < 3, effort > 3) -- отложить

Для Quick Wins укажи примерное время исправления.

Матрица

                    Высокий Impact
                          │
    Major Projects        │       Quick Wins
    (планировать на       │     (делать на этой
     следующий спринт)    │      неделе)
                          │
  ────────────────────────┼────────────────────
                          │
    Not Worth It          │       Fill-ins
    (отложить или         │     (между основными
     убрать из беклога)   │      задачами)
                          │
                    Низкий Impact

    Высокий Effort ───────┼───────→ Низкий Effort

Этап 5: Оформление отчета

Структура UX-аудита

1. РЕЗЮМЕ (Executive Summary)
   - Общая оценка сайта (1-10 с обоснованием)
   - Топ-3 критических проблемы
   - Топ-3 сильные стороны

2. МЕТОДОЛОГИЯ
   - AI-тепловая карта (Attention Insight)
   - Эвристическая оценка (10 эвристик Нильсена, Claude)
   - Анализ аудитории (AI-персоны)

3. НАХОДКИ
   3.1 Визуальная иерархия (тепловая карта + скриншоты)
   3.2 Юзабилити (результаты эвристической оценки)
   3.3 Пользовательские сценарии (персоны + journey)

4. РЕКОМЕНДАЦИИ
   - Quick Wins (1-2 дня на исправление)
   - Средний приоритет (1-2 недели)
   - Стратегические (1-3 месяца)

5. ПРИЛОЖЕНИЯ
   - Скриншоты с аннотациями
   - Полная таблица эвристической оценки
   - Карточки персон

Чек-лист UX-аудита с AI

[ ] Полноразмерный скриншот сделан (Chrome DevTools)
[ ] Тепловая карта загружена в Attention Insight
[ ] Clarity Score зафиксирован (цель: > 60)
[ ] Ключевые зоны размечены (CTA, заголовок, навигация)
[ ] Эвристическая оценка через Claude -- 10 эвристик
[ ] 2 персоны созданы (первичная + вторичная)
[ ] Journey map для первичной персоны
[ ] Проблемы приоритизированы (Impact-Effort)
[ ] Quick Wins выделены отдельно с оценкой времени
[ ] Отчет оформлен и понятен без пояснений

Практическое задание

1. Выберите реальный сайт — свой проект, сайт конкурента или клиента
2. Пройдите все 5 этапов аудита по инструкции
3. Оформите мини-отчет на 1-2 страницы
4. Выделите 3 Quick Wins — что можно исправить за 1-2 дня
5. Покажите отчет человеку, незнакомому с проектом — понятен ли он без дополнительных объяснений?

Итоги урока

• Полный UX-аудит с AI: 2-3 часа вместо 1-2 недель
• 5 этапов: визуал, эвристики, аудитория, приоритизация, отчет
• Минимальный набор: Attention Insight + Claude
• Impact-Effort матрица превращает список проблем в план действий
• AI-аудит — отправная точка и фильтр очевидного, не финальный вердикт