Diseñar tu 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 lugar para crear o ver contenido, otras veces ofrece al usuario una vista visual de todo lo que es suyo 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 las personas pueden agregar, usar y administrar aplicaciones personales en Teams.

Kit de UI de Microsoft Teams

Puedes encontrar instrucciones completas de diseño de aplicaciones personales, incluidos los elementos que puedes agarrar y modificar según sea necesario, en el kit de interfaz Microsoft Teams usuario. El kit de interfaz de usuario también tiene temas esenciales, como la accesibilidad y el tamaño dinámico que no se tratan aquí.

Agregar una aplicación personal

Los usuarios pueden agregar una aplicación personal desde la tienda Teams o el menú desplegable de la aplicación 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 menú desplegable de la aplicación.

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

Con un área de trabajo privada, los usuarios pueden ver contenido de la aplicación que sea significativo para ellos en una ubicación central sin dejar Teams.

(Nota de implementación: el área de trabajo privada se basa en la funcionalidad de tabulación personal).

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

Móvil

En el ejemplo se muestra la anatomía del componente de la pestaña personal.

Contador Descripción
A Atribución de la aplicación: el nombre de la aplicación.
N Pestañas: proporciona navegación para tu aplicación personal.
C Más menú: incluye información y opciones de aplicación adicionales.
D Navegación principal: proporciona navegación a la aplicación otras características Teams principales.

En el ejemplo se muestra la anatomía estructural de la pestaña personal.

Contador Descripción
A Pestañas: proporciona navegación para tu aplicación personal.
1 webview: muestra el contenido de la aplicación.

Escritorio

En este ejemplo se muestra la anatomía del componente de la pestaña personal.

Contador Descripción
A Atribución de la aplicación: el logotipo y el nombre de la aplicación.
N Pestañas: proporciona navegación para tu aplicación personal.
C Vista emergente: inserta el contenido de la aplicación desde una ventana primaria a una ventana secundaria independiente.
D Más menú: incluye información y opciones de aplicación adicionales. (También puede crear una Configuración una pestaña).

En este ejemplo se muestra la anatomía estructural de la pestaña personal.

Contador Descripción
A Pestañas: proporciona navegación para tu aplicación personal.
1 iframe: muestra el contenido de la aplicación.

Diseño con plantillas de interfaz de usuario y componentes avanzados

Use una de las siguientes plantillas Teams y componentes para ayudar a diseñar la pestaña personal:

  • 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 izquierdo puede ayudar si la aplicación personal requiere algo de navegación. En general, debe mantener la navegación al mínimo.

Usar una aplicación personal (bot)

Las aplicaciones personales pueden incluir un bot para conversaciones uno a uno y notificaciones privadas (por ejemplo, cuando un compañero publica un comentario en la mesa de trabajo). Los usuarios interactúan con el bot en una pestaña especificada.

Anatomía: aplicación personal (bot)

Móvil

En el ejemplo se muestra la anatomía del componente del bot personal.

Contador Descripción
A Punto de entrada del bot: punto de entrada para que los usuarios accedan a la característica bot en la aplicación personal.
N Botón Atrás: lleva a los usuarios de vuelta al área de trabajo privada.
C Mensaje de bot: los bots suelen enviar mensajes y notificaciones en forma de tarjeta (como una tarjeta adaptable).
D Cuadro Redacción: campo de entrada para enviar mensajes al bot.

Escritorio

En el ejemplo se muestra la anatomía del componente de bot personal.

Contador Descripción
A Ficha Bot: Por ejemplo, incluya una pestaña Chat para obtener acceso a las conversaciones y notificaciones del bot.
N Mensaje de bot: los bots suelen enviar mensajes y notificaciones en forma de tarjeta (como una tarjeta adaptable).
C Cuadro Redacción: campo de entrada para enviar mensajes al bot.

Administrar una pestaña personal

En el lado izquierdo de Teams, los usuarios pueden hacer clic con el botón secundario en la aplicación personal para anclar, quitar y configurar otras opciones de la aplicación.

En el ejemplo se muestran las opciones para administrar una aplicación personal.

Procedimientos recomendados

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

Prioridad de tabulación

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

Con el tamaño dinámico, las pestañas de la derecha pueden truncarse o quedar fuera de la vista.

En el ejemplo se muestra una aplicación personal que muestra el contenido más relevante en la primera pestaña.

Don't: Lead with secondary content or metadata

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

En el ejemplo se muestra una aplicación personal que lleva contenido o metadatos secundarios.

Jerarquía de tabulaciones

Hacer: las pestañas deben ser de igual jerarquía y representar páginas clave de la aplicación

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

En el ejemplo se muestra una aplicación personal con pestañas de igual jerarquía.

No: incluir diferentes niveles de jerarquía

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

En el ejemplo se muestra una aplicación personal con diferentes niveles de jerarquía.

Experiencia de primera ejecución

Do: Include a first-run experience

Debería haber al menos una pantalla de bienvenida la primera vez que uses una aplicación personal. En el caso de los bots, describa lo que el bot puede hacer y proporcione acciones rápidas, como un botón de inicio de sesión.

En el ejemplo se muestra qué hacer durante la primera ejecución de una aplicación personal.

Otro ejemplo muestra qué hacer durante la primera ejecución de una aplicación personal.

Don't: Start with a blank screen

Es posible que los usuarios se confundan si no se muestra nada la primera vez que ejecutan la aplicación.

En el ejemplo se muestra lo que no se debe hacer durante la primera ejecución de una aplicación personal.

Contenido personalizado

Hacer: agregar contenido de aplicación relevante para un usuario

Tanto si se trata de una pestaña personal como de un bot, muestra contenido relacionado solo con la actividad de un usuario en la aplicación.

En el ejemplo se muestra qué hacer con una aplicación personal y contenido personalizado.

Otro ejemplo muestra qué hacer con una aplicación personal y contenido personalizado.

No: mostrar contenido demasiado amplio o no relacionado

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

En el ejemplo se muestra qué no hacer con una aplicación personal y contenido personalizado.

Otro ejemplo muestra qué no hacer con una aplicación personal y contenido personalizado.

Características complejas de la aplicación

Hacer: permitir que los usuarios accedan a características complejas en un explorador

La aplicación debe centrarse en las tareas principales Teams, pero aún puedes ver la aplicación completa e independiente en un explorador.

En el ejemplo se muestra cómo controlar las características complejas de la aplicación con una aplicación personal.

No: incluir toda la aplicación

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

En el ejemplo se muestra cómo no controlar las características complejas de la aplicación con una aplicación personal.

Consulte también

Estas otras directrices de diseño pueden ayudar en función del ámbito de la aplicación personal: