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

09/12/2020
Tiempo de lectura: 8 minutos

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.

Obtener el kit de interfaz de usuario de Microsoft Teams (Figma)

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.

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.

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.