Projetando módulos de tarefas para seu Microsoft Teams appDesigning task modules for your Microsoft Teams app

Você pode criar experiências pop-up modais em seu aplicativo Teams com módulos de tarefa.You can create modal popup experiences in your Teams app with task modules. Use esse recurso para exibir mídia e informações ricas ou concluir uma tarefa complexa.Use this capability to display rich media and information or complete a complex task.

Exemplo mostra um módulo de tarefa.

Kit de Interface do Usuário do Microsoft TeamsMicrosoft Teams UI Kit

Você pode encontrar diretrizes de design de módulo de tarefa mais abrangentes, incluindo elementos que você pode obter e modificar conforme necessário, no Kit de interface do usuário Microsoft Teams usuário.You can find more comprehensive task module design guidelines, including elements that you can grab and modify as needed, in the Microsoft Teams UI Kit.

Abrir um módulo de tarefaOpen a task module

Os módulos de tarefa podem ser lançados de praticamente qualquer lugar em seu aplicativo.Task modules can be launched from almost anywhere in your app.

  • Guia: Um módulo de tarefa pode ser lançado a partir de qualquer link em uma guia. Use em cenários em que você deseja que o usuário se concentre em uma interação.Tab: A task module can be launched from any link within a tab. Use in scenarios where you want the user to focus on an interaction.
  • Bot: um módulo de tarefa pode ser lançado a partir de um link dentro de uma mensagem bot.Bot: A task module can be launched from a link inside a bot message.
  • Cartão Adaptável: um módulo de tarefa pode ser lançado a partir de um Cartão Adaptável (enviado com uma extensão de mensagens ou por um bot) quando um usuário seleciona um botão.Adaptive Card: A task module can be launched from an Adaptive Card (sent with a messaging extension or by a bot) when a user selects a button.
  • Extensão de mensagens (comandos de ação): As extensões de mensagens permitem que você tome uma ação específica no conteúdo da mensagem.Messaging extension (action commands): Messaging extensions allow you to take a particular action on message content. Selecionar uma ação abre um módulo de tarefa.Selecting an action opens a task module.
  • Extensão de mensagens (contexto da caixa de redação) : Na caixa de redação, você pode projetar uma extensão de mensagens para abrir um módulo de tarefa em vez do flyout típico.Messaging extension (compose box context): In the compose box, you can design a messaging extension to open a task module instead of the typical flyout. Reserve módulos de tarefa para interações complexas, como a conclusão de um formulário.Reserve task modules for complex interactions, such as completing a form.

AnatomiaAnatomy

Ilustração mostrando a anatomia da interface do usuário de um módulo de tarefa.

Os módulos de tarefa são superfícies muito flexíveis.Task modules are very flexible surfaces. Eles podem ser construídos com iframes, a partir de outros modelos de interface do usuário, para hospedar experiências criadas por parceiros.They can be built with iframes, pulling in other UI templates, to host partner-built experiences. Isso é preferencial para a experiência mais polida.This is preferred for the most polished experience.

Eles também podem ser construídos com a estrutura cartão adaptável, que pode ser uma maneira mais simples e mais rápida de executar cenários comuns (como formulários).They can also be built with the Adaptive Card framework, which can be a simpler and faster way to execute common scenarios (such as forms).

ContadorCounter DescriçãoDescription
11 ícone de aplicativoApp icon
22 Nome do aplicativo : Nome completo do seu aplicativo.App name: Full name of your app.
33 Header: Tornar os headers claros e concisos.Header: Make headers clear and concise. Descreva a tarefa que você deseja que os usuários concluam.Describe the task you want users to complete.
4 4 Botão Fechar: Permite que os usuários encontrem o conteúdo do aplicativo que eles querem inserir.Close button: Allows users to find app content they want to insert.
5 5 iframe: espaço responsivo que hospeda o conteúdo do aplicativo.iframe: Responsive space that hosts your app content.
6 6 Ações (opcional): Botões relacionados ao conteúdo do aplicativo.Actions (optional): Buttons related to your app content.

Projetando com modelos de interface do usuárioDesigning with UI templates

Considere usar modelos para layouts comuns dentro de seus módulos de tarefas.Consider using templates for common layouts inside your task modules. Cada um deles é feito de componentes menores para criar um design elegante e responsivo que pode ser usado fora da caixa ou personalizado para seu cenário ou com a aparência da sua marca.Each one is made up of smaller components to create an elegant, responsive design that can be used out of the box or customized for your scenario or with your brand look and feel.

  • Lista: as listas podem exibir itens relacionados em um formato digitalizável e permitir que os usuários tomem ações em uma lista inteira ou itens individuais.List: Lists can display related items in a scannable format and allow users to take actions on an entire list or individual items.
  • Formulário: Os formulários são para coletar, validar e enviar entrada do usuário de forma estruturada.Form: Forms are for collecting, validating, and submitting user input in a structured way.
  • Estado vazio: o modelo de estado vazio pode ser usado para muitos cenários, incluindo entrar, experiências de primeira executar, mensagens de erro e muito mais.Empty state: The empty state template can be used for many scenarios, including sign in, first-run experiences, error messages, and more.

ExemplosExamples

ListList

As listas funcionam bem em um módulo de tarefa porque são fáceis de examinar.Lists work nicely in a task module because they’re easy to scan.

Lista de exemplos em um módulo de tarefa.

FormulárioForm

Os módulos de tarefa são um ótimo local para superfície de formulários com entradas de usuário sequenciais e validação em linha.Task modules are a great place to surface forms with sequential user inputs and inline validation. Você pode aproveitar cartões adaptáveis como uma maneira de incorporar elementos de formulário.You can leverage Adaptive Cards as a way to embed form elements.

Formulário de exemplo em um módulo de tarefa.

EntrarSign in

Crie um fluxo de login ou de assinatura focado com uma série de módulos de tarefas, deixando que os usuários se movam facilmente através de etapas sequenciais.Create a focused sign in or sign-up flow with a series of task modules, letting users move easily through sequential steps.

Experiência de login de exemplo em um módulo de tarefa.

MídiaMedia

Incorporar conteúdo de mídia em um módulo de tarefa para uma experiência de exibição focada.Embed media content in a task module for a focused viewing experience.

Exemplo de conteúdo de mídia em um módulo de tarefa.

Estado vazioEmpty state

Use para mensagens de boas-vindas, erros e sucesso.Use for welcome, error, and success messages.

Exemplo de estado vazio em um módulo de tarefa.

Incorporar um carrossel de galeria em um iframe.Embed a gallery carousel in an iframe.

Galeria de imagens de exemplo em um módulo de tarefa.

SondagemPoll

Este exemplo mostra os resultados da sondagem lançados de um Cartão Adaptável.This example shows poll results launched from an Adaptive Card. A sondagem também pode ser colocada dentro de um módulo de tarefas.The poll can be placed inside a task module, too.

Sondagem de exemplo em um módulo de tarefa.

Práticas recomendadasBest practices

Use essas recomendações para criar uma experiência de aplicativo de qualidade.Use these recommendations to create a quality app experience.

UsabilidadeUsability

Exemplo mostrando uma prática prática de módulo de tarefa (um módulo de tarefa por vez).

Fazer: usar um módulo de tarefa por vezDo: Use one task module at a time

O objetivo é concentrar o usuário na conclusão de uma tarefa, afinal!The goal is to focus the user on completing a task after all!

Exemplo mostrando uma prática prática de módulo de tarefa (pop a dialog on top of a task module).

Não: pop uma caixa de diálogo em cima de um módulo de tarefaDon't: Pop a dialog on top of a task module

Isso cria uma experiência de usuário confusa e sem foco.This creates an unfocused, confusing user experience.

DinâmicoResponsive

Exemplo mostrando uma prática prática de módulo de tarefa (certifique-se de que o conteúdo seja responsivo).

Fazer: certifique-se de que o conteúdo seja responsivoDo: Make sure the content is responsive

Embora os Cartões Adaptáveis hospedados em um módulo de tarefa renderizarão bem em dispositivos móveis, se você optar por usar um iframe para hospedar conteúdo do aplicativo, certifique-se de que a interface do usuário seja responsiva e funcione bem entre dispositivos.While Adaptive Cards hosted in a task module render well on mobile devices, if you choose to use an iframe to host app content, make sure the UI is responsive and works well across devices.

Exemplo mostrando uma prática prática de módulo de tarefa (não use barras de rolagem horizontal).

Não: use barras de rolagem horizontalDon't: Use horizontal scroll bars

É uma prática melhor manter o conteúdo focado e não muito longo.It's a best practice to keep content focused and not too lengthy. Se um rolagem for necessário, role verticalmente e não horizontalmente.If a scroll is necessary, scroll vertically and not horizontally.

SimplicidadeSimplicity

Exemplo mostrando uma prática prática de módulo de tarefa (mantenha-o curto).

Do: mantenha-o curtoDo: Keep it short

Você pode criar facilmente um assistente de várias etapas, mas isso não significa necessariamente que você deve!You can easily create a multi-step wizard, but that doesn't necessarily mean you should! Um módulo de tarefa de várias telas pode ser problemático porque as mensagens de entrada estão distraindo e tentando que os usuários saiam.A multi-screen task module can be problematic because incoming messages are distracting and tempt users to exit. Se sua tarefa estiver realmente envolvida, saia para uma página da Web completa em vez de um módulo de tarefa.If your task is really involved, pop out to a full webpage instead of a task module.

Exemplo mostrando uma prática prática de módulo de tarefa (não há interações longas).

Não: ter interações longasDon't: Have long interactions

Tente manter suas interações curtas e diretas.Try to keep your interactions short and to the point.

Mensagens de erroError messages

Exemplo mostrando a prática prática de um módulo de tarefa (use mensagens de erro em linha).

Fazer: usar mensagens de erro em linhaDo: Use inline error messages

Consulte o modelo de interface do usuário de formulários para ver diretrizes sobre o tratamento de erros em linha.See the forms UI template for guidelines on inline error handling.

Exemplo mostrando uma prática prática de módulo de tarefa (colocar mensagens de erro em caixas de diálogo).

Não: colocar mensagens de erro em caixas de diálogoDon't: Put error messages in dialogs

Não pop uma mensagem de erro em uma caixa de diálogo em cima de um módulo de tarefa.Don't pop an error message in a dialog on top of a task modules. Ele cria uma experiência de usuário confusa.It creates a confusing user experience.