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.

En el ejemplo se muestra cómo agregar una extensión de reunión antes de una reunión.

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 .

En el ejemplo se muestra cómo agregar una extensión de reunión durante una reunión en el móvil.

Escritorio

En una reunión, los usuarios pueden seleccionar Más agregar > una aplicación y seleccionar la aplicación que desean.

En el ejemplo se muestra cómo agregar una extensión de reunión durante una reunión.

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.

En el ejemplo se muestra cómo usar 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)

En el ejemplo se muestra la anatomía estructural de una pestaña de reunión antes y después de una reunión.

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

En el ejemplo se muestra cómo se puede presentar contenido de sondeo en una pestaña de reunión en el móvil.

Escritorio

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

Anatomía: pestaña En la reunión

En el ejemplo se muestra la anatomía estructural de una pestaña en 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.

En el ejemplo se muestran las dimensiones de espaciado de tabulación en la reunión.

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.

En el ejemplo se muestra cómo se desplaza la pestaña en la reunió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.

En el ejemplo se muestra la navegación en la reunión.

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

En el ejemplo se muestra cómo se puede usar un cuadro de diálogo en la reunión en el móvil.

Escritorio

En el 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

En el ejemplo se muestra la anatomía estructural de un cuadro de diálogo en 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

En el ejemplo se muestra la anatomía estructural de un encabezado de cuadro de diálogo en 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.

En el ejemplo se muestra el cuadro de diálogo en la reunión. Ancho: Min-280 píxeles (248 píxeles iframe). Máximo: 460 píxeles (428 píxeles de iframe). Alto: 300 píxeles (iframe).

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.

En el ejemplo se muestra un panel que se está revisando en la fase de reunión compartida.

Pizarra: dibujar e idear juntos en un lienzo compartido.

En el ejemplo se muestra una pizarra en la fase de reunión compartida.

Cuestionario: Pruebe los conocimientos y obtenga información con materiales interactivos.

En el ejemplo se muestra un cuestionario en la fase de reunión compartida.

Anatomía: fase de reunión compartida

La imagen muestra la anatomía de diseño de la 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.

Imagen que muestra la capacidad de respuesta de la fase de reunión compartida con el panel lateral cerrado.

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.

Imagen que muestra la capacidad de respuesta de la fase de reunión compartida con el panel lateral abierto.

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).

La ilustración de ejemplo muestra una pestaña posterior a la reunión.

Procedimientos recomendados

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

Interacciones

Ejemplo que muestra cómo limitar el número de 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.

Ejemplo que muestra cómo no introducir elementos innecesarios.

No: introducir elementos innecesarios

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

Ejemplo que muestra cómo crear un entorno centrado.

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.

Ejemplo que muestra cómo no incluir superficies de competencia durante las reuniones.

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

Ejemplo que muestra cómo debe usar un diseño de cuadro de diálogo de una columna.

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.

Ejemplo que muestra que no debe saturar el espacio de una extensión de reunión.

No: saturar el espacio

El contenido densa o demasiado estructurado puede ser molesto y abrumador, especialmente durante una reunión.

Ejemplo que muestra un diseño de pestaña de una columna.

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.

Ejemplo que muestra una pestaña con varias columnas.

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

Ejemplo que muestra cómo alinear correctamente los controles principales.

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.

Ejemplo que muestra cómo no debe dejar alineados los controles principales.

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

Ejemplo que muestra el desplazamiento vertical en una pestaña en reunión.

Ejemplo que muestra el desplazamiento vertical en la fase de reunión compartida.

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.

Ejemplo que muestra el desplazamiento horizontal en una pestaña en la reunión.

Ejemplo que muestra el desplazamiento horizontal en la fase de reunión compartida.

No: desplazarse horizontalmente

El desplazamiento horizontal no es un comportamiento esperado en Teams (incluido el entorno de reunión).

Flujos de trabajo

Ejemplo que muestra un escenario complejo en una pestaña de reunión.

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.

Ejemplo que muestra escenarios complejos en un cuadro de diálogo en la reunión.

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

Ejemplo que muestra una extensión de reunión con el tema oscuro.

Otro ejemplo que muestra la extensión de reunión con el tema oscuro.

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.

Ejemplo que muestra una extensión de reunión con colores que no coinciden con el tema de la reunión.

Otro ejemplo que muestra una extensión de reunión con colores que no coinciden con el tema de la reunión.

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.

Ejemplo que muestra una extensión de reunión con un botón Atrás.

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.

Ejemplo que muestra una extensión de reunión con dos botones de descarte.

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.

Ejemplo que muestra modales (o módulos de tareas) dentro de una 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

Ejemplo que muestra cómo cambiar el tamaño de una extensión de reunión correctamente.

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.

Ejemplo que muestra cómo no cambiar el tamaño de una extensión de reunión correctamente.

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.

Paso siguiente