Projetar experiências do usuário com IA

Da perspectiva de um usuário, os sistemas de IA são inerentemente incertos. Elas podem produzir resultados inconsistentes e cometer erros regularmente. A interface do usuário oferece muitas oportunidades para absorver, filtrar e reduzir frustrações causadas pelas limitações da IA. Como desenvolvedor, você desempenha um papel central na criação de experiências do usuário de IA porque tem um insight mais profundo sobre como e onde um sistema de IA provavelmente vai falhar.

Uma consideração importante de design é o nível de controle que os usuários têm sobre a IA. Algumas oportunidades são invisíveis para os usuários, enquanto outras têm interação explícita. Maior exposição significa mais flexibilidade, mas também mais risco e complexidade que precisam ser gerenciados.

Neste módulo, vamos aprender as práticas recomendadas para criar padrões de experiência do usuário (UX) para três tipos de exposição: em segundo plano, restrita e aberta. Para cada tipo, destacamos como as escolhas técnicas e de arquitetura afetam a experiência do usuário do sistema de IA.

IA de plano de fundo

A IA pode ser usada para aumentar sutilmente uma experiência atual sem introduzir novos recursos. Isso minimiza a interrupção e o potencial de falha. Nesse caso, a responsabilidade pela utilidade, confiabilidade e degradação gradual é totalmente do produto. Os usuários não precisam aprender como a IA funciona nem saber que ela está envolvida para se beneficiar dela.

A IA de plano de fundo é mais adequada quando:

  • A tarefa é de baixo risco.
  • O controle do usuário não melhoraria os resultados de forma significativa.
  • O produto ainda pode oferecer seu valor principal, mesmo que o recurso de IA falhe ou não esteja disponível.

Há muitos exemplos de IA em segundo plano na Web, desde filtros de spam até recomendações de entretenimento, ou até mesmo exemplos complexos, como os comentários de fluxo de balas do BILIBILI. Alguns desses recursos talvez nem sejam considerados "IA".

Exemplo: resumos e destaques de avaliações gerados com IA

Lembra da Example Shoppe? Até agora, compartilhamos dois projetos de sistema para diferentes recursos de IA, incluindo um recurso de suporte ao cliente e uma pesquisa de produtos aprimorada. Agora, estamos lançando um terceiro recurso: os resumos de avaliações. Confira o blueprint do sistema de IA.

As páginas de produtos geralmente contêm centenas de avaliações. Para os usuários, pode ser difícil avaliar as características que realmente importam.

Você pode usar a IA para oferecer temas recorrentes nas pesquisas e fornecer destaques e resumos de avaliações personalizados. Na nossa interface de exemplo, o usuário está procurando fones de ouvido. Por isso, os temas de qualidade de som e duração da bateria são destacados. Isso reduz a carga cognitiva e pode levar a decisões de compra mais rápidas.

Exemplo de fichas de avaliação da Shopee.
Figura 1. O usuário pesquisou fones de ouvido sem fio na Example Shoppe. A página do produto também destaca pesquisas recentes, interesses detectados por IA e avaliações dos clientes. O resumo da avaliação é personalizado com esses interesses, além de outros que podem ser relevantes. Esse resumo fica acima das avaliações verificadas dos clientes e tem uma aparência diferente para não ser confundido com uma avaliação individual.

Como os resumos são exclusivos para cada pessoa, priorize a privacidade e a velocidade ao escolher sua plataforma. Talvez você queira escolher a IA integrada e a API Summarizer para que a computação aconteça diretamente no dispositivo do usuário.

Práticas recomendadas

Siga estas diretrizes para que o recurso de IA se integre perfeitamente à experiência do usuário atual:

  • Ofereça transparência leve: quando a IA transforma ou agrega conteúdo gerado pelo usuário, pistas sutis definem as expectativas dos usuários. Use rótulos neutros, como "Resumo" ou "Principais insights", e adicione divulgação progressiva com dicas ou outros elementos da interface.
  • Permitir recusa: as pessoas têm atitudes diferentes em relação à IA. Algumas pessoas podem achar a IA intrusiva, excessiva ou irritante. Ofereça um caminho claro para desativar esses recursos.
  • Preste atenção à linguagem: a linguagem é uma parte importante de qualquer experiência do usuário, incluindo textos gerados por IA. No nosso exemplo, os resumos devem refletir tendências, não declarações. Adicione regras ao comando do sistema para reduzir ou remover linguagem excessivamente confiante no resumo.
  • Projete um substituto elegante: quando possível, ofereça valor sem IA. Se o resumo não estiver disponível por motivos técnicos, como um modelo indisponível, o sistema ainda vai oferecer avaliações sem resumo. Depois que o modelo for baixado, o aplicativo poderá expor automaticamente o novo resumo.
  • Minimizar a interrupção durante a configuração: o download inicial de um modelo do lado do cliente pode criar atrito. Demonstre o valor do recurso primeiro. Você pode adicionar um fallback limitado do lado do servidor ou mover o download para o final da jornada do usuário, para que a interrupção seja mínima. O tempo e o contexto adequados ajudam a alinhar seu produto às prioridades do usuário.

IA restrita

Enquanto a IA em segundo plano é executada automaticamente, os recursos de IA restrita são acionados explicitamente pelo usuário, geralmente com um link ou botão. Você determina a tarefa, a intenção, as restrições e o formato de saída em um comando do sistema. Ao contrário de um cursor de comando aberto, os usuários têm opções limitadas ou nenhuma opção além de iniciar a tarefa e receber uma saída. O sistema mantém a previsibilidade ao restringir o que a IA pode fazer.

Assim como a IA em segundo plano, os recursos de IA restrita funcionam bem com modelos do lado do cliente personalizados para a tarefa específica.

Exemplo: geração de títulos

A geração de manchetes pode ser uma tarefa particularmente difícil. O BlogBuddy usa IA para ajudar os escritores a oferecer títulos contextuais e relevantes com o mínimo de esforço. Confira o blueprint do sistema de IA para esse recurso.

O usuário pode clicar em Mostrar títulos para gerar vários rascunhos para avaliação e refinamento.

Editor do BlogBuddy com um ensaio pessoal.
Figura 2. O BlogBuddy tem um editor de conteúdo com várias ações baseadas em IA.
O BlogBuddy tem três exemplos de títulos para você escolher.
Figura 3. Depois de selecionado, o botão "Mostrar títulos" fornece títulos relevantes com base no conteúdo do blog.

Mostramos como isso pode ser implementado com a API Prompt em Engenharia de comando. Crie um comando de sistema que codifique a tarefa, as restrições de estilo e a estrutura de saída. Apenas o conteúdo da postagem do blog é transmitido dinamicamente da interface. Com a implementação do lado do cliente, o recurso é otimizado para iterar sem custo de configuração.

Práticas recomendadas

Sua meta é incentivar os usuários a usar novos recursos. Para isso, demonstre valor e dê a eles o controle sobre o resultado:

  • Comunique clareza e confiança: rótulos de ação claros são sempre preferíveis a linguagem genérica, como "Perguntar à IA". O usuário precisa entender o que está acontecendo, além de como isso acontece. Se a latência do recurso for baixa, adicione rótulos que indiquem que o resultado já está disponível. Por exemplo, Mostrar títulos em vez de Gerar títulos.
  • Mantenha o usuário informado: adicione um pouco de fricção cognitiva para manter os usuários alerta. Ao oferecer várias opções, você evita que os usuários se sintam presos a um resultado que não gostam. Os usuários precisam poder aceitar ou editar os resultados explicitamente antes de serem salvos.
  • Se possível, prepare o resultado com antecedência: principalmente para tarefas do lado do cliente, considere pré-calcular o resultado para que ele esteja disponível imediatamente.
  • Suporte à iteração rápida: a regeneração precisa ser fácil, reversível e barata. Os usuários precisam ter a opção de desfazer as ações. Colete esses indicadores de feedback para ajustar o recurso em execuções futuras.
  • Se necessário, forneça controles mais refinados: outros elementos estruturados, como tags de tom, seletores de tamanho ou estilos predefinidos, podem ser usados para refinar os resultados. Em muitos casos, a necessidade de controle adicional surge com o tempo, à medida que a confiança e os requisitos do usuário evoluem. Estabeleça ciclos de feedback que permitam acompanhar esses desenvolvimentos.
Geração de títulos mais refinada do BlogBuddy.
Figura 4. Você pode adicionar menus suspensos para modificar o tom, a extensão e o estilo dos títulos gerados pelo BlogBuddy.

Como escolher entre IA em segundo plano e IA restrita

Figura 5. O BlogBuddy pode mostrar títulos gerados por IA quando o usuário clica no campo de entrada de título.

Alguns recursos podem ser implementados como IA em segundo plano ou restrita, dependendo de como e quando você os apresenta. Essa distinção é afetada pela visibilidade, pela carga cognitiva e pelo tempo, e não pelas capacidades disponíveis. Por exemplo, em vez de exigir um clique explícito em um botão, os títulos podem ser preparados proativamente em segundo plano enquanto o usuário escreve. Quando o usuário focar o campo de título, você poderá apresentar sugestões.

Essa abordagem funciona melhor quando:

  • As entradas exigidas pelo recurso estão disponíveis por padrão
  • O número de recursos com tecnologia de IA é pequeno
  • O custo da pré-computação é baixo
  • As sugestões podem ser integradas sem distrair o usuário da tarefa.

Em contraste, a IA restrita é preferível em produtos com várias ações ou recursos de IA. Os gatilhos explícitos ajudam a evitar cálculos desnecessários e dão aos usuários uma sensação maior de intenção e autonomia.

IA de resposta livre

A IA aberta dá aos usuários controle direto sobre o comportamento de um sistema de IA com entrada de formato livre. Em vez de acionar uma ação predeterminada, os usuários podem fornecer contexto em linguagem natural. Depois de enviado, o sistema de IA interpreta a intenção, adiciona o contexto ausente e faz a melhor estimativa sobre o que fazer em seguida.

As entradas são altamente individuais e muitas vezes imprevisíveis. Por isso, seu sistema de IA precisa lidar com essa variabilidade. Esse tipo oferece a maior flexibilidade, mas também o maior risco para a experiência do usuário:

  • Entrada do usuário ambígua ou incompleta
  • Saídas imprevisíveis
  • Maior probabilidade de respostas incorretas ou enganosas
  • Maior risco de confiança excessiva
  • Tentativas de comprometer o sistema, por exemplo, fazendo com que ele gere conteúdo inadequado

Exemplo: representante de atendimento ao cliente com tecnologia de IA

Para a Example Shoppe, o suporte ao cliente abrange uma ampla variedade de problemas: rastreamento de pedidos, devoluções, dúvidas sobre produtos, problemas de entrega e casos extremos que não se encaixam em fluxos de trabalho claros. Relembre o projeto do sistema de IA do módulo Plataforma.

Depois de adicionar recursos de IA restrita para as ações mais comuns, sua interface pode ficar lotada. Em vez disso, um agente de suporte de IA aberto pode oferecer flexibilidade.

  • Resolva problemas comuns rapidamente.
  • Reduza os tempos de espera e os custos de suporte.
  • Oferecer assistência imediata em vários temas, sem fluxos de suporte complexos.

O valor do agente de suporte está em lidar com a variabilidade em grande escala. Em última análise, você precisa criar um sistema que possa processar essas entradas de forma responsável. Embora você espere que os usuários usem o bom senso e calibrem a confiança, você pode ser responsabilizado por respostas incorretas oferecidas pelo modelo.

Os usuários abrem um chat com o agente e perguntam: "Onde está meu pedido?" ou "Recebi uma cobrança dupla. Você pode ajudar?" O agente interpreta a intenção, faz perguntas para esclarecer, recupera informações relevantes e propõe próximas etapas ou ações.

Figura 6. Um agente de suporte ao cliente aberto aceita qualquer entrada do usuário. Ele pode orientar os usuários com sugestões de comandos predefinidas. Ver esta imagem no tamanho original.
Figura 7. Mesmo em UX de resposta livre, elementos estruturados, como IDs de pedidos clicáveis, podem reduzir erros. Ver esta imagem no tamanho original.

A maioria dos sistemas de IA de resposta aberta depende de modelos do lado do servidor. Eles podem ser combinados com outros componentes, como bancos de dados, ferramentas externas e lógica de negócios, para formar um sistema de IA composto. Você precisa fornecer caminhos de encaminhamento para agentes de suporte humanos.

Práticas recomendadas

Foque na transparência, na calibragem da confiança e nos mecanismos de controle:

  • Oriente os usuários a expressar a intenção com clareza: ofereça sugestões de comandos ("Quero devolver um pedido") e acompanhamentos sugeridos para reduzir a ambiguidade.
  • Deixe o estado e as proposições do sistema visíveis: o agente precisa comunicar claramente o que entende ("Parece que você está perguntando sobre o pedido 12345") e quais informações está usando.
  • Pergunte antes de agir: antes de executar ações sensíveis, como devoluções, reembolsos, mudanças de endereço, o agente precisa resumir a ação e pedir a confirmação do usuário.
  • Design para verificação e correção: os usuários precisam conseguir corrigir mal-entendidos, reformular pedidos ou voltar a conversa sem precisar começar de novo.
  • Combine com recursos de IA restrita: conversas muito longas podem desmotivar os usuários. Adicione elementos estruturados como atalhos. Por exemplo, um número de pedido inferido pode ser apresentado como um elemento clicável que permite ao usuário pesquisar, selecionar ou substituir o número, em vez de exigir que ele reformule a solicitação em texto.
  • Mostrar incerteza e limitações: o agente precisa admitir incerteza, sinalizar informações ausentes e encaminhar para um humano quando a confiança estiver baixa.

Esse tipo de experiência de IA exige que os usuários avaliem as respostas de forma crítica e entendam quando encaminhar.

Pontos principais

Neste módulo, analisamos diferentes tipos de experiências do usuário com IA:

  • Com a IA em segundo plano, você pode adicionar mais valor ou encanto à jornada do usuário atual.
  • Os recursos de IA restrita podem ser usados em casos de uso específicos e bem definidos que são mais adequados para a IA.
  • A IA aberta é necessária para domínios com alta variabilidade. Use apenas respostas abertas se você tiver muita confiança no desempenho técnico do seu sistema.

A tabela a seguir resume os padrões de UX recomendados para cada tipo de IA:

Tema de UX Padrão de UX Contexto Restrito Resposta aberta
Transparência A IA é claramente sinalizada
Explicação leve do comportamento da IA
Estado e proposições do sistema visíveis
Orientação Sugestões de comandos
Entrada estruturada (tags, predefinições)
Controle Acionador explícito de IA
Visualizar antes de aplicar a saída
Várias alternativas
Gerar novamente
Desfazer
Calibragem de confiança Linguagem conservadora
Indicadores de confiança
Gerenciamento de riscos e falhas Fricção intencional e portões de revisão
Transferência / encaminhamento para um supervisor
Substituição gradual sem IA
Padrões obrigatórios:
Padrões opcionais:
Não obrigatório: .

Leituras adicionais

Para continuar aprendendo sobre padrões de UX, recomendamos os seguintes recursos:

Teste seu conhecimento

Qual tipo de padrão de UX é o desfoque do plano de fundo de uma videochamada?

IA de plano de fundo
Muito bem, é isso mesmo! Muitas vezes, o desfoque em segundo plano é implementado sem exigir interação do usuário.
IA restrita
Não é bem isso. Embora seja possível oferecer uma alternância para o desfoque de plano de fundo e torná-lo um recurso restrito, isso não é necessário.
IA de resposta livre
Resposta incorreta.

Quando usar a IA de resposta aberta como um padrão de UX?

As entradas do usuário são geralmente imprevisíveis e personalizadas.
Muito bem, é isso mesmo!
Os usuários têm um número limitado de opções para escolher nesse recurso.
Resposta incorreta. É provável que você precise de IA restrita.
Você quer que a IA seja executada do lado do cliente.
Resposta incorreta. Provavelmente, você vai precisar de IA do lado do servidor para lidar com a variabilidade.