Diseño de la extensión de reunión de Microsoft Teams

Puede crear aplicaciones para que las reuniones sean más productivas. Por ejemplo, solicite a los usuarios que completen una encuesta durante una llamada o envíen un recordatorio rápido que no interrumpa el flujo de la reunión.

Kit de IU de Microsoft Teams

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

Agregar una extensión de reunión

Puede Agregar una extensión de reunión antes y durante las reuniones. También puede disponer de una aplicación para una reunión específica directamente desde la tienda Teams (AppSource).

Agregar antes de una reunión

Antes de una reunión, los detalles de la reunión seleccionan Agregar una pestaña + para abrir el control flotante de la aplicación y buscar aplicaciones optimizadas para las reuniones.

Ejemplo se muestra cómo agregar una extensión de reunión antes de una reunión.

Agregar durante una reunión

En una reunión, seleccione más > Agregar una aplicación y elija la aplicación que desee.

Ejemplo se muestra cómo agregar una extensión de reunión durante una reunión.

Antes de una reunión

Antes de la reunión, puede agregar contenido en la pestaña. En el ejemplo siguiente se muestra un borrador de una pregunta de encuesta que las personas responderán durante la llamada.

En el ejemplo se muestra cómo se muestra el contenido de la aplicación en los detalles de la reunión antes de una llamada.

Anatomía: pestaña reunión (antes y después de las reuniones)

Ejemplo muestra la anatomía estructural de una pestaña de reunión antes y después de una reunión.

Counter Descripción
1 Nombre de ficha: etiqueta de navegación de la pestaña.
2 Desbordamiento de tabulación: abre acciones de pestaña, como cambiar nombre y quitar.
3 iframe: muestra el contenido de la aplicación.

Diseño con plantillas de interfaz de usuario

Use una de las siguientes plantillas de interfaz de usuario de Microsoft Teams para ayudar a diseñar la pestaña de la reunión:

  • 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.
  • Panel de tareas: un panel de tareas, a veces denominado tablero Kanban o carriles de nadar, es una colección de tarjetas que se usan a menudo para realizar un seguimiento del estado de los elementos de trabajo o vales.
  • Panel: un panel es un lienzo que contiene varias tarjetas que proporcionan información general sobre datos o contenido.
  • 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.
  • Panel de navegación izquierdo: la plantilla de navegación izquierda puede servir de ayuda si la pestaña requiere la navegación. En general, debe mantener al mínimo la navegación por tabulaciones.

Usar una pestaña en la reunión

La pestaña en reunión es un lienzo para aumentar la colaboración durante las reuniones. Los asistentes pueden ver e interactuar con el contenido de la aplicación en un espacio dedicado fuera de la fase de reunión a través de vistas compartidas o basadas en roles.

Casos de uso

Los usuarios pueden usar la ficha en la reunión para:

  • Proporcionar comentarios detallados (por ejemplo, evaluar un candidato de trabajo)
  • Crear rápidamente un sondeo, una encuesta o un elemento de tarea para los participantes de la reunión
  • Mostrar notas relevantes para la reunión (por ejemplo, información sobre un responsable de ventas)

Ejemplo muestra cómo puede presentar el contenido de sondeo en una pestaña en la reunión.

Anatomía: ficha en la reunión

Ejemplo muestra la anatomía estructural de una pestaña en reunión.

Counter Descripción
1 Icono de la aplicación (seleccionado): logotipo de aplicación transparente de 16 píxeles.
2 Nombre de la aplicación
3 Header: incluye el nombre de la aplicación.
4 Botón Cerrar: descarta la pestaña. Use siempre el icono de cierre superior derecho en lugar de una acción en el pie de página.
5 Barra de notificación: las alertas de error se muestran directamente debajo del encabezado y disminuyen el contenido de iframe en 20 píxeles.
6 iframe: muestra el contenido de la aplicación.

Spacing

Optimice la ficha en reunión para ajustar la periferia a la periferia dentro del área iframe de 280 píxeles de ancho. Hay 20 píxeles de relleno a los lados izquierdo y derecho del iframe y entre el encabezado de la pestaña. El iframe es con sangrado completo en la parte inferior de la ficha.

Ejemplo muestra las dimensiones del espacio de la pestaña en la reunión.

Desplazamiento

El contenido de iframe debe desplazarse verticalmente. Solo puede ver el contenido al que se ha desplazado (nada anterior o posterior). La barra de desplazamiento es parte del contenido iframe.

Ejemplo muestra cómo se desplaza la pestaña en reunión.

Para los escenarios con capas de navegación o contenido pesado, se recomienda permitir que los usuarios naveguen a una capa secundaria. Los usuarios deben poder volver a la capa anterior.

Ejemplo muestra la navegación en reuniones.

Usar un cuadro de diálogo en la reunión

Los cuadros de diálogo en la reunión se muestran en la fase de reunión de Microsoft Teams. Requieren la atención, la confirmación o la interacción del usuario, pero son sutiles y no interrumpen la reunión. Debe usarlos con moderación y para escenarios claros y orientados a tareas.

Casos de uso

Los cuadros de diálogo en la reunión son desencadenados por un usuario (como el organizador de la reunión) que puede desear a los participantes:

  • Proporcionar comentarios breves
  • Realizar una breve encuesta o sondeo
  • Enviar aprobaciones
  • Recibir recordatorios

Ejemplo se muestra cómo se puede usar un cuadro de diálogo en la reunión.

Anatomía: cuadro de diálogo en la reunión

Ejemplo muestra la anatomía estructural de un cuadro de diálogo en la reunión.

Counter Descripción
1 Header: incluye el icono de la aplicación, el nombre, la cadena de acción y el icono de cierre.
2 iframe: muestra el contenido de la aplicación.

Anatomía: encabezado de cuadro de diálogo en la reunión

Ejemplo muestra la anatomía estructural de un encabezado de cuadro de diálogo en reunión.

Hay dos variantes de encabezado. Si es posible, use la variante con el avatar para reforzar que el cuadro de diálogo procede de una persona.

Counter Descripción
1 Avatar: persona que inicia el cuadro de diálogo en la reunión.
2 Icono de aplicación
3 Nombre de la aplicación
4 Botón Cerrar: descarta el cuadro de diálogo.
5 Cadena de acción: normalmente describe quién inició el cuadro de diálogo.

Comportamiento dinámico

Los cuadros de diálogo en la reunión pueden variar en tamaño para tener en cuenta los distintos escenarios. Asegúrese de mantener el relleno y los tamaños de los componentes.

  • Width: el ancho del iframe es un valor absoluto dentro del intervalo especificado.
  • Height: el alto del cuadro de diálogo viene determinado por el contenido en el iframe. El desplazamiento vertical toma el control del contenido que supera el alto máximo.

Ejemplo muestra el cuadro de diálogo en la reunión. Width: min--280 píxeles (248 píxeles iframe). Max--460 píxeles (428 píxeles iframe). Altura: 300 píxeles (iframe).

Después de una reunión

Puede volver a una reunión después de finalizar y ver el contenido de la aplicación. En este ejemplo, el organizador de la reunión puede mirar los resultados del sondeo en la pestaña contoso . (Nota: desde el punto de vista del diseño, no hay ninguna diferencia entre la experiencia de pestañas previa y posterior a la reunión).

Ejemplo muestra una pestaña posterior a la reunión.

Procedimientos recomendados

Existentes

Ejemplo que muestra un procedimiento recomendado de extensión de reunión.

Do: limitar el número de interacciones

Para los cuadros de diálogo en la reunión, quite el contenido innecesario que no ayude a los usuarios a realizar algo rápidamente.

Ejemplo que muestra un procedimiento recomendado de extensión de reunión.

No: introducir elementos innecesarios

Un único cuadro de diálogo en reunión con varias interacciones puede distraerse de la llamada.

Diseño

Ejemplo que muestra un procedimiento recomendado de extensión de reunión.

Do: usar diseños de columna única

Como los cuadros de diálogo están en el centro de la fase de reunión, la finalización de la tarea debería ser rápida y sencilla para evitar la frustración del usuario.

Ejemplo que muestra un procedimiento recomendado de extensión de reunión.

No: desorden el espacio

Un contenido denso o con gran estructura puede ser molesto y abrumador, especialmente durante una reunión.

Ejemplo que muestra un procedimiento recomendado de extensión de reunión.

Do: usar columnas únicas

Dada la naturaleza estrecha de las pestañas de la reunión, se recomienda encarecidamente mostrar el contenido en una sola columna.

Ejemplo que muestra un procedimiento recomendado de extensión de reunión.

No: usar varias columnas

Debido al espacio limitado de la pestaña en reunión, no se recomiendan los diseños con más de una columna.

Controles

Ejemplo que muestra un procedimiento recomendado de extensión de reunión.

Haga lo siguiente: alinear a la derecha la acción principal

Le recomendamos que positioining la acción más intensa para la ubicación más a la derecha.

Ejemplo que muestra un procedimiento recomendado de extensión de reunión.

No: acciones alineadas a la izquierda o al centro

Esto se desvía del patrón de equipos estándar para la colocación de controles en un cuadro de diálogo y puede entrar en conflicto con un cuadro de diálogo detrás de uno superior.

Scroll

Ejemplo que muestra un procedimiento recomendado de extensión de reunión.

Hacer: desplazarse verticalmente

Le recomendamos que sitúe la acción más intensa visualmente en la posición más a la derecha.

Ejemplo que muestra un procedimiento recomendado de extensión de reunión.

No: desplazar horizontalmente

El desplazamiento horizontal no es un comportamiento esperado en Microsoft Teams. Otros lienzos del entorno de la reunión se desplazan verticalmente.

Flujos de trabajo

Ejemplo que muestra un procedimiento recomendado de extensión de reunión.

Do: escenarios complejos de Surface en la pestaña en la reunión

Si la aplicación incluye varias tareas, se recomienda encarecidamente un diseño de una sola columna en una pestaña en la reunión.

Ejemplo que muestra un procedimiento recomendado de extensión de reunión.

No: empaquetar escenarios complejos en el cuadro de diálogo de la reunión

Los diálogos en la reunión están pensados para interacciones breves.

Creación de temas

Ejemplo que muestra un procedimiento recomendado de extensión de reunión.

Do: usar tokens de color de Teams

Las reuniones de Microsoft Teams están optimizadas para el modo oscuro para ayudar a reducir el ruido visual y cognitivo para que los usuarios puedan centrarse en la discusión y en el contenido compartido. Obtenga información sobre cómo usar tokens de color (interfaz de usuario de Fluent).

Ejemplo que muestra un procedimiento recomendado de extensión de reunión.

No: incluir otro botón descartar

Ofrecer una opción para cerrar el contenido de la pestaña en la reunión puede causar problemas porque ya hay un botón en el encabezado para descartar la misma pestaña en la reunión.

Ejemplo que muestra un procedimiento recomendado de extensión de reunión.

Do: tener un botón atrás

Si tiene más de una capa de navegación en una pestaña en la reunión, los usuarios deben poder volver a sus vistas anteriores.

Ejemplo que muestra un procedimiento recomendado de extensión de reunión.

No: incluir otro botón descartar

Ofrecer una opción para cerrar el contenido de la pestaña en la reunión puede causar problemas porque ya hay un botón en el encabezado para descartar la misma pestaña en la reunión.

Ejemplo que muestra un procedimiento recomendado de extensión de reunión.

PRECAUCIÓN: Evite los modales en la pestaña en la reunión.

Los modales (también conocidos como módulos de tareas) en la ficha in-Meeting ya estrecha pueden ajustar y oscurecer el contenido.

Validar el diseño

Si planea publicar la aplicación en AppSource, debe comprender los problemas de diseño que suelen hacer que las aplicaciones fallen durante el envío.