Модуль d.9: UX-исследования с AI

Ведущая: Привет-привет! С вами AIStudy — бесплатный курс про искусственный интеллект. Сегодня UX-исследования с нейросетями: как проверить экран, понять аудиторию и разобрать интервью без лаборатории и без недели расшифровок.

Ведущий: Привет! Идём по четырём вопросам. Как нейросеть предсказывает, куда посмотрит человек. Как собрать персону, которая не состоит из клише. Как разобрать интервью так, чтобы модель ничего не выдумала. И как собрать всё это в один аудит сайта.

Ведущая: Часть первая. Начнём с глаз. Я каждый раз слышу, что для таких проверок нужна лаборатория с айтрекером. Это правда?

Ведущий: Раньше да. Лабораторное исследование со слежением за взглядом стоит дорого, занимает недели, и ради каждого экрана его никто не затевает. Поэтому решения про визуальную иерархию принимали по вкусу: давайте кнопку побольше, а картинку поярче. Сейчас появился дешёвый обходной путь, предсказательные тепловые карты.

Ведущая: Предсказательные, то есть никто на экран не смотрит?

Ведущий: Никто. Нейросеть, обученная на данных исследований взгляда, прикидывает, куда человек посмотрит в первые секунды знакомства со страницей. Вы загружаете макет, через несколько секунд получаете карту: тёплые пятна, где глаз цепляется, и холодные, мимо которых он пролетает. Один из таких сервисов называется Attention Insight, у него есть плагин для Figma, так что фрейм даже не нужно экспортировать.

Ведущая: А что, кроме красивой картинки, я получаю?

Ведущий: Три вещи. Сама карта внимания. Доля внимания на зонах, которые вы обводите рамкой: заголовок, главная кнопка, меню, иллюстрация, и система считает, сколько взгляда уходит в каждую рамку. И индекс ясности, то есть насколько экран читается с первого раза, а не перегружен конкурирующими элементами.

Ведущая: Приведи пример, как это лечит.

Ведущий: Первый экран сервиса аналитики. Справа крупная фотография девушки с ноутбуком, она смотрит прямо в камеру. В шапке яркая плашка «Тарифы». А главная кнопка «Начать бесплатно» контурная и стоит под длинным абзацем. На карте всё горит на лице девушки, заголовок тонет, до кнопки взгляд почти не доходит.

Ведущая: Потому что на лица мы смотрим автоматически.

Ведущий: Да, и ещё туда, куда смотрит человек на фото. Отсюда первый приём: разверните героя в сторону кнопки, и горячее пятно поедет за его взглядом. Второй приём: воздух. Чтобы поднять внимание на кнопке, не нужно делать её огромной, достаточно освободить место вокруг и убрать рядом цветные бейджи. Третий: приглушить вторичную навигацию, чтобы «Войти» в шапке не горело ярче главного действия. И четвёртый: если весь экран залит ровным пятном, значит, у всех карточек одинаковый вес, выделите одну главную.

Ведущая: А когда спор с арт-директором? Когда «мне не нравится этот зелёный»?

Ведущий: Для этого есть сравнение двух вариантов прямо из Figma, до вёрстки. Делаете два фрейма, например классическую двухколоночную сетку и центрованную композицию, запускаете сравнение и приходите на встречу с двумя числами: сколько внимания получает кнопка и насколько чисто читается экран. Разговор сразу переезжает из «нравится или не нравится» в «какой вариант работает лучше».

Ведущая: Звучит слишком хорошо. Где подвох?

Ведущий: Подвох в трёх местах, где карте верить нельзя. Первое: длинный скролл. Модель понимает первые секунды, когда работает быстрое боковое зрение. Дальше человек читает осознанно, и ему нужны смысловые якоря, а не яркие пятна. Поэтому десять экранов одним скриншотом не проверяют, только по одному. Второе: калькуляторы, конфигураторы и сложные формы. Там взгляд ведёт задача: человек ищет поле суммы и ползунок срока, а карта покажет, что он смотрит на иконку банка. Третье: привычные профессиональные системы. Логист восемь часов в день смотрит в левый нижний угол таблицы за номером накладной, а карта смотрит глазами человека, который открыл экран впервые в жизни.

Ведущая: И главное, как я понимаю, что карта проверяет заметность, а не понятность.

Ведущий: Это правило номер один. Кнопка может набрать много внимания из-за кислотно-красного цвета, но если на ней написано «Инициализировать», никто не нажмёт. Смыслы проверяют только живые люди.

Ведущая: А где их взять, чтобы не разворачивать целое исследование?

Ведущий: Два сервиса. Первый, Useberry, для быстрых проверок одного статичного экрана. Тест первого клика: показываете экран и просите нажать туда, где оформляется возврат товара. Если первый клик верный, человек намного вероятнее дойдёт до цели. Тест пяти секунд: показываете первый экран на пять секунд, прячете и спрашиваете, о чём этот сайт и что запомнилось. Лучший способ понять, считывается ли ваше предложение. И сортировка карточек: люди сами раскладывают пункты будущего меню по группам.

Ведущая: А если уже есть связанный прототип?

Ведущий: Тогда Maze. Подключаете прототип из Figma, формулируете задание как жизненную задачу, без слов из интерфейса: «Подключите командный доступ для пяти сотрудников и узнайте цену со скидкой за год». Отправляете ссылку семи-десяти людям и смотрите, куда они реально кликают, где застревают и сколько человек прошли путь с первого раза. ИИ внутри Maze задаёт уточняющие вопросы тем, кто завис, и сводит открытые ответы в темы.

Ведущая: Как всё сложить в один процесс?

Ведущий: Воронкой, от дешёвого к дорогому. Сначала карта внимания: три черновых варианта первого экрана, отсев перегруженных, доводка двух лучших. Людей ноль, времени пара минут. Потом экспресс-проверка смыслов: пять-восемь человек, тест пяти секунд и первого клика. Потом сценарный тест всего ключевого пути в Maze на восьми-десяти людях. Так вы не тратите живых тестировщиков на сырые макеты, где кнопка просто слилась с фоном.

Ведущий: Часть вторая. Теперь про людей, для которых мы всё это рисуем. Я просто пишу нейросети «создай персону для приложения доставки еды» и получаю готовую карточку. Что с ней не так?

Ведущая: Всё. Получишь Ивана, тридцать лет, менеджер из Москвы, пьёт латте и хочет удобное приложение с простым интерфейсом. Вопрос: как это поможет решить, какие фильтры вынести на главный экран, а какие поля убрать из оформления заказа? Никак. Любой человек на планете хочет удобное приложение.

Ведущий: Модель что, глупая?

Ведущая: Модель без живой фактуры выдаёт среднее из маркетинговых клише. Лечится двумя вещами. Первое: строим персону не по биографии, а по методу «работа, на которую нанимают продукт», по-английски JTBD. Не «любит собак», а контекст: заказывает ужин в половине десятого после смены, сил готовить нет, бюджет ограничен. Второе: кормим модель настоящими следами боли.

Ведущий: Какими?

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

Ведущий: И что просить у модели?

Ведущая: Карточку из шести частей. Роль и жизненный контекст. Главная работа по формуле: «Когда случилась такая-то ситуация, я хочу сделать вот это, чтобы получить вот это, не столкнувшись с таким-то страхом». Потом четыре силы переключения: что выталкивает из текущего решения, что притягивает в новый продукт, какая тревога мешает оплатить или зарегистрироваться прямо сейчас и какая привычка держит на старом способе, скажем, на таблице в облачном документе. Дальше настоящая цитата, на языке отзывов. И в конце выводы для интерфейса: какие три вещи мы обязаны показать на первом экране, чтобы снять тревогу.

Ведущий: Приведи пример, а то абстрактно.

Ведущая: Доставка еды. В старой персоне «хочет качественную еду быстро». В новой: «Бесит, когда сервисный сбор и платная доставка всплывают только на последнем шаге, после привязки карты». Из этого сразу решение для экрана: показать стоимость доставки на карточке ресторана в каталоге, до корзины. Или онлайн-школа. Анна, двадцать восемь лет, маркетолог, сидит в таблицах и хочет сменить профессию без увольнения. Учиться может только вечером. Главная тревога: «А вдруг я куплю годовой курс и заброшу через две недели». Решение для интерфейса: открыть первые уроки без регистрации и без карты и показать программу по шагам до оплаты.

Ведущий: Ладно, персона есть. Дальше карта пути?

Ведущая: Да. Когда персона опирается на тревогу, карта пути перестаёт быть формальной таблицей для отчёта и становится чертежом экранов. Просим модель разбить путь на шесть этапов: триггер, поиск и сравнение, первое знакомство с сайтом и доверие, первое целевое действие, регулярное использование, продление и рекомендация коллегам. На каждом этапе нужно: что человек делает, о чём тревожится внутри, насколько ему хорошо или плохо и почему, какой экран или уведомление он видит, где мы рискуем его потерять и какое решение для интерфейса это закроет.

Ведущий: А потом всё это нужно передать разработчикам.

Ведущая: Для этого узкие места переводим в пользовательские истории: «Как такой-то человек в такой-то ситуации, я хочу такое-то действие, чтобы снять такой-то страх». К каждой приписываем важность по шкале «обязательно, желательно, можно» и критерии приёмки в формате «дано, когда, тогда»: что должно быть на экране, как система реагирует на ошибку и что происходит при успехе.

Ведущий: А где всё это раскладывать, чтобы не в голой таблице?

Ведущая: Если команда живёт в Figma или FigJam, сначала получаете глубокое содержание от языковой модели, а потом раскладываете на холсте аккуратными карточками перед воркшопом. Не заставляйте плагины придумывать всё с нуля по одной короткой фразе, выйдет то же среднее. И ещё приём: сервисы синтетических респондентов вроде Synthetic Users. Это тренажёр для вопросов. Если даже вымышленный собеседник отвечает односложно или уходит в общие рассуждения, ваш вопрос слишком абстрактный. Но живых людей он не заменит.

Ведущий: Самое важное: персона от нейросети, даже собранная по отзывам, остаётся гипотезой. Как её проверять?

Ведущая: Четыре шага. Первый: вычеркните всё, что можно перенести без изменений в любой другой продукт: «ценит скорость и качество», «хочет интуитивную навигацию». Если после этого в карточке не осталось специфики вашей ниши, возвращайтесь к сбору отзывов. Второй: сверьте гипотезы с цифрами: где в отчётах Метрики отваливаются люди, о чём спрашивают в поддержке за последний месяц, какие запросы реально вводят в Вордстате. Третий: попросите модель описать анти-персону, человека, которому ваш продукт категорически не подходит, например охотника за бесплатными шаблонами без бюджета. Это спасает от попытки угодить всем сразу. И четвёртый: три-пять коротких интервью по пятнадцать минут. Спрашивайте про прошлое: «Расскажите, как вы в последний раз решали эту задачу. Что раздражало сильнее всего?» После третьего разговора обновите карточку живыми цитатами.

Ведущий: И один запрет, как я понимаю, про отчёты.

Ведущая: Никогда не выдавайте сгенерированную персону за итоги полевого исследования. Подписывайте честно: «продуктовая гипотеза аудитории на основе анализа сорока отзывов конкурентов». Заказчику такая прозрачность говорит о зрелости, а попытка выдать генерацию за живые интервью рушит доверие на первом же вопросе о выборке.

Ведущая: Часть третья. Допустим, интервью мы всё-таки провели. Десять разговоров по сорок пять минут. И что с этим делать?

Ведущий: Вот тут обычно и начинается кладбище файлов. Семь с половиной часов записи. Расшифровать час речи вручную занимает три-четыре часа, потом ещё разметка и сведение инсайтов: получается рабочая неделя. Времени нет, записи оседают в облачной папке, а решения принимаются по впечатлению от самого последнего или самого эмоционального собеседника. Это называется эффект недавности.

Ведущая: И нейросеть, конечно, всех спасёт.

Ведущий: Сожмёт неделю до пары часов, но есть ловушка. Если просто бросить в чат пять расшифровок и попросить «сделай выводы», модель сгладит углы, припишет единичное мнение всем участникам и примет вежливые комплименты за реальный спрос. Поэтому нужен конвейер.

Ведущая: Опиши по шагам.

Ведущий: Шаг первый: чистая запись. Тихая комната, а если шумно, пропустите дорожку через фильтр речи и сожмите файл, чтобы он быстро загружался. Шаг второй: расшифровка с метками времени и разделением говорящих. Для этого есть Whisper и Yandex SpeechKit; второй хорошо знает российские реалии, названия банков и местный сленг. Метки времени обязательны, они понадобятся для проверки. Шаг третий: обезличивание. Перед загрузкой в языковую модель удалите фамилии, телефоны, почту и номера договоров, а каждой записи дайте короткий паспорт в шапке: респондент первый, роль, опыт, какой сервис использует сейчас. Шаг четвёртый: загружаете пять-семь расшифровок в одну модель вместе со строгим исследовательским заданием.

Ведущая: А что в этом задании строгого?

Ведущий: Два правила против двух угроз. Первая угроза, галлюцинации обобщения. Модель стремится выдать красивый связный текст, и если ответа на ваш вопрос в записи не было, она может додумать логичную фразу или так пересказать слова человека, что смысл перевернётся. Правило: каждый вывод идёт с дословной цитатой в кавычках, кодом респондента и меткой времени. Если точной цитаты нет, утверждение удаляется.

Ведущая: А вторая угроза?

Ведущий: Вежливые обещания. Роб Фицпатрик в книге «Спроси маму» показал: люди на интервью не хотят обижать автора проекта. Спросишь «Вам нравится экран? Вы бы купили подписку?» — вежливо ответят: «Да, выглядит отлично, я бы точно пользовался», а после релиза не купят ни одной. Поэтому в задании стоит жёсткий фильтр: всё, что звучит как «я бы купил», «мне кажется, это удобно», «я бы заплатил», считается шумом. Твёрдый факт только один: прошлое. Что человек делал, как решал проблему, за что уже платил.

Ведущая: Приведи пример.

Ведущий: Мобильный банк. Четверо из пяти рассказали про страх при переводе крупной суммы по номеру телефона. Одна девушка в прошлом месяце переводила за аренду шестьдесят пять тысяч, три раза перепроверяла цифры и ещё сначала отправила совсем маленькую сумму на пробу. Это сильный сигнал, и запись с меткой времени можно показать команде. А двое других сказали: «Было бы круто иметь голосового помощника для переводов, я бы точно им пользовался». На уточняющий вопрос выяснилось: ни один за год не запускал уже существующего голосового помощника в приложении. Вывод: голосового бота в разработку не берём. А для экрана подтверждения берём решение: крупно показывать банк получателя и маску имени, плюс плашку «вы уже переводили этому человеку пятнадцатого сентября» для повторных платежей.

Ведущая: Что получается на выходе?

Ведущий: Отчёт из четырёх блоков. Кластеры реального опыта, отсортированные по частоте, с силой сигнала: сильный, когда боль у четырёх-пяти из пяти, умеренный у двух-трёх, единичный у одного. Для каждого кластера цитаты с кодом и временем и обходной путь: как люди справляются прямо сейчас без вашего продукта. Второй блок: отсеянные комплименты. Третий: неожиданные находки, где поведение расходится с собственными словами человека. И четвёртый: таблица решений, то есть доказанная боль, какой экран меняем и как проверим успех.

Ведущая: А что за обходной путь? Зачем он нужен в отчёте?

Ведущий: Это лучшее доказательство, что боль настоящая. Если человек уже сам придумал костыль, переводит пробную сумму, ведёт для этого табличку или звонит хозяину квартиры, значит, проблема достаточно острая, чтобы тратить на неё силы. А ещё обходной путь подсказывает, что именно должен делать ваш продукт, чтобы костыль стал не нужен.

Ведущая: А если записей много, скажем, двадцать интервью?

Ведущий: Не грузите всё в одно сообщение: в середине огромного запроса внимание модели размывается. Обрабатывайте пачками по пять интервью по единому шаблону, а потом отправьте сводки в финальный запрос на объединение.

Ведущая: А отзывы из сторов, сотни коротких?

Ведущий: По тому же принципу. Просите разбить на категории, посчитать долю упоминаний в каждой, выделить три критических блокера, из-за которых люди удаляют приложение, с тремя дословными цитатами, и отделить технические сбои сервера от проблем дизайна. «Не грузится экран» не про интерфейс, а «не понял, как отменить автопродление» как раз про интерфейс.

Ведущая: А командам, где интервью каждую неделю?

Ведущий: Им нужен репозиторий исследований, например Dovetail. Выделяете цитаты прямо в расшифровке, а потом собираете ролики из размеченных моментов. Сорок секунд, где три разных клиента подряд чертыхаются на одну и ту же кнопку, убеждают разработчиков и руководителя сильнее любого текстового отчёта.

Ведущий: Часть четвёртая, последняя. Соберём всё в один аудит сайта.

Ведущая: Классический аудит в агентстве это одна-две недели работы команды и разговор в духе «шрифт мелковат, отступы неровные». Связка из того, что мы разобрали, укладывается в два-три часа, и каждое замечание подкреплено доказательством. Пять этапов. Первый: внимание. Второй: эвристики. Третий: сценарий глазами персоны. Четвёртый: приоритизация. Пятый: отчёт и экран «до и после».

Ведущий: С чего начинаем?

Ведущая: С цифр исходного состояния. Снимаете ключевые экраны воронки: главную, тарифы, форму заявки, в десктопной и мобильной версии. Прогоняете через карту внимания, размечаете зоны и записываете, где мы сейчас: сколько взгляда у главной кнопки, у заголовка, у меню, у баннера, у блока доверия. Обычно находится вампир внимания: декоративный баннер, который забирает больше трети взгляда, пока кнопка получает крохи. Это точка отсчёта, от неё потом защищаете редизайн.

Ведущий: Дальше эвристики?

Ведущая: Загружаете скриншот в мультимодальную модель и просите оценить его по десяти эвристикам юзабилити Якоба Нильсена. Например: видимость состояния системы, предотвращение ошибок до их совершения, распознавание вместо запоминания, помощь при ошибках. По каждой эвристике нужна оценка по пятибалльной шкале, описание проблемы с привязкой к конкретному элементу, с точным текстом кнопки или названием поля, без общих фраз, и рекомендация, что менять в вёрстке, тексте или состояниях. Плюс базовая доступность: контраст текста и размер зон нажатия. В конце просите три главных блокера для конверсии.

Ведущий: А смысловые дыры эвристики поймают?

Ведущая: Нет, для этого персона. Эвристики находят ошибки в компонентах, а персона находит дыры в смысле. Например, на странице заявки все кнопки ровные и контрастные, но нигде не написано, спишутся ли деньги сразу после ввода карты. Вы описываете модели человека, скажем, владельца кофейни, который выбирает систему учёта с телефона в перерыве между поставками. Его задача: понять стоимость за две минуты и открыть демо без звонка навязчивого менеджера. Его страх: «оставлю телефон, и мне будут звонить по десять раз в день, а цен я так и не узнаю». И задаёте три вопроса. В какой момент он закроет вкладку и почему. Какой важной информации не хватает рядом с главной кнопкой. Как переписать заголовок, подзаголовок и текст кнопки, чтобы снять страх.

Ведущий: Как это выглядит в реальной жизни?

Ведущая: Страница пробного доступа в облачном складском сервисе. Было: абстрактный лозунг про инновационную экосистему и стоковое фото рукопожатия, форма из семи обязательных полей, серо-голубая кнопка «Отправить заявку» внизу, которая пугает спам-звонками. А при переходе к форме выбранный тариф пропадал с экрана, и люди возвращались проверять цену. Стало: конкретное предложение «Складской учёт и касса за пятнадцать минут, покажем живой интерфейс без звонков менеджера», вход в один шаг по почте или через аккаунт Яндекса, остальные данные запрашиваются уже внутри продукта. Контрастная кнопка «Открыть демо-кабинет на четырнадцать дней» с подписью «Без привязки карты и звонков». И карточка выбранного тарифа закреплена прямо над кнопкой.

Ведущая: Допустим, на руках двадцать замечаний. Главная ошибка тут вывалить их заказчику одним списком: разработчики утонут в мелочах, а критичные блокеры уедут на следующий квартал. Просим модель оценить каждую проблему по двум осям, влиянию на конверсию и сложности исправления, и разложить по четырём квадрантам. Быстрые победы: сильное влияние при малой сложности, день-два работы, это правка текстов, контраста кнопки, скрытие лишних полей, подсказки. Крупные проекты: сильное влияние, но много работы, например пересборка навигации или новый калькулятор. Косметика, которой занимаются по остаточному принципу. И то, что откладываем, потому что не окупит времени.

Ведущий: И последний этап, отчёт.

Ведущая: Первые две минуты читателя решают всё, поэтому начинайте с краткой сводки: текущая оценка, три критических блокера, из-за которых бизнес теряет заявки прямо сейчас, и ожидаемый эффект от быстрых правок. Дальше методология, разбор находок по экранам воронки, наглядное «до и после» для самого проблемного экрана и дорожная карта на два спринта: сначала быстрые победы без переписывания серверной части, потом архитектурные улучшения. И правило: не оставляйте заказчика один на один со списком критики. Соберите в Figma исправленный экран и покажите измеримую разницу.

Ведущий: А чего такой аудит не заметит?

Ведущая: Технических багов в реальном браузере. Например, когда на айфоне в Safari кнопку закрывает плавающий виджет чата или не приходит смс с кодом. Перед сдачей отчёта пройдите ключевой сценарий руками с телефона.

Ведущий: Два вопроса себе. Какой экран вашего проекта вы проверите картой внимания первым?

Ведущая: И какую самую рискованную гипотезу о пользователях стоит проверить на трёх коротких интервью?

Ведущий: Подведём итог. Первое: карта внимания показывает заметность, а не понятность, поэтому она отсеивает слабые черновики, а смыслы проверяют живые люди, сначала пять-восемь человек на быстрых тестах, потом восемь-десять на сценарии. Второе: персона из головы нейросети состоит из клише, рабочая строится по отзывам, тикетам и страхам, а потом проверяется цифрами и короткими интервью. Третье: при разборе интервью требуйте дословные цитаты с кодом респондента и временем и отсекайте обещания о будущем, ценны только факты из прошлого. Четвёртое: аудит держится на пяти этапах, а отчёт начинается со сводки и экрана «до и после».

Ведущая: Упражнения и картинки к этим урокам ждут на сайте.

Ведущий: Дальше в курсе финальный модуль трека: демо-видео, анимация интерфейса, полный дизайн-кейс и портфолио. А если хочется попробовать разные нейросети в одном месте, без VPN и с оплатой рублями, это наш сервис arckep.ru.

Ведущая: Спасибо, что слушали!

Ведущий: До встречи!