Diseño de la extensión Microsoft Teams reunión
Puedes crear aplicaciones para que las reuniones sean más productivas. Por ejemplo, pida a los usuarios que completen una encuesta durante una reunión o que envíen un aviso rápido que no interrumpa el flujo de la reunión.
Kit de UI de Microsoft Teams
Puedes encontrar instrucciones de diseño más completas, incluidos los elementos que puedes agarrar y modificar según sea necesario, en el kit de interfaz Microsoft Teams usuario.
Agregar una extensión de reunión
Los usuarios pueden agregar una extensión de reunión antes y durante las reuniones. También pueden agregar una aplicación para una reunión específica directamente desde Teams tienda.
Agregar antes de una reunión
En los detalles de la reunión, los usuarios pueden seleccionar Agregar una pestaña + para abrir el control desplegable de la aplicación y buscar aplicaciones optimizadas para reuniones.
Agregar durante una reunión
Móvil
Una vez agregada la aplicación (por ejemplo, en el escritorio), los usuarios pueden acceder a la aplicación en una reunión seleccionando Más 
.
Escritorio
En una reunión, los usuarios pueden seleccionar Más agregar
> una aplicación y seleccionar la aplicación que desean.
Antes de una reunión
Antes de una reunión, la aplicación está disponible para los usuarios en una pestaña. En el siguiente ejemplo se muestra un borrador de pregunta de encuesta que los usuarios responderán durante la reunión.
Anatomía: pestaña Reunión (antes y después de las reuniones)
| Contador | Descripción |
|---|---|
| 1 | Nombre de la pestaña: etiqueta de navegación para la pestaña. |
| 2 | Desbordamiento de pestaña: abre acciones de pestaña, como cambiar el nombre y quitar. |
| 3 | iframe: muestra el contenido de la aplicación. |
Diseño con plantillas de interfaz de usuario
Usa una de las siguientes plantillas Teams interfaz de usuario para ayudar a diseñar la pestaña de reunión:
- 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.
- Panel de tareas: un panel de tareas, a veces denominado panel kanban o carril, es una colección de tarjetas que se usan a menudo para realizar un seguimiento del estado de los elementos de trabajo o los vales.
- Panel: un panel es un lienzo que contiene varias tarjetas que proporcionan información general sobre los datos o el contenido.
- 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.
- Navegación izquierda: el componente de navegación izquierda puede ayudar si la pestaña requiere algo de navegación. En general, debe mantener la navegación al mínimo.
Usar una pestaña en la reunión
La pestaña en la 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
Las personas pueden usar la pestaña en la reunión para:
- Proporcionar comentarios detallados. Por ejemplo, evalúe un candidato de trabajo.
- Cree 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 cliente potencial de ventas.
Móvil
Escritorio
Anatomía: pestaña En la reunión
| Contador | Descripción |
|---|---|
| 1 | Icono de aplicación (seleccionado): logotipo de aplicación transparente de 16 píxeles. |
| 2 | Nombre de la aplicación |
| 3 | Encabezado: 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 notificaciones: las alertas de error se muestran directamente debajo del encabezado y presionan el contenido del iframe hacia abajo en 20 píxeles. |
| 6 | iframe: muestra el contenido de la aplicación. |
Spacing
Optimiza la pestaña en la reunión para que se ajuste de un extremo a otro dentro del área de iframe de 280 píxeles. Hay 20 píxeles de relleno en los lados izquierdo y derecho del iframe y entre el encabezado de pestaña. El iframe está sangrando hasta la parte inferior de la pestaña.
Desplazamiento
Recuerde lo siguiente si permite el desplazamiento:
- El contenido del iframe solo debe desplazarse verticalmente.
- Los usuarios solo deben ver el contenido al que se han desplazado (nada por encima o por debajo).
- La barra de desplazamiento forma parte del contenido de iframe.
Navegación
Para escenarios con capas de navegación o contenido intenso, se recomienda permitir a los usuarios navegar 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 Teams de reunión. Requieren la atención, confirmación o interacción de un usuario, pero son sutiles y no interrumpen la reunión. Debe usarlos con moderación y para escenarios orientados a tareas y ligeras.
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 querer que los participantes:
- Proporcionar comentarios breves
- Realizar una encuesta o sondeo breves
- Enviar aprobaciones
- Recibir recordatorios
Móvil
Escritorio
Anatomía: cuadro de diálogo en la reunión
| Contador | Descripción |
|---|---|
| 1 | Encabezado: incluye el icono de la aplicación, el nombre, la cadena de acción y el icono cerrar. |
| 2 | iframe: muestra el contenido de la aplicación. |
Anatomía: encabezado del cuadro de diálogo En la reunión
Hay dos variantes de encabezado. Cuando sea posible, usa la variante con el avatar para reforzar que el cuadro de diálogo viene de una persona.
| Contador | 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: cuadros de diálogo en la reunión
Los cuadros de diálogo en reunión pueden variar en tamaño para tener en cuenta diferentes escenarios. Asegúrese de mantener el relleno y los tamaños de los componentes.
- Width: puede especificar el ancho del iframe del cuadro de diálogo en cualquier lugar dentro del intervalo de tamaño admitido.
- Alto: puede especificar el alto del iframe del cuadro de diálogo en cualquier lugar dentro del intervalo de tamaño admitido. También puedes permitir que los usuarios se desplacen verticalmente si el contenido de la aplicación supera el alto máximo.
Para implementar, especifique el ancho y el alto con la externalResourceUrl clave.
Usar la fase de reunión compartida
La fase de reunión compartida ayuda a los participantes a interactuar y colaborar con el contenido de la aplicación en tiempo real. Por ejemplo, los usuarios pueden centrar su reunión en editar un documento, hacer una lluvia de ideas con una pizarra o revisar un panel.
Las aplicaciones compartidas en la fase de reunión ocupan el mismo espacio que una pantalla compartida. La fase se vuelve a reorientar para todos los participantes de la reunión.
Nota
Todos los usuarios que se reúnen pueden ver la aplicación cuando se comparten desde el escritorio. Actualmente, los usuarios móviles no pueden compartir contenido de la aplicación en la fase de reunión.
Casos de uso
La fase de reunión compartida tiene que ver con la colaboración y la participación. Estos son algunos escenarios de ejemplo que le ayudarán a empezar.
Editar y revisar: profundizar en los paneles y la planeación con todos los usuarios de la reunión.
Pizarra: dibujar e idear juntos en un lienzo compartido.
Cuestionario: Pruebe los conocimientos y obtenga información con materiales interactivos.
Anatomía: fase de reunión compartida
| Contador | Descripción |
|---|---|
| 1 | Icono de la aplicación: el icono resaltado indica que la pestaña en la reunión de la aplicación está abierta. |
| 2 | Botón Compartir a fase de reunión: punto de entrada para compartir la aplicación a la fase de reunión. Muestra si configuras la aplicación para que use la fase de reunión compartida. |
| 3 | iframe: muestra el contenido de la aplicación. |
| 4 | Botón Detener uso compartido: deja de compartir la aplicación en la fase de reunión. Solo se muestra para el participante que inició el recurso compartido. |
| 5 | Atribución del moderador: muestra el nombre del participante que compartió la aplicación. |
Comportamiento dinámico: fase de reunión compartida
Las aplicaciones compartidas en la fase de reunión varían en tamaño según el estado de la reunión y el modo en que el usuario cambia el tamaño de la ventana. Mantenga el relleno y el diseño dinámico de la navegación y los controles tal como lo haría en un explorador.
- Panel lateral: un usuario puede tener el panel lateral abierto en cualquier momento durante una reunión para chatear, ver la lista o usar una aplicación (es decir, pestaña en la reunión). La fase reorganiza dinámicamente cuando el panel está abierto.
- Cuadrícula de vídeo y audio: la cuadrícula de vídeo y audio siempre está visible para mostrar a los participantes de la reunión. Cuando un usuario destaca o ancla a alguien en la reunión, esto aumenta el alto o el ancho de la cuadrícula de participantes en función de la orientación.
Fase de reunión (sin panel lateral)
Cuando el panel lateral no está abierto, la fase de reunión es de 994 x 678 píxeles de forma predeterminada y puede tener un mínimo de 792 x 382 píxeles.
Fase de reunión (con panel lateral)
Cuando el panel lateral está abierto, la fase de reunión es de 918 x 540 píxeles de forma predeterminada y puede tener un mínimo de 472 x 382 píxeles.
Después de una reunión
Puedes volver a una reunión después de que finalice y ver el contenido de la aplicación. En este ejemplo, el organizador de la reunión puede ver 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 tabulación anterior y posterior a la reunión).
Procedimientos recomendados
Use estas recomendaciones para crear una experiencia de aplicación de calidad.
Interacciones
Hacer: limitar el número de interacciones
Para los cuadros de diálogo en la reunión, quite el contenido innecesario que no ayuda a los usuarios a lograr algo rápidamente.
No: introducir elementos innecesarios
Un único cuadro de diálogo en la reunión con varias interacciones puede distraer de la reunión.
Hacer: Crear un entorno centrado
Se recomienda mantener la experiencia de la aplicación en el ámbito de solo la fase de reunión. Puede usar una pestaña en la reunión en el panel lateral como una vista secundaria privada para determinados escenarios.
No: incluir superficies de competencia
La aplicación solo debe pedir a los usuarios que se centren en una sola superficie cada vez, ya sea que colabore en el escenario o responda a un cuadro de diálogo en la reunión. (Nota: No puedes mantener los cuadros de diálogo activados por otras aplicaciones mientras la aplicación está en el escenario).
Diseño
Hacer: usar un cuadro de diálogo de una columna
Dado que los cuadros de diálogo están en el centro de la fase de reunión, la finalización de tareas debe ser rápida y sencilla para evitar la frustración del usuario.
No: saturar el espacio
El contenido densa o demasiado estructurado puede ser molesto y abrumador, especialmente durante una reunión.
Hacer: usar una pestaña de una columna
Dada la naturaleza estrecha de la pestaña en 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 la reunión, no se recomiendan diseños con más de una columna.
Controles
Hacer: alinear a la derecha la acción principal
Se recomienda colocar la acción más intensa visualmente en la ubicación más derecha.
No: acciones de alineación izquierda o central
Esto se desvía del patrón de Teams estándar para la colocación de controles en un cuadro de diálogo y puede conflicto con un cuadro de diálogo detrás del superior.
Desplazamiento
Hacer: desplazarse verticalmente
Los usuarios esperan desplazamiento vertical en Teams (y en otros lugares). Esto puede no aplicarse si tiene un lienzo creativo, como una pizarra, que los usuarios pueden desplazar por los ejes x e y.
No: desplazarse horizontalmente
El desplazamiento horizontal no es un comportamiento esperado en Teams (incluido el entorno de reunión).
Flujos de trabajo
Hacer: escenarios complejos de Surface en la pestaña en reunión
Si la aplicación incluye varias tareas, recomendamos encarecidamente usar una pestaña en la reunión con un diseño de una sola columna.
Don't: Hacer complejos los cuadros de diálogo en la reunión
Los cuadros de diálogo en reunión están diseñados para interacciones breves.
Creación de temas
Do: Focus on dark theme
Teams reuniones están optimizadas para temas oscuros para ayudar a reducir el ruido visual y cognitivo para que los usuarios puedan centrarse en la discusión y el contenido compartido. Ten en cuenta que ciertos tipos de aplicaciones (como pizarras y edición de documentos) no necesitan un lienzo oscuro.
No usar: usar colores desconocidos
Los colores que entren en conflicto con el entorno de reunión pueden ser molestos y parecer menos nativos de Teams. Obtenga información sobre la Teams de color,incluidos los neutros del tema de llamada.
Navegación
Hacer: Tener un botón atrás
Si tiene más de una capa de navegación en una pestaña de reunión, los usuarios deben poder volver a sus vistas anteriores.
No: incluir otro botón descartar
Proporcionar una opción para cerrar el contenido de la pestaña en la reunión puede causar problemas, ya que ya hay un botón en el encabezado para descartar la propia pestaña en la reunión.
Precaución: evite los modales dentro de la pestaña en la reunión
Los modales (también conocidos como módulos de tareas) en la pestaña ya estrecha en la reunión podrían ajustar y oscurecer el contenido.
Comportamiento dinámico
Do: Resize and scale your app responsively
El contenido de la aplicación debe cambiar el tamaño y condensarse dinámicamente en ventanas más pequeñas. Mantén visible la navegación principal de la aplicación y los controles flotantes.
No: recortar o recortar componentes de interfaz de usuario principales
La navegación flotante y los controles fuera de la pantalla y que requieren un desplazamiento para buscar pueden resultar confusos para los usuarios. El contenido de la aplicación no debe desplazarse horizontalmente cuando no cabe en el iframe.