Diseño de la aplicación personal para Microsoft Teams

Una aplicación personal puede ser un bot, un área de trabajo privada o ambos. A veces, funciona como un espacio para crear o ver contenido, otras veces ofrece al usuario una vista de pájaro de todo lo que es cuando la aplicación se ha configurado como una pestaña en varios canales.

Para guiar el diseño de la aplicación, la siguiente información describe e ilustra cómo los usuarios pueden agregar, usar y administrar aplicaciones personales en Microsoft Teams.

Kit de IU de Microsoft Teams

Puede encontrar instrucciones completas para el diseño de aplicaciones personales, incluidos los elementos que puede captar y modificar según sea necesario, en el kit de interfaz de usuario de Microsoft Teams. El kit de UI también tiene temas esenciales, como la accesibilidad y el tamaño de respuesta, que no se cubren aquí.

Agregar una aplicación personal

Puede Agregar una aplicación personal desde el almacén de Microsoft Teams (AppSource) o desde el flotante de aplicaciones seleccionando el icono más en el lado izquierdo de Teams (que se muestra en el ejemplo siguiente).

En el ejemplo se muestra cómo agregar una aplicación personal desde el control flotante de la aplicación.

Usar una aplicación personal (área de trabajo privada)

Con un área de trabajo privada, puede ver el contenido de la aplicación que es significativo para usted en una ubicación central sin salir de Microsoft Teams.

(Nota de implementación: el área de trabajo privada se basa en la capacidad de la pestaña personal ).

Anatomía: aplicación personal (área de trabajo privada)

Ejemplo muestra anatomía de componentes de la pestaña personal.

Counter Descripción
A Atribución de aplicaciones: el logotipo y el nombre de la aplicación.
B Pestañas: proporciona navegación para su aplicación personal. Por ejemplo, incluya una ficha acerca de o ayuda .
C Vista emergente: inserta el contenido de la aplicación desde una ventana primaria en una ventana secundaria independiente.
D Menú más: incluye información adicional de la aplicación y opciones. (También puede hacer que la configuración sea una pestaña.)

Ejemplo muestra anatomía estructural de la pestaña personal.

Counter Descripción
A Pestañas: proporciona navegación para su aplicación personal.
1 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 su pestaña personal:

  • 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 aplicación personal (bot)

Las aplicaciones personales pueden incluir un bot para las conversaciones de uno en uno y las notificaciones privadas (por ejemplo, cuando un compañero publica un Comentario en la mesa de mesas). El bot está disponible en la ficha que especifique.

Anatomía: aplicación personal (bot)

Ejemplo que muestra la anatomía del componente de bot personal.

Counter Descripción
A Ficha bot: por ejemplo, incluye una ficha chat para tener acceso a conversaciones y notificaciones de bot.
B Mensaje de bot: los bots suelen enviar mensajes y notificaciones en forma de una tarjeta (como una tarjeta adaptable).
C Cuadro de redacción: campo de entrada para enviar mensajes al bot.

Procedimientos recomendados

Prioridad de la pestaña

Do: mostrar el contenido más relevante en la primera pestaña

Con el tamaño de capacidad de respuesta, las pestañas de la derecha se truncan o desaesn.

El ejemplo muestra una práctica recomendada de la aplicación personal.

No: lidere con contenido o metadatos secundarios

Al igual que una aplicación web estándar, la navegación por pestaña debe progresar en un orden que ayude a comprender las características principales de la aplicación.

El ejemplo muestra una práctica recomendada de la aplicación personal.

Jerarquía de pestañas

Do: las pestañas deben ser de la misma jerarquía y representan páginas de aplicaciones clave

Las pestañas deben categorizar el contenido y las características principales de la aplicación. Con el tamaño de capacidad de respuesta, el contenido de la derecha puede truncarse o quedar fuera de la vista.

El ejemplo muestra una práctica recomendada de la aplicación personal.

No: incluir distintos niveles de jerarquía

El contenido debe progresar en un orden lógico que ayude a los usuarios a tener sentido. Si tiene dos pestañas estrechamente relacionadas, considere la posibilidad de combinarlas en una pestaña.

El ejemplo muestra una práctica recomendada de la aplicación personal.

Experiencia de primera ejecución

Do: incluir una experiencia de primera ejecución

Debe haber al menos una pantalla de bienvenida la primera vez que use una aplicación personal. Para los bots, describa lo que puede hacer el bot y proporcione acciones rápidas, como un botón de inicio de sesión.

El ejemplo muestra una práctica recomendada de la aplicación personal.

El ejemplo muestra una práctica recomendada de la aplicación personal.

No: empezar con una pantalla en blanco

Los usuarios podrían confundirse si no aparece nada la primera vez que ejecutan la aplicación.

El ejemplo muestra una práctica recomendada de la aplicación personal.

Contenido personalizado

Hacer: agregar contenido de aplicaciones relevante para un usuario

Ya sea una pestaña personal o un bot, mostrar contenido relacionado solo con la actividad del usuario en la aplicación.

El ejemplo muestra una práctica recomendada de la aplicación personal.

El ejemplo muestra una práctica recomendada de la aplicación personal.

No: mostrar contenido no relacionado o demasiado amplio

En los contextos personales, no se muestra el contenido de los equipos de los que no forma parte el usuario. El contenido del bot personal debe centrarse en el individuo (no en un grupo).

El ejemplo muestra una práctica recomendada de la aplicación personal.

El ejemplo muestra una práctica recomendada de la aplicación personal.

Características complejas de la aplicación

Do: permitir a los usuarios el acceso a características complejas en un explorador

La aplicación debe centrarse en las tareas principales de Microsoft Teams, pero todavía puede ver la aplicación independiente completa en un explorador.

El ejemplo muestra una práctica recomendada de la aplicación personal.

No: incluir toda la aplicación

A menos que haya creado la aplicación específicamente para Teams, probablemente tiene características que no tienen sentido en una herramienta de colaboración.

El ejemplo muestra una práctica recomendada de la aplicación personal.

Administrar una pestaña personal

En la parte izquierda de Microsoft Teams, los usuarios pueden hacer clic con el botón derecho en la aplicación personal para anclar, quitar y configurar otras opciones de la aplicación.

Ejemplo muestra opciones para administrar una aplicación personal.

Más información

Estas otras instrucciones de diseño pueden ayudarle en función del ámbito de su aplicación personal:

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.