Diseño de módulos de tareas para su aplicación de Microsoft Teams

Puede crear experiencias de elemento emergente modal en la aplicación de Microsoft Teams con módulos de tareas. Use esta funcionalidad para mostrar información y medios enriquecidos o para completar una tarea compleja.

Ejemplo muestra un módulo de tarea.

Kit de IU de Microsoft Teams

Puede encontrar instrucciones de diseño de módulos de tareas más completas, incluidos elementos que puede captar y modificar según sea necesario, en el kit de interfaz de usuario de Microsoft Teams.

Abrir un módulo de tareas

Los módulos de tareas se pueden iniciar casi en cualquier lugar de la aplicación.

  • Tab: se puede iniciar un módulo de tareas desde cualquier vínculo dentro de una pestaña o iframe. Úsela en escenarios en los que desea que el usuario se Centre en una interacción.
  • Bot: un módulo de tarea puede iniciarse desde un vínculo dentro de un mensaje de bot.
  • Tarjeta adaptable: un módulo de tarea se puede iniciar desde una tarjeta adaptable (enviada con una extensión de mensajería o mediante un bot) cuando un usuario selecciona un botón.
  • Extensión de mensajería (comandos de acción): extensiones de mensajería le permite realizar una acción concreta en el contenido del mensaje. Al seleccionar una acción se abre un módulo de tareas.
  • Extensión de mensajería (contexto de cuadro de redacción): en el cuadro de redacción, puede diseñar una extensión de mensajería para abrir un módulo de tareas en lugar del flotante normal. Reserve módulos de tareas para interacciones complejas, como rellenar un formulario.

Anatomía

Ilustración que muestra la anatomía de la interfaz de usuario de un módulo de tareas.

Los módulos de tareas son superficies muy flexibles. Se pueden crear con iframes, al extraer en otras plantillas de interfaz de usuario, para hospedar experiencias creadas por asociados. Esta es la preferida para la experiencia más pulida.

También se pueden crear con el marco de tarjeta adaptable , que puede ser una forma más sencilla y rápida de ejecutar escenarios comunes (como formularios).

Counter Descripción
1 Icono de aplicación
2 Nombre de la aplicación: nombre completo de la aplicación.
3 Encabezado: hacer que los encabezados sean claros y concisos. Describa la tarea que desea que completen los usuarios.
4 Botón Cerrar: permite a los usuarios buscar el contenido de la aplicación que quiera insertar.
5 iframe: espacio de respuesta que hospeda el contenido de la aplicación.
6 Acciones (opcional): botones relacionados con el contenido de la aplicación.

Diseño con plantillas de interfaz de usuario

Considere la posibilidad de usar plantillas para los diseños comunes dentro de los módulos de tareas. Cada uno de ellos consta de componentes más pequeños para crear un diseño elegante y dinámico que se puede usar de forma rápida o personalizada para su escenario o con la apariencia de la marca.

  • List: lists puede mostrar elementos relacionados en un formato que se pueda analizar y permitir que los usuarios realicen acciones en una lista completa o en elementos individuales.
  • Formulario: los formularios son para recopilar, validar y enviar entradas de usuario de forma estructurada.
  • Estado vacío: la plantilla de estado vacía se puede usar para muchos escenarios, incluidos el inicio de sesión, las experiencias de primera ejecución, los mensajes de error, etc.

Ejemplos

Lista

Las listas funcionan bien en un módulo de tareas porque son fáciles de analizar.

Lista de ejemplo de un módulo de tareas.

Form

Los módulos de tareas son un buen punto de partida para exponer formularios con entradas de usuario secuenciales y validación en línea. Puede aprovechar las tarjetas adaptables como una forma de incrustar los elementos del formulario.

Formulario de ejemplo en un módulo de tareas.

Iniciar sesión

Crear un flujo de inicio de sesión o de inicio de sesión prioritarios con una serie de módulos de tareas, lo que permite a los usuarios desplazarse fácilmente a través de pasos secuenciales.

Ejemplo de experiencia de inicio de sesión en un módulo de tareas.

Audiovisual

Insertar contenido multimedia en un módulo de tareas para una experiencia de visualización específica.

Contenido multimedia de ejemplo en un módulo de tareas.

Estado vacío

Usar para los mensajes de bienvenida, error y operación correcta.

Ejemplo de estado vacío en un módulo de tareas.

Inserta un carrusel de Galería dentro de un iframe.

Galería de imágenes de ejemplo en un módulo de tareas.

Buscar

En este ejemplo se muestran los resultados de sondeo iniciados desde una tarjeta adaptable.

Ejemplo de sondeo en un módulo de tareas.

Procedimientos recomendados

Mejoras

Ejemplo que muestra un procedimiento recomendado de módulo de tareas.

Do: usar un módulo de tareas a la vez

El objetivo es centrar al usuario en la finalización de una tarea después de todo.

Ejemplo que muestra un procedimiento recomendado de módulo de tareas.

No: mostrar un cuadro de diálogo en la parte superior de un módulo de tareas

Esto crea una experiencia de usuario confusa y no enfocada.

Respuesta correcta

Ejemplo que muestra un procedimiento recomendado de módulo de tareas.

Haga lo siguiente: Asegúrese de que el contenido está respondiendo

Aunque las tarjetas adaptables hospedadas en un módulo de tareas se presentan correctamente en dispositivos móviles, si decide usar un iframe para hospedar el contenido de la aplicación, asegúrese de que la interfaz de usuario responda correctamente y de que funcione en todos los dispositivos.

Ejemplo que muestra un procedimiento recomendado de módulo de tareas.

No: usar barras de desplazamiento horizontales

Se recomienda mantener el contenido enfocado y no demasiado largo. Si es necesario un desplazamiento, desplácese verticalmente y no horizontalmente.

Simple

Ejemplo que muestra un procedimiento recomendado de módulo de tareas.

Do: Keep it Short

Puede crear fácilmente un asistente de varios pasos, pero esto no significa necesariamente que debería. Un módulo de tarea de varias pantallas puede ser problemático porque los mensajes entrantes distraen y tentan a los usuarios a salir. Si su tarea realmente está implicada, salga a una página web completa en lugar de a un módulo de tareas.

Ejemplo que muestra un procedimiento recomendado de módulo de tareas.

No: realizar acciones largas

Intente mantener sus interacciones cortas y en el punto.

Mensajes de error

Ejemplo que muestra un procedimiento recomendado de módulo de tareas.

Do: usar mensajes de error en línea

Vea la plantilla de interfaz de usuario de formularios para obtener instrucciones sobre el tratamiento de errores en línea.

Ejemplo que muestra un procedimiento recomendado de módulo de tareas.

No: colocar mensajes de error en los cuadros de diálogo

No mostrar un mensaje de error en un cuadro de diálogo encima de los módulos de tareas. Crea una experiencia de usuario confusa.