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

Puede crear experiencias emergentes modales en la aplicación de Teams con módulos de tareas. Use esta funcionalidad para mostrar medios enriquecidos e información o completar una tarea compleja.

En el ejemplo se muestra un módulo de tareas.

Kit de interfaz de usuario de Microsoft Teams

En el kit de interfaz de usuario de Microsoft Teams, encontrará instrucciones completas de diseño de módulos de tareas que incluyen elementos que puede usar y modificar como quiera.

Abrir un módulo de tareas

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

  • Pestaña: Se puede iniciar un módulo de tareas desde cualquier vínculo dentro de una pestaña. Se usa en escenarios en los que desea que el usuario se centre en una interacción.
  • Bot: Se puede iniciar un módulo de tareas desde un vínculo dentro de un mensaje de bot.
  • Tarjeta adaptable: Se puede iniciar un módulo de tareas desde una tarjeta adaptable (enviada con una extensión de mensajería o por un bot) cuando un usuario selecciona un botón.
  • Extensión de mensajería (comandos de acción): Las extensiones de mensajería permiten realizar una acción determinada en el contenido del mensaje. Al seleccionar una acción, se abre un módulo de tareas.
  • Extensión de mensajería (contexto del 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 control flotante típico. Reserve módulos de tareas para interacciones complejas, como completar un formulario.

Anatomía

Los módulos de tareas proporcionan una superficie flexible para las experiencias de la aplicación hospedada. Se han creado con un iframe (escritorio) o una vista web (móvil), por lo que puedes diseñar módulos de tareas con nuestras plantillas de interfaz de usuario (recomendadas) o desde cero.

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

Móvil

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

Contador Descripción
1 Encabezado: Haga que los encabezados sean claros y concisos. Describa la tarea que desea que los usuarios completen.
2 Nombre de la aplicación: nombre completo de la aplicación.
3 Botón Cerrar: Cierra el módulo de tareas. No aplica cambios no guardados en el contenido de la aplicación.
4 Vista Web: Espacio dinámico que hospeda el contenido de la aplicación.
5 Acciones (opcional): Botones relacionados con el contenido de la aplicación.

Escritorio

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

Contador Descripción
1 Icono de aplicación
2 Nombre de la aplicación: nombre completo de la aplicación.
3 Encabezado: Haga que los encabezados sean claros y concisos. Describa la tarea que desea que los usuarios completen.
4 Botón Cerrar: Cierra el módulo de tareas. No aplica cambios no guardados en el contenido de la aplicación.
5 iframe: Espacio dinámico 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 diseños comunes dentro de los módulos de tareas. Cada una de ellas se compone de elementos más pequeños para crear un diseño elegante y dinámico que se puede usar de forma predeterminada o personalizarse para su escenario o con su apariencia de marca.

  • Lista: Las listas pueden mostrar elementos relacionados en un formato digitalizado y permitir a los usuarios realizar acciones en una lista completa o en elementos individuales.
  • Formulario: Los formularios son para recopilar, validar y enviar el input del usuario de forma estructurada.
  • Estado vacío: La plantilla de estado vacío se puede usar para muchos escenarios, incluidos el inicio de sesión, las experiencias de primera ejecución, los mensajes de error y mucho más.

Ejemplos

Lista

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

Móvil

Lista de ejemplos en un módulo de tareas en el móvil.

Escritorio

Lista de ejemplos en un módulo de tareas.

Formulario

Los módulos de tareas son un excelente lugar para mostrar formularios con entradas de usuario secuenciales y validación en línea. Puede aprovechar las tarjetas adaptables como una forma de insertar elementos del formulario.

Móvil

Formulario de ejemplo en un módulo de tareas en el móvil.

Escritorio

Formulario de ejemplo en un módulo de tareas.

Iniciar sesión

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

Móvil

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

Escritorio

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

Multimedia

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

Móvil

Ejemplo de contenido multimedia en un módulo de tareas en el móvil.

Escritorio

Ejemplo de contenido multimedia en un módulo de tareas.

Estado vacío

Se usa para los mensajes de bienvenida, error y éxito.

Móvil

Estado vacío de ejemplo en un módulo de tareas en el móvil.

Escritorio

Estado vacío de ejemplo en un módulo de tareas.

Insertar un carrusel de galería en un iframe (escritorio) o vista web (móvil).

Móvil

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

Escritorio

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

Sondeo

En este ejemplo se muestran los resultados del sondeo iniciados desde una tarjeta adaptable. El sondeo también se puede colocar dentro de un módulo de tareas.

Móvil

Sondeo de ejemplo en un módulo de tareas en el móvil.

Escritorio

Sondeo de ejemplo en un módulo de tareas.

Procedimientos recomendados

Use estas recomendaciones para crear una experiencia de aplicación de calidad.

Usabilidad

Ejemplo que muestra un procedimiento recomendado del módulo de tareas (un módulo de tareas cada vez).

Hacer: Usar un módulo de tareas cada vez

¡El objetivo es centrar al usuario en completar una tarea después de todo!

Ejemplo en el que se muestra un procedimiento recomendado del módulo de tareas (mostrar un cuadro de diálogo encima de un módulo de tareas).

No hacer: Mostrar un cuadro de diálogo encima de un módulo de tareas

Esto crea una experiencia de usuario confusa y descentrada.

Capacidad de respuesta

Ejemplo que muestra un procedimiento recomendado del módulo de tareas (asegúrese de que el contenido responde).

Hacer: Asegúrese de que el contenido responde

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

Ejemplo que muestra un procedimiento recomendado del módulo de tareas (no use barras de desplazamiento horizontales).

No: Usar barras de desplazamiento horizontales

Es un procedimiento recomendado mantener el contenido centrado y no demasiado largo. Si es necesario un desplazamiento, desplácese verticalmente y no horizontalmente.

Sencillez

Ejemplo en el que se muestra un procedimiento recomendado del módulo de tareas (que sea breve).

Sí: Sea breve.

Puede crear fácilmente un asistente para varios pasos, ¡pero eso no significa necesariamente que deba hacerlo! Un módulo de tareas de varias pantallas puede ser problemático porque los mensajes entrantes distraen y tientan a los usuarios a salir. Si la tarea está realmente implicada, abre una página web completa en lugar de un módulo de tareas.

Ejemplo que muestra un procedimiento recomendado del módulo de tareas (no tiene interacciones largas).

No: Tener interacciones largas

Intente mantener sus interacciones cortas y concretas.

Mensajes de error

Ejemplo que muestra un procedimiento recomendado del módulo de tareas (usar mensajes de error en línea).

Hacer: Usar mensajes de error en línea

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

Ejemplo que muestra un procedimiento recomendado del módulo de tareas (colocar mensajes de error en cuadros de diálogo).

No: Poner mensajes de error en cuadros de diálogo

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