Проєктую інтерфейси, які діють: гід з агентного 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 аудит: я розкладу кожну дію за видимими патернами з екранами та перевірками.