Projetando sua extensão de reunião do Microsoft Teams
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.
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 loja do Teams.
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.
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
.
Desktop
Em uma reunião, os usuários podem selecionar Mais>Adicionar um aplicativo e selecionar o aplicativo desejado.
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.
Anatomia: guia reunião (antes e depois das reuniões)
| 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
Desktop
Anatomia: guia 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.
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.
Navegação
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.
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
Desktop
Anatomia: 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
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.
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.
Quadro de caracteres: desenhe e idealize juntos em uma tela compartilhada.
Teste: teste conhecimento e obtenha insights com materiais interativos.
Anatomia: compartilhar todo o conteúdo do aplicativo em uma reunião
| 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
| 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.
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.
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.)
Práticas recomendadas
Use essas recomendações para criar uma experiência de aplicativo de qualidade.
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.
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.
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.
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
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.
Não: desordenar o espaço
Conteúdo denso ou excessivamente estruturado pode ser perturbador e avassalador, especialmente durante uma reunião.
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.
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
Fazer: alinhar à direita a ação primária
Recomendamos posicionar a ação mais visualmente pesada para o local mais à direita.
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
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.
Não: Role horizontalmente
A rolagem horizontal não é um comportamento esperado no Teams (incluindo o ambiente de reunião).
Fluxos de trabalho
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.
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
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.
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.
Navegação
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.
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.
Cuidado: evite modais na guia na reunião
Modais (também conhecidos como módulos de tarefa) na guia já estreita na reunião podem envolver e obscurecer o conteúdo.
Comportamento dinâmico
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.
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.