A maioria das interfaces do chatbot compartilham as mesmas partes: uma área de entrada, um thread de mensagens e controles para cada mensagem. A diferença entre um chatbot bom e um frustrante está principalmente nos detalhes dessas partes e em seus estados.
Comece com o estado vazio. Uma tela em branco com uma caixa de texto não dá ideia do que o bot pode fazer. Adicione uma breve descrição e três ou quatro exemplos de prompts que as pessoas podem tocar.
Torne o tópico fácil de ler. Mantenha a largura da mensagem confortável para leitura, separe claramente as mensagens do usuário e da IA, renderize a formatação como listas e código corretamente e mantenha a mensagem mais recente à vista enquanto o novo texto é transmitido, sem pular se a pessoa tiver rolado para cima.
Projete cada estado. Enviar, pensar, transmitir, terminar, parar e falhar devem parecer diferentes. Um indicador de pensamento, geralmente um padrão de pontos ou orbe animado, informa às pessoas que a solicitação foi recebida. Um botão de parar durante a transmissão devolve o controle. Os erros devem dizer o que aconteceu e oferecer uma nova tentativa.
Adicione controles às respostas: copie, gere novamente, edite o prompt anterior e dê feedback. Para um assistente de voz, use um visual claro para ouvir, pensar e falar, para que as pessoas saibam quando falar. ExodeUI, que criamos, possui orbes animados gratuitos para esses estados que são executados em React, Vue, SwiftUI, Flutter e outras estruturas.