Проектирую интерфейсы, которые действуют: гид по агентному UI

В марте 2025 года я пересобрал помощника записи для сервисной компании в Порту. Команда держала 60 сотрудников и обрабатывала 400 заявок на бронирование в неделю. Старый чат отвечал на вопросы о часах работы и ценах. Новый агент действовал по запросам. Он проверял календарь, удерживал окна, отправлял SMS подтверждения и оформлял возвраты до 50 евро после одобрения. Нагрузка на ресепшн упала вдвое за шесть недель. Заполняемость окон выросла с 78 до 94 процентов. Модель осталась прежней. Я изменил интерфейс вокруг неё.

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

От чат-ботов к исполнителям: что изменилось

Чат-боты читают и отвечают. Агенты читают, планируют, вызывают инструменты и отчитываются. Я увидел разрыв на сборке в Порту. Старый бот отвечал на вопрос "Есть ли окна на пятницу" прайсом. Посетитель всё равно звонил на ресепшн для записи. Новый агент проверил три календаря, удержал одно окно на 10 минут и попросил одобрения для подтверждения. Один путь информировал. Второй путь двигал время и деньги.

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

Я измеряю задачу раньше, чем рисую экраны. Я перечисляю пять действий, которые посетители просят чаще всего. Я помечаю, какие действия читают данные и какие действия меняют данные. Читающие действия идут свободно. Меняющие действия требуют подтверждения или отмены.

Библиотека паттернов: прогресс, подтверждение, отмена, лестница

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

Прогресс показывает посетителям текущую работу. Я стримлю server sent events из роута Next.js. Каждое событие несёт короткую подпись, которую я написал вручную. "Проверяю окна на пятницу." "Держу 10:30 десять минут." "Отправляю SMS подтверждение." Я держу максимум четыре видимых шага на ход. Более глубокую работу я схлопываю в одну карточку. Отвал на вызовах инструментов на сборке в Порту упал с 41 до 9 процентов после добавления карточек.

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

Отмена обращает неверный клик. Я держу тост отмены 10 секунд после каждого обратимого действия. "Записал на пятницу 10:30. Отменить." Тост держит фокус для пользователей клавиатуры и объявляется через живую область для пользователей скринридеров. Я веду историю с возвратом в один тап для записей и удержаний. Я помечаю необратимые действия простыми словами до запуска. "Этот возврат отправляет деньги. Его отменить нельзя."

Лестница выводит из промаха. Я веду лестницу из трёх ступеней. Первая ступень ловит опечатки нечётким поиском и спрашивает "Вы имели в виду ClinicPlus" с двумя чипами. Вторая ступень предлагает три самых частых действия чипами. Третья ступень называет человека и срок. "Марта с ресепшна перезвонит в течение одного рабочего часа." Промахы первой ступени закрываются внутри чата в восьмидесяти процентах случаев на моих сборках. Обратные звонки третьей ступени конвертируются в пятьдесят пять процентов в тот же день.

Механика доверия: стеклянный ящик вместо чёрного

Агенты получают доверие, когда посетители видят источники, шаги и пределы. Я показываю, откуда пришёл каждый ответ, что сделал агент и чего он сделать может. Я пишу уверенность конкретными словами. "Совпало с прайсом от марта 2025 года." "Календарь прочитан 20 секунд назад." Я избегаю оценок без источников. Я перечисляю пределы на стартовом экране. "Я записываю на визиты и отвечаю на вопросы о ценах. Медицинские вопросы я передаю сотрудникам."

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

Проверка доступности агентского UI

Проверку доступности я прогоняю на каждом агентском экране до релиза. Агентский UI бьёт по пользователям доступности первым, работа идёт во времени и по карточкам. Я чиню время, фокус и объявления.

Я объявляю прогресс через живую область aria live polite. Область произносит короткие обновления. "Проверяю календарь." "Окно удержано." "Сообщение отправлено." Я держу объявления короче 12 слов. Я перевожу фокус в шторку подтверждения при открытии и возвращаю фокус на кнопку вызова при закрытии. Я держу фокус внутри шторки, пока она открыта. Пользователи клавиатуры одобряют через Enter и отменяют через Escape.

Я держу цели минимум 44 пикселя и контраст 4.5 к 1 для основного текста. Каждый цветовой сигнал я дублирую словами. Зелёная галочка также говорит "Удержано." Красный флаг также говорит "Сбой. Повторите или попросите Марту." Я уважаю режим сниженного движения и заменяю анимированный прогресс статичными текстовыми обновлениями, когда пользователи просят меньше движения. Каждую иконку-кнопку я называю по имени. Каждой карточке я даю заголовок, чтобы пользователи скринридеров прыгали по заголовкам. Пробелы доступности я пишу как дефекты в ту же таблицу, что и промахи агента.

Путь от Figma до продакшена с v0 и деревьями решений

Я начинаю в Figma с дерева решений. Экраны идут позже. Я рисую пять типов узлов: триггер, чтение, проверка, действие, отчёт. Каждый узел действия называет правило подтверждения. Каждый узел проверки называет ветку лестницы. Дерево в Порту держало 14 узлов. Я разбираю дерево с владельцем. Мы убрали два действия, которые владелец трогать агенту запретил.

Я рисую пять состояний для каждого действия: покой, работа, ожидание одобрения, готово, сбой. Работа показывает карточки прогресса. Ожидание показывает шторку подтверждения. Готовность показывает чек со временем, номером и отменой. Сбой показывает причину простыми словами плюс следующее предложение. "Календарь превысил ожидание. Повторите или попросите Марту перезвонить." Прототип цикла я собираю на кликабельных чипах до написания кода.

Первый проход UI я генерирую через v0 по фреймам Figma. Я задаю имена компонентов, список состояний и образцы копи. Я держу вывод компактным: ветка чата, карточка прогресса, шторка подтверждения, тост, строка истории. Я переношу вывод в ветку Next.js и привязываю к роутам. Server sent events движут карточками прогресса. Таблица Postgres под названием agent audit пишет каждый вызов инструмента с session id, действующим, именем инструмента и решением политики. Флаг держит поток на 5 процентах трафика один день. Я смотрю частоту ошибок в Sentry, неуспешные платежи в вебхуках Stripe и новые ветки поддержки. Я открываю полный трафик после чистого дня. Я читаю 20 переписок еженедельно и чиню верхний тег промахов. Этот ритм поднял завершение задач на сборке в Порту с 8 до 24 процентов за восемь недель.

Финал

Сборку в Порту я выпустил с этой библиотекой. Карточки прогресса показывают работу. Подтверждения закрывают деньги. Отмена обращает неверные клики. Лестница вручает посетителям меньшее рабочее предложение. Проверки доступности держат поток открытым для клавиатуры и скринридеров. Деревья держат границы честными. Если ваш агент действует без ясного UI, закажите AI UX аудит: я разложу каждое действие по видимым паттернам с экранами и проверками.