Diseñe su extensión de mensajería de Microsoft Teams

Las extensiones de mensajería son métodos accesos directos para insertar contenido de la aplicación o realizar una acción en un mensaje sin salir de la conversación. A modo de guía en el diseño de su aplicación, a continuación, se describe e ilustra cómo los usuarios pueden agregar, usar y administrar las extensiones de mensajería en Teams.

Kit de UI de Microsoft Teams

En el kit de interfaz de usuario de Microsoft Teams, encontrará instrucciones completas de diseño para la extensión de mensajería, que incluyen elementos que puede usar y modificar como quiera.

Agregue una extensión de mensajería

Puede agregar una extensión de mensajería en los siguientes contextos de Teams:

  • Desde la Tienda Microsoft Teams.
  • En un canal, chat o reunión (antes, durante y después) cerca del cuadro de redacción. Vale la pena recalcar que, si agrega una extensión de mensajería en uno de estos lugares, solo podrá usarla en ese contexto.

Los siguientes ejemplos muestran cómo agregar una extensión de mensajería en un canal:

Móvil

El ejemplo muestra cómo agregar una extensión de mensajería en un canal cerca del cuadro de redacción en un dispositivo móvil.

Escritorio

El ejemplo muestra cómo agregar una extensión de mensajería en un canal cerca del cuadro de redacción.

Configurar una extensión de mensajería

La autenticación no es obligatoria, pero si la aplicación es algo parecida a una herramienta de seguimiento de vales, es posible que necesite que los usuarios inicien sesión para usar la extensión de mensajería.

Con el fin de mantener la coherencia entre las aplicaciones de Teams, no es posible personalizar la pantalla de inicio de sesión. Si usa la autenticación de inicio de sesión único (SSO), los usuarios iniciarán sesión automáticamente.

Móvil

El ejemplo muestra la pantalla de configuración de la extensión de mensajería con un botón de inicio de sesión en dispositivos móviles.

Escritorio

El ejemplo muestra la pantalla de configuración de la extensión de mensajería con un botón de inicio de sesión.

Tipos de extensiones de mensajería

Las extensiones de mensajería pueden tener comandos de búsqueda, comandos de acción o ambos. Los comandos dependen de las características de la aplicación y de cómo se ajusten a los casos de uso de Teams.

Comandos de búsqueda

Con los comandos de búsqueda, los usuarios pueden usar la extensión de mensajería para buscar rápidamente contenido externo e insertarlo en un mensaje. Los comandos de búsqueda suelen estar disponibles en el cuadro de redacción. Por ejemplo, puede iniciar o agregar contenido a una discusión al compartir algún contenido sin necesidad de salir de Teams.

Móvil

El ejemplo muestra una extensión de mensajería basada en la búsqueda que se ha iniciado desde el cuadro de redacción en dispositivos móviles.

Escritorio

El ejemplo muestra una extensión de mensajería basada en la búsqueda que se ha iniciado desde el cuadro de redacción.

Opciones de diseño del cuadro de redacción

Tiene algunas opciones para mostrar los resultados de la búsqueda de la extensión de mensajería, incluidas lasvistas de lista y cuadrícula.

Ilustraciones que muestran las opciones de diseño para los resultados de la búsqueda de la extensión de mensajería.

Comandos de acción

Los comandos de acción permiten que los usuarios desencadenen acciones y procesen solicitudes en servicios externos dentro de Teams. Por ejemplo, si su aplicación realiza un seguimiento de pedidos, un usuario podría crear un nuevo pedido utilizando el contenido del mensaje de un compañero directamente desde su chat.

Las extensiones de mensajería basadas en acciones suelen requerir que los usuarios completen un formulario o algún otro tipo de configuración dentro de una ventana modal. Puede crear estas experiencias con diálogos (denominados módulos de tareas en TeamsJS v1.x).

Abra una extensión de mensajería

El cuadro de redacción y los mensajes o publicaciones son los contextos principales en los que los usuarios usan extensiones de mensajería.

Desde el cuadro de redacción

Una vez agregada, los usuarios pueden abrir la extensión de mensajería seleccionando el icono de la aplicación debajo del cuadro de redacción. En estos ejemplos, la extensión tiene comandos de búsqueda y acción.

Móvil

El ejemplo muestra cómo abrir una extensión de mensajería desde el cuadro de redacción en un dispositivo móvil.

Escritorio

El ejemplo muestra cómo abrir una extensión de mensajería desde el cuadro de redacción.

Desde un mensaje de chat o publicación de canal

Una vez agregado, los usuarios pueden seleccionar el icono Más en el mensaje de chat o la publicación del canal para buscar los comandos de acción de la extensión. La extensión puede aparecer en Más acciones en función de su uso.

Mensaje de chat

El ejemplo muestra cómo abrir una extensión de mensajería desde un mensaje de chat.

Publicación del canal

El ejemplo muestra cómo abrir una extensión de mensajería desde una publicación del canal en un dispositivo móvil.

Use una extensión de mensajería

En los siguientes escenarios se muestran las principales formas en las que los usuarios usan las extensiones de mensajería.

Insertar contenido en un mensaje

1. Seleccionar una extensión de mensajería. Los usuarios pueden buscar el contenido que quieran compartir desde el cuadro de redacción.

Móvil

El ejemplo muestra a un usuario que busca contenido para insertar desde el cuadro de redacción en dispositivos móviles.

Escritorio

El ejemplo muestra a un usuario que busca contenido para insertar desde el cuadro de redacción.

2. Inserte el contenido. Una vez publicado, otros usuarios pueden responder o seleccionar el contenido para ver más información en la aplicación.

Móvil

El ejemplo muestra a un usuario publicando contenido en una conversación del canal en un dispositivo móvil.

Escritorio

El ejemplo muestra a un usuario publicando contenido en una conversación del canal.

Realizar una acción en un mensaje

1. Seleccionar una extensión de mensajería. La aplicación puede incluir uno o varios comandos de acción.

El ejemplo muestra a un usuario que selecciona un comando de acción de la extensión de mensajería.

2. Complete la acción. Su aplicación puede recibir y procesar cualquier contenido o dato enviado por la acción del mensaje. Los usuarios completan la acción en la aplicación mientras permanecen en su conversación.

Ejemplo sobre cómo realizar acciones en un mensaje.

Las extensiones de mensajería también permiten insertar enlaces enriquecidos desde una dirección URL reconocida en un mensaje (esta funcionalidad se denomina «apertura de vínculos»).

1. Pegue un vínculo reconocido en el cuadro de redacción.

Móvil

El ejemplo muestra a un usuario pegando un vínculo en el cuadro de texto en un dispositivo móvil.

Escritorio

El ejemplo muestra a un usuario pegando un vínculo en el cuadro de diálogo.

2. Inserte el contenido. Si la aplicación reconoce la dirección URL en el cuadro de redacción, esta representará el vínculo como una tarjeta que proporciona una vista previa completa del contenido web. (Consulte Instrucciones de diseño de tarjetas adaptables para obtener más información).

Móvil

El ejemplo muestra cómo la dirección URL que su aplicación reconoce, incluye contenido enriquecido en el cuadro de redacción en un dispositivo móvil.

Escritorio

El ejemplo muestra cómo la dirección URL que su aplicación reconoce, incluye contenido enriquecido en el cuadro de redacción.

Administre una extensión de mensajería

Al hacer clic con el botón derecho en su icono, los usuarios pueden anclar, quitar o configurar su extensión de mensajería.

Anatomía

Extensión de mensajería en el cuadro de redacción

Los siguientes ejemplos muestran una extensión de mensajería abierta desde el cuadro de redacción.

Móvil

Ilustración en la que se muestra la anatomía de la interfaz de usuario de una extensión de mensajería en el cuadro de redacción en un dispositivo móvil.

Contador Descripción
1 Nombre de la aplicación: nombre completo de la aplicación.
2 Icono del menú de comandos de acción (opcional): abre una lista de comandos de acción para la extensión de mensajería (si especifica alguno).
3 Cuadro de búsqueda: permite que los usuarios busquen contenido de la aplicación que quieran insertar.
4 Menú de pestaña (opcional): proporciona varias categorías de contenido.
5 Menú de comandos de acción (opcional): muestra la lista de comandos de acción (si especifica alguno).
6 Contenido de la aplicación: principalmente para mostrar los resultados de la búsqueda.

Escritorio

Ilustración que muestra la anatomía de la interfaz de usuario de una extensión de mensajería en el cuadro de redacción.

Contador Descripción
1 Logotipo de la aplicación: icono de color del logotipo de la aplicación.
2 Nombre de la aplicación: nombre completo de la aplicación.
3 Icono del menú de comandos de acción (opcional): abre una lista de comandos de acción para la extensión de mensajería (si especifica alguno).
4 Cuadro de búsqueda: permite que los usuarios busquen contenido de la aplicación que quieran insertar.
5 Menú de pestaña (opcional): proporciona varias categorías de contenido.
6 Menú de comandos de acción (opcional): muestra la lista de comandos de acción (si especifica alguno).
7 Contenido de la aplicación: principalmente para mostrar los resultados de la búsqueda. El ejemplo siguiente usa el diseño de lista (el diseño de cuadrícula es otra opción).
8 Logotipo de la aplicación: icono de esquema del logotipo de la aplicación.

Menú de administración de extensiones de mensajería

Ilustración que muestra la anatomía de la interfaz de usuario de un menú de administración de extensiones de mensajería.

Contador Descripción
1 Desanclar: disponible si el usuario ha anclado la aplicación.
2 Quitar: quita la extensión de mensajería del canal, chat o reunión.

Procedimientos recomendados

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

Configuración y uso general

Ejemplo de configuración y uso general.

Qué hacer: Integración con el inicio de sesión único

El inicio de sesión único (SSO) hace que el proceso de inicio de sesión sea más fácil, rápido y seguro. Además, si un usuario ya ha iniciado sesión en la aplicación personal, no es necesario que vuelva a iniciar sesión para acceder a la extensión de mensaje.

Ejemplo de integración con el inicio de sesión único.

Qué no hacer: Sacar a los usuarios de la conversación

Las extensiones de mensajería son accesos directos que suponen una reducción del cambio de contexto. Por ejemplo, su extensión no debería dirigir a los usuarios a una página web fuera de Teams.

Qué hacer: Resaltar la extensión de mensajería

Las extensiones de mensajería no siempre son fáciles de encontrar. Incluya capturas de pantalla de cómo usarla en la página de detalles de la aplicación. Si la aplicación también incluye un bot, puede incluir la documentación de ayuda de la extensión de mensajería en un paseo de bienvenida del bot.

Plantillas

Ejemplo de plantillas.

Qué hacer: Permitir que Teams controle parte del trabajo de diseño si es posible

Si es útil para sus casos de uso, considere la posibilidad de crear una extensión de mensajería basada en la búsqueda. Teams representa estos tipos de extensiones con elementos de creación de temas y accesibilidad integrados.

Ejemplo de control del trabajo de diseño.

No: Insertar toda la aplicación en un cuadro de diálogo

Si la extensión de mensaje requiere comandos de acción, mantenga el cuadro de diálogo simple y muestre solo los componentes necesarios para completar la acción.

Creación de temas

Ejemplo de creación de temas.

Qué hacer: Aprovechar los tokens de color de Teams

Cada tema de Teams tiene su propia combinación de colores. Para controlar los cambios de tema de forma automática, use los tokens de color (Fluent UI) en su diseño.

Ejemplo de tokens de color.

Qué no hacer: Valores complicados de código de color

Si no usa los tokens de color de Teams, sus diseños serán menos escalables y administrarlos tomará más tiempo.

Acciones

Ejemplo de acciones.

Qué hacer: Incluir comandos de acción que sean útiles en el contexto

Las acciones de mensaje deben relacionarse con lo que un usuario está mirando. Por ejemplo, proporcione a los usuarios un acceso directo para crear una incidencia o elemento de trabajo usando el texto de la publicación de un usuario.

Ejemplo de comandos de acción.

Qué no hacer: Incluir comandos de acciones que no son contextuales

Probablemente, una acción de mensaje para Ver el panel sería considerada no coherente en la mayoría de las conversaciones.

Búsquedas

Qué hacer: Mostrar los resultados de la búsqueda al escribir

Proporcione resultados de la búsqueda sugeridos mientras los usuarios escriben. Es posible que encuentren el contenido que necesitan más rápido con una cantidad mínima de caracteres.

Qué no hacer: Requerir que los usuarios envíen una consulta

Puede hacer que los usuarios presionen una tecla o seleccionen un botón para enviar consultas a la aplicación. Aunque esto puede resultar más fácil en el servicio "Servicios de aplicaciones", es posible que a los usuarios les confunda no ver los resultados de la búsqueda en tiempo real a medida que escriben su consulta.

Qué hacer: Considerar la posibilidad de realizar consultas sin utilizar términos

Por ejemplo, antes de que un usuario escriba algo en el cuadro de búsqueda, muestre lo que vio por última vez en la aplicación. Es posible que quieran insertar ese contenido en su conversación.