Большинство интерфейсов чат-ботов имеют одни и те же части: область ввода, цепочку сообщений и элементы управления для каждого сообщения. Разница между хорошим и разочаровывающим чат-ботом заключается главным образом в деталях этих частей и их состояний.
Начните с пустого состояния. Пустой экран с текстовым полем не дает представления о том, что может делать бот. Добавьте краткое описание и три или четыре примера подсказок, которые люди могут нажать.
Сделайте тему легко читаемой. Сохраняйте ширину сообщения удобной для чтения, четко разделяйте сообщения пользователя и AI, правильно отображайте форматирование, такое как списки и код, и держите последнее сообщение в поле зрения во время поступления новых текстовых потоков, не прыгая, если человек прокрутил вверх.
Спроектируйте каждое государство. Отправка, обдумывание, потоковая передача, завершение, остановка и сбой должны выглядеть по-разному. Индикатор мышления, часто в виде анимированного точечного рисунка или шара, сообщает людям, что запрос был получен. Кнопка остановки во время потоковой передачи возвращает контроль. В сообщениях об ошибках должно быть указано, что произошло, и предложена повторная попытка.
Добавляйте элементы управления к ответам: копируйте, перегенерируйте, редактируйте предыдущее приглашение и оставляйте отзывы. В качестве голосового помощника используйте четкое визуальное представление для слушания, мышления и речи, чтобы люди знали, когда говорить. Создаваемый нами ExodeUI имеет бесплатные анимированные сферы для этих состояний, которые работают в React, Vue, SwiftUI, Flutter и других фреймворках.