Diretrizes de experiência do usuário para aplicativos MCP em agentes declarativos para Microsoft 365 Copilot

Este guia fornece diretrizes de experiência do usuário (UX) para desenvolvedores que criam experiências de interface do usuário baseadas em MCP no Microsoft 365 Copilot. Ele aborda padrões para criar interações nativas, coerentes e focadas em tarefas que se integram perfeitamente ao fluxo de conversa no Copilot.

Princípios de UX

Criar um ótimo agente do Copilot com a interface do usuário avançada baseada em MCP significa oferecer uma experiência de conversação focada que parece nativa do Copilot. Os agentes do Copilot devem parecer extensões úteis da conversa, trazendo à tona a ação certa no momento certo, em vez de aplicativos completos recriados dentro do Copilot.

Entregue valor conversacional

• O agente deve fornecer maior valor dentro do Copilot do que como uma interface do usuário autônoma.
• Aproveite a linguagem natural, o contexto do thread e a interação de várias voltas para habilitar fluxos de trabalho que seriam difíceis ou ineficientes em um modelo de navegação tradicional.
• Crie experiências que aproveitem a conversa, não repliquem fluxos existentes.

Extraia recursos, não replique interfaces

Evite portar toda a sua experiência de aplicativo para o Copilot. Em vez disso, identifique recursos atômicos de alto valor que podem ser expostos como ferramentas. Cada funcionalidade deve:

• Exija apenas as entradas mínimas necessárias.
• Retorne resultados estruturados e confiáveis.
• Habilite o modelo para determinar com confiança a próxima etapa.

Design para parecer nativo ao Copilot

• Aproveite o sistema de design, os componentes e os padrões de interação do Copilot para garantir uma experiência perfeita e previsível.
• A consistência reduz a carga cognitiva, aumenta a previsibilidade e minimiza a necessidade de os usuários aprenderem novos modelos de interação.

Preservar o controle humano

A confiança é fundamental para a adoção corporativa. Os usuários devem permanecer os tomadores de decisão finais, principalmente quando as ações afetam os dados corporativos. Fornecer:

• Visibilidade clara das ações do agente
• Confirmações explícitas para operações confidenciais
• Resultados transparentes do que foi criado, modificado ou atualizado

Dimensionar densidade intencionalmente

Adapte a pegada visual da interface do usuário às necessidades imediatas do usuário.

• Use o widget embutido para resumos de fácil visualização e ações de alto nível.
• Use o modo de exibição expandido para tarefas em que o usuário precisa de um espaço maior para trabalhar junto com o chat.

Superfícies de Chat

As superfícies de Chat são a principal maneira pela qual os usuários interagem com os agentes criados usando o SDK do Copilot Apps, definindo como um aplicativo aparece e se comporta na conversa do Copilot.

Ao projetar para o Copilot, siga estes princípios básicos:

• Conversa em primeiro lugar: O chat continua sendo o principal modelo de interação.
• Complexidade progressiva: Comece leve. Expanda somente quando necessário.
• Preservação do contexto: Os usuários não devem perder o contexto da conversa.
• Clarity sobre a duplicação: a interface do usuário do aplicativo e o texto do modelo devem se complementar, e não repetir o conteúdo.

Atualmente, o Copilot dá suporte a duas superfícies de chat principais. Cada superfície serve a um propósito distinto e deve ser escolhida com base na complexidade e profundidade da interação.

• Todos os aplicativos devem dar suporte ao modo embutido, em que os widgets embutidos aparecem antes da resposta do modelo gerada.
• O modo lado a lado é uma superfície opcional que pode ser usada quando são necessárias interações mais ricas.

Modo embutido

O modo embutido é a superfície de chat padrão durante a conversa no Copilot. O Inline não é um mini-aplicativo. Melhora a conversa, não a substitui.

Quando usar o modo embutido

Inline é recomendado para:

• Visualizações (documentos, imagens, rascunhos)
• Confirmações
• Ações simples
• Prompts de decisão rápida

As experiências embutidas devem permanecer concisas e, de preferência, caber em uma única rolagem da resposta.

Layout em modo embutido

• Cabeçalho do agente: Identifica o agente respondente e estabelece o contexto.
• Widget embutido: Usado para exibir conteúdo estruturado, visualizações ou controles de ação.
• Resposta do modelo: Uma mensagem curta gerada pelo modelo mostrada após o widget para sugerir edições, próximas etapas e ações relacionadas.

Widget embutido

Os widgets embutidos aparecem diretamente no fluxo do chat, permitindo que os usuários exibam informações e tomem medidas sem sair da conversa. Eles fornecem confirmações rápidas, ações simples ou recursos visuais.

Diretrizes de interação

• Mantenha a interação focada: Evite fluxos de várias etapas, navegação aninhada ou configuração profunda. Se a tarefa exigir iteração, comparação ou edição extensa, vá para Lado a lado.
• Mostrar resumos, não sistemas: O Inline exibe visualizações, não aplicativos completos. Evite rolagem interna, paginação, guias, filtros ou agrupamento de vários níveis.
• Tornar o estado explícito: As interações embutidas devem fornecer comentários claros sobre o sistema, como o estado de carregamento, o estado desabilitado, a confirmação de êxito, o estado de erro com a opção de recuperação. Nunca confie apenas no texto do modelo para comunicar o status do sistema.
• Preserve o fluxo de conversa: Um widget deve caber confortavelmente em uma única rolagem de resposta. Deve evitar dominar a janela de visualização. Deve complementar a resposta do modelo, não competir com ela.

Modo lado a lado (opcional)

O modo lado a lado fornece um espaço de trabalho expandido e imersivo que aparece junto com a conversa. Ele foi projetado para fluxos de trabalho mais ricos que não podem ser entregues de forma eficaz na superfície em linha. Ao contrário do modo embutido, que é otimizado para interações leves, o modo lado a lado cria um espaço de trabalho dedicado para um envolvimento mais profundo, preservando o contexto de conversa.

O modo lado a lado é opcional e deve ser usado intencionalmente.

Quando usar o modo lado a lado

Use o modo lado a lado quando a experiência exigir:

• Edição ou configuração em várias etapas
• Fluxos de trabalho iterativos com estado persistente
• Layouts visuais complexos (tabelas, telas, painéis)
• Tarefas de revisão estendida ou comparação
• Criação avançada (elaboração de documentos, edição de design, entradas estruturadas)
• Interação no nível do espaço de trabalho além de uma única rolagem
• Se a tarefa puder ser concluída em uma interação concisa de um turno, use o modo embutido.

Layout lado a lado

• Painel de conversa: O chat do Copilot que continua sendo a principal fonte de intenção e controle.
• Chiclet card: Quando o modo lado a lado está ativo, o widget embutido original é recolhido em um card compacto na conversa, preservando o contexto com o espaço de trabalho expandido.
• Cabeçalho do painel lado a lado: Exibe a identidade do agente (ícone e nome) e inclui uma opção de entrega para o aplicativo completo.
• Workspace do aplicativo: Superfície maior renderizada por MCP para edição, revisão ou gerenciamento de conteúdo estruturado. Este é um espaço de trabalho contextual dentro do Copilot, não um shell de aplicativo autônomo.
• Controles contextuais: Controles específicos da tarefa no espaço de trabalho (por exemplo: ferramentas de edição, formatação, zoom, exportar).

Diretrizes de interação

• Manter o espaço de trabalho contextual: O modo lado a lado fornece um espaço de trabalho focado e específico para a tarefa - não um shell de aplicativo completo. Evite navegação global, sistemas com várias guias, painéis de configurações ou recursos não relacionados. Se a experiência se parecer com todo o seu produto SaaS, ela excede o escopo.
• Preservar chat como principal: A conversa continua sendo a fonte de intenção e controle. Os usuários devem ser capazes de continuar conversando enquanto o modo lado a lado está aberto, fazer perguntas esclarecedoras no meio da tarefa e ver o Copilot raciocinando ao lado do espaço de trabalho.
• Escopo da tarefa ativa: O modo lado a lado deve dar suporte a um único fluxo de trabalho coerente. Evite alternar entre entidades não relacionadas e iniciar experiências aninhadas. Se vários fluxos de trabalho forem necessários, divida em superfícies ou ações separadas.
• Tornar o estado explícito: As interações embutidas devem fornecer comentários claros sobre o sistema, como o estado de carregamento, o estado desabilitado, a confirmação de êxito, o estado de erro com a opção de recuperação. Nunca confie apenas no texto do modelo para comunicar o status do sistema.
• Manter o escalonamento progressivo: O modo lado a lado deve ser inserido intencionalmente. Não use como padrão o lado a lado para visualizações simples ou confirmações rápidas.

Práticas recomendadas

Diretrizes de design visual

A consistência visual e de interação é fundamental para a experiência do usuário do Copilot. Espera-se que os aplicativos se alinhem ao sistema de design Fluent para que os usuários experimentem um comportamento previsível, controles familiares e experiências consistentes entre os aplicativos. Essa consistência ajuda os usuários a criar confiança, mover-se com confiança entre os fluxos de trabalho e agir com segurança em vários aplicativos no Copilot.

Diretrizes de tema do Fluent Copilot

Crie experiências Microsoft bonitas e coesas usando os kits de interface do usuário do Fluent 2. Integrados ao Figma, os kits de interface do usuário do Fluent 2 contêm ativos de design que são mapeados para as bibliotecas de código. Isso significa uma transferência perfeita do design para o desenvolvimento.

Conteúdo relacionado

• Adicionar aplicativos MCP a agentes declarativos no Microsoft 365 Copilot
• Fluent 2