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).
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
| 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. |
| Contador | Descripción |
|---|---|
| A | Pestañas: proporciona navegación para tu aplicación personal. |
| 1 | webview: muestra el contenido de la aplicación. |
Escritorio
| 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). |
| 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
| 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
| 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Consulte también
Estas otras directrices de diseño pueden ayudar en función del ámbito de la aplicación personal: