Estados da interface do usuário agente: como mostrar o pensamento da IA, as chamadas de ferramentas e o progresso

Por que as execuções de agentes precisam de seus próprios estados

Uma solicitação clássica possui dois estados visíveis: carregando e concluído. Uma execução de agente de IA é diferente. Pode levar segundos ou minutos, passa por várias etapas, como pesquisar, ler arquivos ou chamar uma API, e pode realizar ações com consequências. A pesquisa de tempo de resposta do Nielsen Norman Group ainda se aplica: cerca de 0,1 segundo parece instantâneo, cerca de 1 segundo mantém o fluxo do pensamento e, após cerca de 10 segundos, as pessoas precisam de feedback sobre o que está acontecendo e aproximadamente quanto tempo levará. A maioria dos agentes corre para esse último grupo.

Os estados a serem projetados

Projete cada um deles como seu próprio estado, com sua própria aparência e palavras, não como um botão giratório:

• Recebido: confirme a solicitação instantaneamente (em 0,1 s), por exemplo, mostrando a mensagem no tópico.
• Pensando: um indicador de calma perto de onde a resposta aparecerá. Evite porcentagens de progresso falsas.
• Chamada de ferramenta: nomeie a etapa em palavras simples ("Pesquisando os documentos", "Lendo 3 arquivos"), com uma contagem, se você souber.
• Aguardando aprovação: uma pausa clara quando o agente precisa de permissão antes de agir.
• Streaming: mostra a saída conforme ela chega; pare o indicador de pensamento assim que o texto começar.
• Concluído: um breve resumo do que mudou, com desfazer sempre que possível.
• Parou e falhou: diga o que aconteceu, o que ficou guardado e como tentar novamente.

Mostre o plano, não o registro bruto

Longos registros de chamadas de ferramentas são úteis para depuração, mas complicados para a maioria dos usuários. Um bom padrão é um status de uma linha para a etapa atual, além de uma lista resumida de etapas concluídas que as pessoas podem expandir. Desenvolvedores e usuários avançados podem abrir os detalhes; todos os outros veem o progresso em linguagem simples. Protocolos como AG-UI, um padrão aberto baseado em eventos para conectar agentes a aplicativos voltados para o usuário, existem parcialmente para que os front-ends possam receber esses eventos de etapa de maneira consistente.

Controle e confiança

As pessoas confiam mais nos agentes quando eles permanecem no controle. Mantenha um botão de parada visível durante toda a corrida. Peça confirmação antes de ações irreversíveis como enviar, pagar ou excluir, e mostre exatamente o que vai acontecer. Após a execução, facilite desfazer, editar ou tentar novamente uma única etapa em vez de começar tudo de novo.

Moção para estados de agente

O movimento é um sinal forte de que “algo está acontecendo”, mas os loops ficam cansativos em corridas longas. Use um loop suave e de baixo contraste para pensar, uma mudança distinta quando uma chamada de ferramenta começa e uma resolução clara quando a execução termina. Respeite a configuração de movimento reduzido trocando o movimento por uma mudança sutil de opacidade. Os assistentes de voz costumam usar um orbe animado com estados de inatividade, audição, pensamento e fala claramente diferentes.