Урок 1: AI-тепловые карты без пользователей

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

• Читать предсказательную тепловую карту внимания и управлять визуальной иерархией экрана
• Размечать зоны интереса (Areas of Interest) и повышать долю внимания на целевой кнопке (CTA)
• Проводить A/B-сравнение двух вариантов макета прямо в Figma до начала вёрстки
• Комбинировать AI-скрининг в Attention Insight с быстрыми тестами на живых людях в Maze и Useberry
• Понимать 3 типа интерфейсов, в которых AI-тепловая карта гарантированно ошибается

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

Зачем дизайнеру предсказательная аналитика внимания

Классическое лабораторное исследование с айтрекером (eye-tracking) стоит от $5 000 за один проект. Для него требуется оборудование вроде камер Tobii или Gazepoint, рекрутинг 15–20 респондентов, аренда кабинета и 2–3 недели работы исследователя. В реальности стартапов, продуктовых команд и тем более фриланса такие бюджеты на проверку каждого экрана недоступны. Из-за этого решения о визуальной иерархии принимаются на уровне вкусовщины: «давайте сделаем кнопку побольше, а картинку поярче».

Предсказательные AI-тепловые карты меняют сам цикл работы над макетом. Нейросеть, обученная на десятках тысяч реальных сессий лабораторного айтрекинга, анализирует контраст, цвет, типографику, композицию, лица людей и расположение элементов на вашем макете. За 20 секунд она строит математический прогноз: куда именно посмотрит человек в первые 3–5 секунд после открытия страницы. Точность таких моделей достигает 90–94% корреляции с физическим оборудованием (по данным валидационных тестов Attention Insight и MIT Saliency Benchmark). Этого более чем достаточно, чтобы отсеять слабые композиции ещё в Figma до того, как макет уйдёт к разработчикам или на платное тестирование.

Визуализация тепловой карты на мониторе (Nano Banana 2 через arckep.ru)

Учебник визуальной иерархии: работа с Attention Insight

Attention Insight — специализированная нейросеть, обученная на более чем 30 000 реальных eye-tracking исследований. Вы загружаете скриншот или фрейм из Figma и получаете три объективные метрики:

1. Тепловую карту внимания (Attention Heatmap) — градиент от тёмно-синего и зелёного (холодные зоны, которые взгляд пропускает) до жёлтого и ярко-красного (горячие точки, куда глаз фокусируется в первые секунды).
2. Процент распределения внимания (Percentage of Attention) — точная доля зрительного ресурса, которую забирает каждый размеченный вами блок через инструмент Areas of Interest (AOI).
3. Оценку чистоты композиции (Clarity Score) — индекс от 0 до 100, показывающий, насколько легко мозг считывает структуру экрана. Результат выше 65 означает ясную иерархию, ниже 45 — визуальный шум и конкуренцию элементов друг с другом.

Пошаговый алгоритм проверки макета

1. Создайте рабочий проект или установите плагин для Figma. Зарегистрируйтесь на attentioninsight.com (доступен 14-дневный пробный период без привязки карты; платные тарифы начинаются от $23/мес) и подключите официальный плагин Attention Insight в Figma, чтобы проверять фреймы без экспорта картинок.

2. Подготовьте экран в реальном разрешении. Выберите первый экран (Above the Fold) десктопного макета шириной от 1280–1440px или мобильного (375–430px). Если проверяете уже запущенный сайт, откройте Chrome DevTools (F12), нажмите Ctrl+Shift+P (или Cmd+Shift+P на Mac) и выберите команду Capture area screenshot для первого экрана.

3. Разметьте зоны интереса (Areas of Interest — AOI). После генерации тепловой карты обведите прямоугольными рамками ключевые функциональные блоки: ценностное предложение (заголовок H1), главную кнопку действия (Primary CTA), навигационное меню и декоративную иллюстрацию. Система мгновенно рассчитает точный процент внимания внутри каждой рамки.

4. Сверьте показатели с продуктовыми нормами. Главная кнопка CTA на первом экране должна собирать не менее 6–9% общего внимания, а в паре с заголовком — удерживать от 25% до 35% фокуса. Если логотип компании или фотография улыбающегося человека в правой колонке перетягивает на себя 30–40%, а на кнопку остаётся 2%, конверсия первого экрана будет провальной.

Как читать и лечить проблемы на тепловой карте

Разберём реальный кейс редизайна первого экрана SaaS-сервиса аналитики. В исходном варианте дизайнер поставил справа крупную яркую фотографию девушки с ноутбуком, смотрящей прямо в камеру, в шапке выделил цветную плашку «Тарифы», а основную кнопку «Начать бесплатно» сделал контурной (ghost button) под длинным абзацем текста.

Четыре главных приёма коррекции визуальной иерархии по результатам AI-карты:

• Правило направления взгляда (Gaze Cueing). Человеческий мозг эволюционно запрограммирован сначала смотреть в глаза другому человеку на фото, а затем прослеживать линию его взгляда. Если модель на баннере смотрит прямо на зрителя, внимание «застревает» на лице. Поверните персонажа или поверните ракурс мокапа в сторону кнопки CTA — и горячее пятно сместится на целевое действие.
• Увеличение локального контраста и пустого пространства. Чтобы поднять внимание на CTA с 3% до 8%, не нужно делать кнопку гигантской. Достаточно увеличить отступы (whitespace) вокруг неё на 16–24px и убрать конкурирующие цветные бейджи рядом.
• Приглушение вторичной навигации. Если верхнее меню горит красным на тепловой карте, уберите заливку с кнопки «Войти» в шапке, оставив акцентный цвет только для главного целевого действия страницы.
• Снятие визуального шума. Равномерное зелёно-жёлтое пятно по всему экрану при Clarity Score ниже 45 говорит о том, что все карточки имеют одинаковый визуальный вес. Выделите один рекомендуемый тариф или одну главную карточку размером и контрастом.

A/B-сравнение двух макетов прямо из Figma до вёрстки

Одно из самых сильных применений AI-тепловых карт — режим Comparison Mode до передачи макета в разработку. Вместо того чтобы спорить с арт-директором или заказчиком, какой вариант компоновки лучше, вы проверяете оба фрейма за полминуты:

1. В Figma создайте два дубликата фрейма: Вариант А (например, классическая двухколоночная сетка: текст слева, интерфейс справа) и Вариант Б (центрованная композиция с крупным заголовком и широким превью продукта снизу).
2. Выделите оба фрейма в плагине Attention Insight и запустите сравнительный анализ.
3. Сравните два числа: Clarity Score и AOI на главной кнопке. На встрече с заказчиком вы открываете таблицу сравнения и аргументируете языком цифр: «В варианте Б кнопка получает 8.5% внимания против 4.1% в варианте А, а чистота восприятия выше на 18 пунктов». Это мгновенно переводит обсуждение из плоскости «мне не нравится этот зелёный» в плоскость продуктовой эффективности.

В каких 3 случаях AI-тепловая карта ошибается

Предсказательная модель — мощный сканер первичного восприятия, но у неё нет понимания человеческой логики и контекста задачи. Дизайнер обязан знать три слепые зоны, где полагаться на AI-тепловую карту нельзя:

1. Длинный скролл и сторителлинг ниже первого экрана (Below the fold). Нейросеть обучена на первых 3–5 секундах знакомства со страницей, когда работает быстрое периферическое зрение. Когда пользователь прокручивает лонгрид до третьего-четвёртого экрана, он уже переключился в режим осознанного чтения. Там работают смысловые якоря, таблицы сравнения и аргументация, а не просто яркие пятна. Оценивать весь 10-экранный лендинг одним длинным скриншотом бессмысленно — проверяйте экраны по отдельности.
2. Интерактивные калькуляторы, конфигураторы и сложные формы. В интерфейсе ипотечного калькулятора, конструктора тарифов или многошагового чекаута взгляд человека управляется когнитивной задачей: он ищет поле ввода суммы, ползунок срока и итоговый расчёт. AI-модель не умеет «считать в уме» — она покажет, что пользователь якобы смотрит на декоративную иконку банка или яркий баннер в углу, хотя в реальности человек 40 секунд внимательно изучает мелкие серые цифры процентной ставки.
3. Знакомые паттерны закрытых B2B-систем и профессиональных инструментов. В CRM-системах, бухгалтерских терминалах, таблицах аналитики или медицинских картах пользователи работают каждый день по 8 часов. У них сформирована мышечная память: логист смотрит прямо в левый нижний угол таблицы за номером накладной, полностью игнорируя крупные заголовки. AI-тепловая карта всегда смотрит на интерфейс глазами «случайного прохожего, открывшего экран впервые в жизни».

Maze — проверка сценариев на реальных людях с AI-аналитикой

Когда визуальная иерархия вычищена, наступает очередь проверки навигации и логики переходов. Maze — ведущая платформа для немодерируемого (unmoderated) тестирования интерактивных прототипов Figma, где реальные респонденты проходят сценарии, а искусственный интеллект берёт на себя модерацию и расшифровку результатов.

Что делает AI внутри Maze

• Проверка формулировок до запуска (Bias Check) — нейросеть анализирует ваши задания и предупреждает, если вы случайно использовали наводящую подсказку (например, написали «Нажмите на синюю иконку профиля в правом углу», вместо «Попробуйте сменить пароль в настройках аккаунта»).
• Контекстные вопросы (AI Follow-ups) — если пользователь застрял на экране на 30 секунд или ушёл по ложному пути, AI-ассистент автоматически задаёт уточняющий вопрос в конце миссии: «Что вызвало затруднение на экране выбора способа оплаты?».
• Кластеризация открытых ответов и отчёты — превращает десятки текстовых комментариев в сгруппированные темы с расчётом доли успешных прохождений (Direct Success Rate) и процента ошибочных кликов (Misclick Rate).

Как запустить тест прототипа в Maze

1. Создайте проект на maze.co. Бесплатный тариф включает 1 активный проект и до 10 блоков внутри теста (платный план Starter — от $99/мес для продуктовых команд).

2. Подключите интерактивный прототип из Figma. Нажмите Create Maze → Prototype Test и вставьте ссылку на ваш Figma-фрейм с настроенными переходами (Prototype links).

3. Сформулируйте продуктовые миссии (Missions). Задайте жизненную задачу без подсказки слов из интерфейса: «Вы хотите подключить командный доступ на 5 сотрудников и узнать стоимость со скидкой за год. Дойдите до экрана подтверждения счёта».

4. Соберите 7–10 прохождений и изучите карту кликов. Отправьте ссылку представителям целевой аудитории или коллегам, не видевшим макет. В разделе Results откройте тепловую карту реальных кликов по каждому экрану: если 40% людей нажимают на некликабельную карточку или теряются в меню, вы увидите точную причину отказа.

Useberry — экспресс-проверка первого клика за 15 минут

Если у вас ещё нет связанного прототипа из 15 экранов, а есть только один статичный макет и нужно быстро проверить понятность интерфейса, используйте Useberry (useberry.com, бесплатно до 10 ответов в месяц, платные тарифы от $33/мес).

Четыре точечные методики в Useberry, которые закрывают 80% вопросов на старте проекта:

• Тест первого клика (First Click Test) — вы показываете статичный экран и даёте задание: «Куда вы нажмёте, чтобы оформить возврат товара?». По исследованиям юзабилити, если первый клик человека оказался верным, вероятность успешного выполнения всей задачи составляет 87%; если первый клик ошибочен — шанс падает до 46%.
• Тест пяти секунд (5-Second Test) — респондент видит первый экран ровно 5 секунд, после чего макет скрывается, и человек отвечает на два вопроса: «О чём этот сайт и какую услугу предлагает компания?» и «Что вам запомнилось больше всего?». Идеальный способ проверить, считывается ли ваш оффер.
• Карточная сортировка (Card Sorting) — пользователи сами раскладывают 20–30 пунктов будущего меню или каталога по логичным для них группам. Спасает от создания запутанной навигации.
• Тест предпочтений (Preference Test) — быстрый опрос, какой из двух вариантов карточки товара или иконки вызывает больше доверия и почему.

Как объединить инструменты в двухэтапный фильтр

Профессиональный пайплайн UX-исследователя в 2026 году строится по принципу воронки от дешёвого и мгновенного к более глубокому:

Этап 1. AI-скрининг (2 минуты, 0 респондентов):
  3 черновых варианта первого экрана в Figma
  → проверка через плагин Attention Insight
  → отсев перегруженных вариантов (Clarity Score < 55, CTA < 5%)
  → доработка контраста и композиции двух лучших версий

Этап 2. Экспресс-валидация смыслов (20 минут, 5–8 человек):
  Финализированный экран загружается в Useberry (5-Second Test + First Click)
  → проверяем, понимают ли живые люди текст заголовка и находят ли нужный раздел

Этап 3. Сценарный тест ключевого флоу (1–2 часа, 8–10 человек):
  Связанный прототип проверяется в Maze на выполнение сквозной задачи
  → анализ Misclick Rate и точек отвала до передачи в разработку

Такой подход экономит до 60–70% времени: вы не тратите внимание живых тестировщиков на сырые макеты, в которых кнопка просто слилась с фоном.