Как проектировать интерфейсы ИИ-чатов: UX-паттерны для LLM
Продвинутое4 минРедакция Innovialabs
Коротко
Хороший ИИ-чат показывает ответ по мере генерации, помогает начать запрос, раскрывает источники и границы уверенности, позволяет править и перегенерировать, честно обрабатывает ошибки и отказы — и применяется только там, где диалог действительно удобнее формы.
Что отличает интерфейс ИИ-чата
В обычном интерфейсе результат действия предсказуем. В продукте на LLM ответ каждый раз новый, может быть длинным, неточным или вовсе отказом. Поэтому дизайн решает три задачи: сделать ожидание терпимым, помочь сформулировать запрос и дать пользователю контроль над результатом и доверием к нему.
Потоковый ответ
Streaming — текст появляется по мере генерации, а не целиком в конце. Это главный способ сократить воспринимаемое ожидание.
Что продумать:
- Состояние до первого токена: короткий индикатор «думает» или статус этапа («Ищу в документах»), если есть промежуточные шаги.
- Кнопка «Остановить» на время генерации — пользователь часто видит, что ответ ушёл не туда.
- Автоскролл, который отключается, когда пользователь сам прокрутил вверх, и кнопка «вниз» для возврата.
- Стабильный рендер markdown: таблицы и блоки кода не должны «прыгать» при дорисовке.
- Копирование ответа и отдельных блоков кода.
Подсказки запросов
Пустое поле ввода — главный барьер. Помогают:
- Стартовые подсказки на пустом экране, привязанные к реальным задачам продукта, а не общие «Расскажи шутку».
- Follow-up подсказки после ответа: уточнить, сократить, перевести в таблицу.
- Шаблоны и параметры для повторяющихся задач — иногда лучше поле с выбором тона или длины, чем просьба написать это словами.
- Плейсхолдер с примером запроса, а не «Введите сообщение».
Источники и неуверенность
Модель может звучать уверенно и ошибаться. Интерфейс должен помогать проверять:
- Ссылки на источники рядом с утверждениями или списком под ответом, с переходом к конкретному фрагменту документа.
- Явные границы: если ответ опирается только на загруженные документы, скажите это; если данных не нашлось — лучше «не нашёл в базе», чем выдуманный ответ.
- Визуальное разделение найденных фактов и сгенерированных выводов, где это важно.
- Постоянная, но ненавязчивая пометка, что ответы стоит проверять, — особенно в медицине, финансах, праве.
Не показывайте «процент уверенности», если система не умеет его надёжно считать: ложная точность вредит доверию сильнее, чем её отсутствие.
Редактирование и перегенерация
Пользователь должен легко исправить курс диалога:
- Редактировать своё сообщение и получить новый ответ с этого места.
- Перегенерировать ответ; если вариантов несколько — переключатель между ними.
- Править результат прямо в ответе или в отдельном редакторе, если ответ — это документ, код или письмо.
- Ветки понятно показаны: после правки ясно, какой ответ к какой версии запроса относится.
Ошибки и отказы
Разные проблемы — разные состояния:
| Ситуация | Что показать |
|---|---|
| Сеть или сервер | Понятное сообщение и «Повторить» без потери введённого текста |
| Лимит запросов или длины | Что именно превышено и что сделать: подождать, сократить, начать новый диалог |
| Прерванная генерация | Сохранить уже полученную часть и предложить продолжить |
| Отказ модели | Нейтральное объяснение, что запрос вне рамок, и подсказка, с чем можно помочь |
| Нет данных | Честное «не знаю» и предложение уточнить или загрузить источник |
Отказ не должен звучать как обвинение пользователя. И не прячьте ошибку внутри текста ответа — её нужно видно отличать от нормального сообщения.
Обратная связь
- Оценка ответа (нравится / не нравится) рядом с каждым сообщением.
- Причина по клику после отрицательной оценки: неверно, не по теме, слишком длинно — короткий список плюс необязательный комментарий.
- Ясность для пользователя, как используется обратная связь и что попадёт к команде.
Когда чат — неправильный интерфейс
Чат удобен для открытых вопросов, исследования и черновиков. Он проигрывает, когда:
- задача — структурированный ввод: заявка, фильтры, настройки. Форма быстрее и надёжнее;
- нужно сравнивать и просматривать много данных — таблица или дашборд лучше длинной ленты сообщений;
- действие повторяется — кнопка или шаблон быстрее, чем каждый раз писать запрос;
- результат — артефакт для редактирования: удобнее генерация прямо в редакторе документа или кода.
Часто лучшее решение — ИИ внутри привычного интерфейса: кнопка «Сгенерировать описание» у поля, умные подсказки в форме, а не отдельное окно чата.