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.
Agregar durante una reunión
En una reunión, seleccione más
> Agregar una aplicación y elija la aplicación que desee.
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.
Anatomía: pestaña reunión (antes y después de las reuniones)
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)
Anatomía: ficha en la 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.
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.
Navegació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
Anatomía: 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
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.
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).
Procedimientos recomendados
Existentes
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.
No: introducir elementos innecesarios
Un único cuadro de diálogo en reunión con varias interacciones puede distraerse de la llamada.
Diseño
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.
No: desorden el espacio
Un contenido denso o con gran estructura puede ser molesto y abrumador, especialmente durante una 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.
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
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.
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
Hacer: desplazarse verticalmente
Le recomendamos que sitúe la acción más intensa visualmente en la posición más a la derecha.
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
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.
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
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).
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.
Navegació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.
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.
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.