AI UX Patterns: как проектировать интерфейсы для AI-продуктов

Цели урока

• Понять принципы AI UX: progressive disclosure, transparency, user control
• Реализовать streaming UI с typing indicators и skeleton screens
• Спроектировать error states для hallucination warnings и confidence indicators
• Построить систему feedback: thumbs up/down, regenerate, edit response
• Выбрать правильный conversational pattern: chat vs command vs inline

ChatGPT и Jasper вышли на рынок почти одновременно - оба на GPT-4, оба с похожей ценой. Через год ChatGPT - 100 млн пользователей, Jasper - экстренное сокращение штата на 30%. Разница была не в модели. Разница была в том, что ChatGPT показывал текст по мере генерации, а Jasper держал пользователя перед спиннером. Typing indicator, skeleton screen, confidence badge - решения на несколько часов разработки, которые определяют судьбу продукта.

• ChatGPT: streaming + typing indicator превратили ожидание в диалог - именно это создало ощущение живого собеседника и запустило вирусный рост до 100M пользователей за 2 месяца
• Notion AI: встроенный inline-паттерн (выделить текст → выбрать AI-действие) оказался эффективнее отдельного чата - команда не строила новый интерфейс, а встроила AI в существующий workflow
• Perplexity: цитаты-источники рядом с каждым утверждением решают проблему доверия к AI-поиску - пользователь видит не просто ответ, а откуда он взялся
• GitHub Copilot: Tab/Esc вместо чат-окна - разработчик не переключает контекст, не формулирует запрос, не ждёт - AI встроен прямо в набор кода

Как чат стал интерфейсом AI

До конца 2022 года у обычного пользователя почти не было способа поговорить с большой языковой моделью: GPT-3 жила за API и была инструментом разработчиков. 30 ноября 2022 года OpenAI выпустила ChatGPT, описав её скромно как модель, которая общается в диалоговом формате. Главным был не сам GPT, а интерфейс: простое поле ввода, история переписки и ответ, который печатается по токенам на глазах у пользователя. Этот стриминг текста сразу дал ощущение, что система думает и отвечает живо, а не зависает на несколько секунд. За пять дней набралось больше миллиона пользователей, за два месяца около ста миллионов, и ChatGPT стал самым быстрорастущим потребительским приложением того времени. Чат как парадигма закрепился: целое поколение AI-продуктов взяло за основу диалоговое окно и потоковую выдачу токенов. Это сместило практику проектирования интерфейсов: продукт стал недетерминированным, ответы вероятностными, и UX пришлось строить вокруг неопределённости вместо привычных предсказуемых экранов.

Предварительные знания

• Streaming: Server-Sent Events, Chunks, and Real-Time LLM Response Display

Принципы AI UX: progressive disclosure, прозрачность, контроль

AI-интерфейсы ломают базовые UX-допущения: результат **недетерминирован**, время ответа **непредсказуемо**, а ошибки **мимикрируют под правильные ответы**. Классические паттерны проектирования здесь не работают - нужна отдельная система принципов. Три столпа AI UX: **progressive disclosure** (пользователь получает краткий ответ сразу, детали - по запросу), **transparency** (интерфейс показывает, что именно сделал AI и на каких данных), **user control** (всегда есть возможность исправить, отменить или запросить альтернативу). ChatGPT нарушил все эти принципы в первых версиях - и именно поэтому OpenAI итерировал интерфейс десятки раз за первый год.

• "Магический чёрный ящик" - AI выдаёт результат без объяснения процесса
• "Ложная уверенность" - AI отвечает безапелляционно даже когда не уверен
• "Нет пути назад" - невозможно отменить, переделать или отредактировать результат AI
• "Бесконечная загрузка" - спиннер без индикации прогресса при длительной генерации
• "Одноразовый результат" - нет возможности получить альтернативный вариант

**Правило №1 AI UX:** если пользователь не понимает, что произошло и почему - интерфейс провалился. AI должен быть инструментом, а не оракулом.

Streaming UX: typing indicators, token-by-token рендеринг

Streaming - это не техническая деталь, а **ключевое UX-решение**. Время до первого токена (TTFT) составляет 200-500 мс, но полный ответ может занять 10-30 секунд. Без streaming пользователь смотрит на пустой экран и не знает, работает ли система вообще. Поэтому ChatGPT запустил streaming с первого дня - психологически живой текст воспринимается как мгновенный ответ, даже если финальная генерация занимает 20 секунд. Streaming-интерфейс проходит четыре фазы: **thinking** (до первого токена - анимация ожидания), **skeleton** (структура ответа появляется заранее), **streaming** (токены рендерятся в реальном времени), **done** (действия: copy, regenerate, feedback).

**Typing indicator** (мигающий курсор или "...") нужен ТОЛЬКО до первого токена. После начала streaming сам текст - лучший индикатор прогресса. Анимация одновременно с появлением текста раздражает пользователей.

Error UX: hallucination warnings, confidence indicators

AI ошибается иначе, чем обычный софт - и это меняет всё. Классическая ошибка выглядит как 500, timeout или validation error: пользователь понимает, что что-то пошло не так. AI-ошибка - это **уверенный, грамматически правильный, убедительно звучащий неправильный ответ**. Perplexity решил эту проблему через цитаты-источники рядом с каждым утверждением: пользователь видит не просто ответ, а откуда он взялся. Клиники, использующие медицинские AI-ассистенты, требуют обязательного confidence indicator - потому что цена галлюцинации в диагнозе несопоставима с ценой спиннера.

**Ошибка новичков:** скрывать неуверенность AI. Если модель галлюцинирует, а интерфейс показывает ответ без предупреждений - пользователь теряет доверие ко ВСЕМУ продукту. Лучше один honest "не знаю" чем десять красивых галлюцинаций.

Feedback loops: thumbs up/down, regenerate, RLHF от пользователей

Каждый ответ AI - это данные, которые можно собрать или потерять навсегда. Thumbs up/down, regenerate, edit - эти кнопки существуют не для красоты интерфейса: они строят **датасет для улучшения модели**. ChatGPT собирает миллионы таких сигналов ежедневно и использует их в RLHF (Reinforcement Learning from Human Feedback) - буквально обучая модель на предпочтениях реальных пользователей. Продукты без feedback loop деградируют: модель не знает, что работает, а что нет, и продолжает делать те же ошибки.

**Самый ценный feedback - это edited responses.** Пользователь буквально показывает, что должна была ответить модель. Такие пары (prompt, edited_response) - готовый dataset для fine-tuning. Notion AI и Jasper используют именно этот подход.

Conversational patterns: chat vs command, multi-turn дизайн

Самая распространённая ошибка в AI-продуктах - делать чат там, где чат не нужен. **Chat pattern** - это один из четырёх архетипов, и далеко не всегда лучший. GitHub Copilot намеренно отказался от chat-интерфейса в первой версии: Tab/Esc внутри редактора эффективнее любого диалога, потому что не разрывает поток разработчика. Notion AI встроил AI в контекстное меню выделенного текста - и получил +100 млн долларов ARR, не создавая отдельного chat-экрана. Выбор между chat, command, inline и agent - это архитектурное решение, которое определяет весь продукт.

**Context window - не бесплатная память.** Каждое сообщение в истории - это токены, за которые идёт оплата. 50 сообщений по 200 токенов = 10,000 токенов контекста на КАЖДЫЙ новый запрос. Без стратегии trimming диалог из 100 сообщений будет стоить в 50 раз дороже первого.

**GitHub Copilot** - пример идеального inline-паттерна: AI предлагает код прямо в редакторе, Tab принимает, Esc отклоняет. Нет отдельного чат-окна, нет переключения контекста. Пользователь остаётся в своём workflow.

Итоги

• Progressive disclosure, transparency, user control - три принципа, без которых AI-интерфейс становится чёрным ящиком
• Streaming UX - это четыре фазы с разным UI: thinking, skeleton, token-by-token, done; каждая требует отдельного решения
• Confidence indicators (high/medium/low) переводят невидимые галлюцинации в явный сигнал для пользователя
• Edited responses - самый сильный feedback-сигнал: готовая обучающая пара (промпт + правильный ответ) для fine-tuning
• Chat - не дефолтный паттерн: command, inline и agent часто дают лучший UX при меньших усилиях
• Контекст диалога - платный ресурс: без trimming стоимость запросов растёт линейно с историей

Что дальше

UX-паттерны определяют как пользователь взаимодействует с AI. Следующий шаг - монетизация этого взаимодействия: billing по токенам, multi-tenancy, API marketplace.

• AI SaaS: биллинг и multi-tenancy — Как превратить AI-продукт в бизнес - usage-based billing, API design, multi-tenancy
• Edge AI — AI в браузере и на мобилках - другой UX-паттерн без серверной задержки

Связанные уроки

• aie-08-streaming — Streaming UI строится на потоковой выдаче токенов
• aie-31-evaluation — Лайки кормят оценку и циклы качества
• aie-33-guardrails — Индикаторы уверенности опираются на guardrails
• aie-65-alignment-rlhf-dpo — Фидбэк пользователей становится данными для RLHF
• sd-10-microservices — Progressive disclosure повторяет слоистые границы систем