Projetando sua extensão de reunião do Microsoft Teams

  • Artigo

Você pode criar aplicativos para tornar as reuniões mais produtivas. Por exemplo, peça às pessoas que concluam uma pesquisa durante uma reunião ou enviem um lembrete rápido que não interrompa o fluxo da reunião.

Kit de IU do Microsoft Teams

Você pode encontrar diretrizes de design mais abrangentes, incluindo elementos que podem ser pegos e modificados conforme necessário, no Kit de Interface do Usuário do Microsoft Teams.

Obtenha o Kit de IU do Microsoft Teams (Figma)

Adicionar uma extensão de reunião

Os usuários podem adicionar uma extensão de reunião antes e durante as reuniões. Eles também podem adicionar um aplicativo para uma reunião específica diretamente da Microsoft Teams Store.

Adicionar antes de uma reunião

Nos detalhes da reunião, os usuários podem selecionar Adicionar uma guia + para abrir o flyout do aplicativo e encontrar aplicativos otimizados para reuniões.

O exemplo mostra como adicionar uma extensão de reunião antes de uma reunião.

Adicionar durante uma reunião

Dispositivo móvel

Depois que o aplicativo é adicionado (por exemplo, na área de trabalho), os usuários podem acessar o aplicativo em uma reunião selecionando Mais .

O exemplo mostra como adicionar uma extensão de reunião durante uma reunião no celular.

Desktop

Em uma reunião, os usuários podem selecionar Mais>Adicionar um aplicativo e selecionar o aplicativo desejado.

O exemplo mostra como adicionar uma extensão de reunião durante uma reunião.

Antes de uma reunião

Antes de uma reunião, seu aplicativo está disponível para usuários em uma guia. O exemplo a seguir mostra uma pergunta de pesquisa preliminar que as pessoas responderão durante a reunião.

O exemplo mostra como aplicar conteúdo nos detalhes da reunião antes de uma chamada.

Anatomia: guia reunião (antes e depois das reuniões)

O exemplo mostra a anatomia estrutural de uma guia de reunião antes e depois de uma reunião.

Contador Descrição
1 Nome da guia: rótulo de navegação para sua guia.
2 Excedente da guia: abre as ações de guia, como renomear e remover.
3 iframe: exibe o conteúdo do aplicativo.

Criação com modelos de IU

Use um dos seguintes modelos de interface do usuário do Teams para ajudar a projetar sua guia de reunião:

  • Lista: as listas podem exibir itens relacionados em um formato que facilita a visualização e permite que os usuários executem ações em uma lista inteira ou itens individuais.
  • Painel de tarefas: um painel de tarefas, às vezes chamado de quadro Kanban ou raias, é uma coleção de cartões frequentemente usados para acompanhar o status de itens de trabalho ou tíquetes.
  • Painel: um painel é uma tela que contém vários cartões que fornecem uma visão geral dos dados ou do conteúdo.
  • Formulário: os formulários são para coletar, validar e enviar a entrada do usuário de forma estruturada.
  • Estado vazio: o modelo de estado vazio pode ser usado para muitos cenários, incluindo logon, experiências de primeira execução, mensagens de erro e muito mais.
  • Navegação esquerda: o componente de navegação à esquerda pode ajudar se a guia requer alguma navegação. Em geral, você deve manter a navegação no mínimo.

Usar uma guia na reunião

A guia na reunião é uma tela para aumentar a colaboração durante as reuniões. Os participantes podem ver e interagir com o conteúdo do aplicativo em um espaço dedicado fora do estágio de reunião por meio de exibições compartilhadas ou baseadas em função.

Casos de uso

Pessoas pode usar a guia na reunião para:

  • Forneça comentários detalhados. Por exemplo, avalie um candidato a emprego.
  • Crie uma pesquisa, pesquisa ou item de tarefa para os participantes da reunião.
  • Exibir notas relevantes para a reunião. Por exemplo, informações sobre um lead de vendas.

Dispositivo móvel

O exemplo mostra como você pode apresentar o conteúdo da pesquisa em uma guia de reunião no celular.

Desktop

O exemplo mostra como você pode apresentar o conteúdo da pesquisa em uma guia de reunião.

Anatomia: guia reunião

O exemplo mostra a anatomia estrutural de uma guia em reunião.

Contador Descrição
1 Ícone do aplicativo (selecionado): logotipo do aplicativo transparente de 16 pixels.
2 Nome do aplicativo
3 Cabeçalho: inclui o nome do aplicativo.
4 Botão Fechar: descarta a guia. Use sempre o ícone de fechamento superior direito em vez de uma ação no rodapé.
5 Barra de notificação: os alertas de erro são exibidos diretamente abaixo do cabeçalho e empurram o restante do conteúdo iframe para baixo 20 pixels.
6 iframe: exibe o conteúdo do aplicativo.

Espaçamento

Otimize sua guia na reunião para ajustar borda a borda dentro da área iframe de 280 pixels de largura. Há 20 pixels de preenchimento nos lados esquerdo e direito do iframe e entre o cabeçalho da guia. O iframe está cheio de sangramento até a parte inferior da guia.

O exemplo mostra dimensões de espaçamento da guia na reunião.

Rolagem

Lembre-se do seguinte se você permitir a rolagem:

  • O conteúdo no conteúdo iframe só deve rolar verticalmente.
  • Os usuários só devem ver o conteúdo para o qual rolaram (nada acima ou abaixo).
  • A barra de rolagem faz parte do conteúdo iframe.

O exemplo mostra como a guia na reunião rola.

Para cenários com camadas de navegação ou conteúdo pesado, recomendamos permitir que os usuários acessem uma camada secundária. Os usuários devem ser capazes de voltar para a camada anterior.

O exemplo mostra a navegação na reunião.

Usar uma caixa de diálogo na reunião

As caixas de diálogo na reunião são exibidas no estágio de reunião do Teams. Eles exigem a atenção, a confirmação ou a interação de um usuário, mas são sutis e não interrompem a reunião. Você deve usá-los com moderação e para cenários que são leves e orientados para tarefas.

Casos de uso

As caixas de diálogo na reunião são disparadas por um usuário (como o organizador da reunião) que pode querer que os participantes:

  • Forneça breves comentários.
  • Faça uma breve pesquisa ou pesquisa.
  • Envie aprovações.
  • Obtenha lembretes.

Dispositivo móvel

O exemplo mostra como você pode usar uma caixa de diálogo na reunião no celular.

Desktop

O exemplo mostra como você pode usar uma caixa de diálogo na reunião.

Anatomia: caixa de diálogo na reunião

O exemplo mostra a anatomia estrutural de uma caixa de diálogo na reunião.

Contador Descrição
1 Cabeçalho: inclui ícone do aplicativo, nome, cadeia de caracteres de ação e ícone de fechamento.
2 iframe: exibe o conteúdo do aplicativo.

Anatomia: cabeçalho da caixa de diálogo na reunião

O exemplo mostra a anatomia estrutural de um cabeçalho de diálogo na reunião.

Há duas variantes de cabeçalho. Quando possível, use a variante com o avatar para reforçar que a caixa de diálogo vem de uma pessoa.

Contador Descrição
1 Avatar: pessoa que inicia a caixa de diálogo na reunião.
2 ícone do aplicativo
3 Nome do aplicativo
4 Botão Fechar: descarta a caixa de diálogo.
5 Cadeia de caracteres de ação: normalmente descreve quem iniciou a caixa de diálogo.

Comportamento responsivo: caixas de diálogo na reunião

As caixas de diálogo na reunião podem variar de tamanho para considerar diferentes cenários. Certifique-se de manter o preenchimento e o tamanho dos componentes.

  • Largura: você pode especificar a largura do iframe da caixa de diálogo em qualquer lugar dentro do intervalo de tamanho com suporte.
  • Altura: você pode especificar a altura do iframe da caixa de diálogo em qualquer lugar dentro do intervalo de tamanho com suporte. Você também pode permitir que os usuários rolem verticalmente se o conteúdo do aplicativo exceder a altura máxima.

O exemplo mostra a caixa de diálogo na reunião. Largura: Min-280 pixels (248 pixels iframe). Max-460 pixels (428 pixels iframe). Altura: 300 pixels (iframe).

Usar o estágio de reunião compartilhada

Você pode permitir que os usuários compartilhem e interajam com alguns ou todos os conteúdos do aplicativo no estágio de reunião. Aqui estão exemplos de como as pessoas podem usar esse recurso durante uma reunião:

  • Editando um documento.
  • Whiteboarding
  • Revisando um dashboard.
  • Assistindo a um vídeo.
  • Jogando um jogo.

Os aplicativos compartilhados no estágio de reunião ocupam o mesmo espaço que uma tela compartilhada. O estágio também reorienta para todos os participantes da reunião da mesma maneira.

Casos de uso

A fase de reunião compartilhada é sobre colaboração e participação. Aqui estão alguns cenários de exemplo para ajudá-lo a começar.

Editar e revisar: mergulhe em painéis e planejamento com todos na reunião.

O exemplo mostra uma dashboard sendo revisada no estágio de reunião compartilhada.

O exemplo mostra um componente dashboard sendo revisado no estágio de reunião compartilhada.

Quadro de caracteres: desenhe e idealize juntos em uma tela compartilhada.

O exemplo mostra um quadro de brancos no estágio de reunião compartilhada.

Teste: teste conhecimento e obtenha insights com materiais interativos.

O exemplo mostra um teste no estágio de reunião compartilhado.

Anatomia: compartilhar todo o conteúdo do aplicativo em uma reunião

A imagem mostra a anatomia de design do estágio de reunião compartilhada quando todo o conteúdo do aplicativo é compartilhado.

Contador Descrição
1 Ícone do aplicativo: o ícone realçado indica que a guia de reunião do aplicativo está aberta.
2 Botão Compartilhar para reunião: o ponto de entrada para compartilhar o aplicativo na reunião. Será exibido se você configurar seu aplicativo para usar o estágio de reunião compartilhado.
3 iframe: exibe o conteúdo do aplicativo.
4 Botão Parar de compartilhar: interrompe o compartilhamento do aplicativo para o estágio de reunião. É exibido apenas para o participante que iniciou o compartilhamento.
5 Atribuição do apresentador: exibe o nome do participante que compartilhou o aplicativo.

Anatomia: compartilhar conteúdo de aplicativo específico em uma reunião

A imagem mostra a anatomia de design do estágio de reunião compartilhada quando apenas o conteúdo específico do aplicativo é compartilhado.

Contador Descrição
1 Ícone do aplicativo: o ícone realçado indica que a guia de reunião do aplicativo está aberta.
2 Botão Compartilhar para reunião: o ponto de entrada para compartilhar o aplicativo na reunião. Para uma experiência consistente, use sempre o ícone de compartilhamento padrão do Teams. Compartilhar para reunião é o texto padrão recomendado, mas você também pode personalizá-lo para seus casos de uso. Por exemplo, Jogue juntos para um aplicativo de jogos ou Assista juntos para um aplicativo de vídeo. De qualquer forma, deixe claro que a ação criará uma experiência compartilhada e interativa com todos na reunião.
3 iframe: exibe o conteúdo do aplicativo.
4 Botão Parar de compartilhar: interrompe o compartilhamento do aplicativo para o estágio de reunião. É exibido apenas para o participante que iniciou o compartilhamento.
5 Atribuição do apresentador: exibe o nome do participante que compartilhou o aplicativo.

Comportamento responsivo: estágio de reunião compartilhado

Os aplicativos compartilhados na fase de reunião variam de tamanho com base no estado da reunião e em como o usuário redimensiona a janela. Mantenha o preenchimento e o layout responsivo de navegação e controles da mesma forma que você faria em um navegador.

  • Painel lateral: um usuário pode abrir o painel lateral a qualquer momento durante uma reunião para conversar, exibir a lista ou usar um aplicativo (ou seja, guia na reunião). O estágio reorganiza dinamicamente quando o painel está aberto.
  • Grade de áudio e vídeo: a grade de áudio e vídeo está sempre visível para mostrar os participantes da reunião. Quando um usuário destaca ou fixa alguém na reunião, isso aumenta a altura ou a largura da grade do participante, dependendo da orientação.

Estágio de reunião (sem painel lateral)

Quando o painel lateral não está aberto, o estágio de reunião é de 994x678 pixels, por padrão e pode ser um mínimo de 792x382 pixels.

Imagem mostrando a capacidade de resposta do estágio de reunião compartilhada com o painel lateral fechado.

Estágio de reunião (com painel lateral)

Quando o painel lateral está aberto, o estágio de reunião é de 918x540 pixels por padrão e pode ser um mínimo de 472x382 pixels.

Imagem mostrando a capacidade de resposta do estágio de reunião compartilhada com o painel lateral aberto.

Após uma reunião

Você pode voltar a uma reunião depois que ela terminar e exibir o conteúdo do aplicativo. Neste exemplo, o organizador da reunião pode examinar os resultados da pesquisa na guia Contoso . (Observação: do ponto de vista do design, não há diferença entre a experiência de guia pré e pós-reunião.)

A ilustração de exemplo mostra uma guia pós-reunião.

Práticas recomendadas

Use essas recomendações para criar uma experiência de aplicativo de qualidade.

Interações

Exemplo mostrando como limitar o número de interações.

Fazer: limitar o número de interações

Para caixas de diálogo na reunião, remova conteúdo desnecessário que não ajude os usuários a realizar algo rapidamente.

Exemplo mostrando como não introduzir elementos desnecessários.

Não: introduzir elementos desnecessários

Uma única caixa de diálogo na reunião com várias interações pode distraí-lo da reunião.

Exemplo mostrando como criar um ambiente focado.

Fazer: criar um ambiente focado

Recomendamos manter a experiência do seu aplicativo no escopo apenas para o estágio de reunião. Você pode usar uma guia na reunião no painel lateral como uma exibição secundária e privada para determinados cenários.

Exemplo mostrando como não incluir superfícies concorrentes durante as reuniões.

Não: incluir superfícies concorrentes

Seu aplicativo só deve pedir aos usuários que se concentrem em uma única superfície por vez, seja colaborando no palco ou respondendo a uma caixa de diálogo na reunião. (Observação: você não pode manter as caixas de diálogo sendo disparadas por outros aplicativos enquanto seu aplicativo estiver no palco.)

Layout

Exemplo mostrando como você deve usar um layout de diálogo de coluna única.

Usar uma caixa de diálogo de uma coluna

Como as caixas de diálogo estão no centro da fase de reunião, a conclusão da tarefa deve ser rápida e simples para evitar a frustração do usuário.

Exemplo mostrando que você não deve bagunçar o espaço de uma extensão de reunião.

Não: desordenar o espaço

Conteúdo denso ou excessivamente estruturado pode ser perturbador e avassalador, especialmente durante uma reunião.

Exemplo mostrando um layout de guia de coluna única.

Fazer: usar uma guia de uma coluna

Dada a natureza estreita da guia na reunião, é altamente recomendável exibir o conteúdo em uma única coluna.

Exemplo mostrando uma guia com várias colunas.

Não: usar várias colunas

Devido ao espaço limitado da guia na reunião, layouts com mais de uma coluna não são recomendados.

Controles

Exemplo mostrando como alinhar corretamente os controles primários.

Fazer: alinhar à direita a ação primária

Recomendamos posicionar a ação mais visualmente pesada para o local mais à direita.

Exemplo mostrando como você não deve deixar de alinhar controles primários.

Não: ações de alinhamento à esquerda ou ao centro

Isso se desvia do padrão padrão do Teams para posicionamento de controle em uma caixa de diálogo e pode entrar em conflito com uma caixa de diálogo atrás da parte superior.

Rolagem

Exemplo mostrando a rolagem vertical em uma guia na reunião.

Exemplo mostrando a rolagem vertical no estágio de reunião compartilhada.

Fazer: Rolar verticalmente

Os usuários esperam rolagem vertical no Teams (e em outros lugares). Isso pode não se aplicar se você tiver uma tela criativa, como um quadro de caracteres, que os usuários podem fazer uma pane no eixo x e y.

Exemplo mostrando a rolagem horizontal em uma guia na reunião.

Exemplo mostrando a rolagem horizontal no estágio de reunião compartilhada.

Não: Role horizontalmente

A rolagem horizontal não é um comportamento esperado no Teams (incluindo o ambiente de reunião).

Fluxos de trabalho

Exemplo mostrando um cenário complexo em uma guia de reunião.

Fazer: Cenários complexos de superfície na guia na reunião

Se seu aplicativo incluir várias tarefas, recomendamos usar uma guia na reunião com um layout de coluna única.

Exemplo mostrando cenários complexos em uma caixa de diálogo na reunião.

Não: tornar as caixas de diálogo na reunião complexas

As caixas de diálogo na reunião destinam-se a interações breves.

Temas

Exemplo mostrando uma extensão de reunião com o tema escuro.

Outro exemplo mostrando a extensão de reunião com o tema escuro.

Fazer: Focar no tema escuro

As reuniões do Teams são otimizadas para o tema escuro para ajudar a reduzir o ruído visual e cognitivo para que os usuários possam se concentrar na discussão e no conteúdo compartilhado. Tenha em mente que determinados tipos de aplicativos (como o quadro-branco e a edição de documentos) não precisam de uma tela escura.

Exemplo mostrando uma extensão de reunião com cores que não correspondem ao tema da reunião.

Outro exemplo mostrando uma extensão de reunião com cores que não correspondem ao tema da reunião.

Não usar cores desconhecidas

Cores que se chocam com o ambiente de reunião podem estar distraindo e parecem menos nativas do Teams. Saiba mais sobre a rampa de cores do Teams, incluindo neutros de tema de chamada.

Exemplo mostrando uma extensão de reunião com um botão back.

Fazer: ter um botão voltar

Se você tiver mais de uma camada de navegação em uma guia de reunião, os usuários devem poder voltar às suas exibições anteriores.

Exemplo mostrando uma extensão de reunião com dois botões de descarte.

Não: incluir outro botão de descarte

Fornecer uma opção para fechar o conteúdo da guia na reunião pode causar problemas, pois já há um botão no cabeçalho para descartar a própria guia na reunião.

Exemplo mostrando modais (ou caixas de diálogo) em uma guia na reunião.

Cuidado: evite modais na guia na reunião

Modais (também conhecidos como caixas de diálogo (conhecidos como módulos de tarefa no TeamsJS v1.x)) na guia já estreita na reunião podem envolver e obscurecer o conteúdo.

Comportamento dinâmico

Exemplo mostrando como redimensionar corretamente uma extensão de reunião.

Fazer: Redimensionar e dimensionar seu aplicativo de maneira responsiva

O conteúdo do aplicativo deve redimensionar e condensar dinamicamente em janelas menores. Mantenha a navegação main do aplicativo e os controles flutuantes visíveis.

Exemplo mostrando como não redimensionar corretamente uma extensão de reunião.

Não: cortar ou cortar componentes primários da interface do usuário

A navegação flutuante e os controles fora da tela e exigir um pergaminho para localizar podem ser confusos para os usuários. O conteúdo do aplicativo não deve rolar horizontalmente quando não pode caber no iframe.

Próxima etapa

Configurar seu aplicativo para reuniões