Conception de votre application personnelle pour Microsoft Teams

Une application personnelle peut être un bot, un espace de travail privé ou les deux. Parfois, il fonctionne comme un endroit pour créer ou afficher du contenu, d’autres fois, il offre à l’utilisateur une vue d’ensemble de tout ce qui lui est propre lorsque l’application a été configurée sous la forme d’un onglet dans plusieurs canaux.

Pour guider la conception de votre application, les informations suivantes décrivent et illustrent comment les personnes peuvent ajouter, utiliser et gérer des applications personnelles dans Teams.

Kit d’interface utilisateur de Microsoft Teams

Vous trouverez des instructions complètes sur la conception d’applications personnelles, y compris des éléments que vous pouvez récupérer et modifier selon vos besoins, dans le kit d’interface Microsoft Teams’interface utilisateur. Le kit d’interface utilisateur contient également des rubriques essentielles telles que l’accessibilité et le dimensionnement réactif qui ne sont pas abordés ici.

Ajouter une application personnelle

Les utilisateurs peuvent ajouter une application personnelle à partir du Teams store ou du flyout d’application en sélectionnant l’icône Plus sur le côté gauche de Teams (illustré dans l’exemple suivant).

L’exemple montre comment ajouter une application personnelle à partir du volant de l’application.

Utiliser une application personnelle (espace de travail privé)

Avec un espace de travail privé, les utilisateurs peuvent afficher du contenu d’application qui leur est significatif dans un emplacement central sans quitter Teams.

(Remarque d’implémentation : l’espace de travail privé est basé sur la fonctionnalité d’onglet personnel.)

Anatomie : application personnelle (espace de travail privé)

Mobile

L’exemple montre l’anatomie des composants de l’onglet personnel.

Compteur Description
A Attribution de l’application: nom de votre application.
B Onglets : fournit la navigation pour votre application personnelle.
C Menu plus : inclut des options et des informations supplémentaires sur l’application.
D Navigation principale: fournit la navigation vers les autres fonctionnalités principales Teams votre application.

L’exemple illustre l’anatomie structurelle de l’onglet personnel.

Compteur Description
A Onglets : fournit la navigation pour votre application personnelle.
1 affichage web : affiche le contenu de votre application.

Ordinateur de bureau

Cet exemple montre l’anatomie des composants de l’onglet personnel.

Compteur Description
A Attribution de l’application: nom et logo de votre application.
B Onglets : fournit la navigation pour votre application personnelle.
C Affichage popout : pousse le contenu de votre application d’une fenêtre parent vers une fenêtre enfant autonome.
D Menu plus : inclut des options et des informations supplémentaires sur l’application. (Vous pouvez également Paramètres un onglet.)

Cet exemple montre l’anatomie structurelle de l’onglet personnel.

Compteur Description
A Onglets : fournit la navigation pour votre application personnelle.
1 IFrame : affiche le contenu de votre application.

Conception avec des modèles d’interface utilisateur et des composants avancés

Utilisez l’un des Teams et composants suivants pour vous aider à concevoir votre onglet personnel :

  • Liste : les listes peuvent afficher des éléments associés dans un format lisible et permettre aux utilisateurs d’agir sur une liste entière ou sur des éléments individuels.
  • Tableau des tâches : un tableau des tâches, parfois appelé « tableau kanban » ou « pistes de course » est une collection de cartes souvent utilisées pour suivre l’état des éléments de travail ou des tickets.
  • Tableau de bord : un tableau de bord est un espace contenant plusieurs cartes qui fournissent une vue d’ensemble de données ou de contenu.
  • Formulaire : les formulaires sont conçus pour collecter, valider et envoyer des entrées utilisateur de manière structurée.
  • État vide : le modèle d’état vide peut être utilisé pour de nombreux scénarios, y compris la connexion, les expériences de première exécution, les messages d’erreur et bien plus encore.
  • Navigation gauche: le composant de navigation gauche peut vous aider si votre application personnelle nécessite une navigation. En règle générale, vous devez conserver la navigation au minimum.

Utiliser une application personnelle (bot)

Les applications personnelles peuvent inclure un bot pour les conversations un-à-un et les notifications privées (par exemple, lorsqu’un collègue publie un commentaire sur l’artboard). Les utilisateurs interagissent avec le bot dans un onglet que vous spécifiez.

Anatomie : application personnelle (bot)

Mobile

L’exemple illustre l’anatomie du composant bot personnel.

Compteur Description
A Point d’entrée du bot: point d’entrée pour que les utilisateurs accèdent à la fonctionnalité bot dans votre application personnelle.
B Bouton Retour : permet aux utilisateurs de revenir à l’espace de travail privé.
C Message du bot: les bots envoient souvent des messages et des notifications sous la forme d’une carte (par exemple, une carte adaptative).
D Zone de composition: champ d’entrée pour l’envoi de messages au bot.

Bureau

L’exemple montre l’anatomie du composant de bot personnel.

Compteur Description
A Onglet Bot: par exemple, incluez un onglet Conversation pour accéder aux conversations et notifications du bot.
B Message du bot: les bots envoient souvent des messages et des notifications sous la forme d’une carte (par exemple, une carte adaptative).
C Zone de composition: champ d’entrée pour l’envoi de messages au bot.

Gérer un onglet personnel

Sur le côté gauche du Teams, les utilisateurs peuvent cliquer avec le bouton droit sur l’application personnelle pour épingler, supprimer et configurer d’autres options d’application.

L’exemple montre les options de gestion d’une application personnelle.

Meilleures pratiques

Utilisez ces recommandations pour créer une expérience d’application de qualité.

Priorité de l’onglet

À faire : afficher le contenu le plus pertinent dans le premier onglet

Avec le resserré réactif, les onglets de droite peuvent être tronqués ou en dehors de la vue.

L’exemple montre une application personnelle affichant le contenu le plus pertinent dans le premier onglet.

À ne pas faire : diriger avec du contenu ou des métadonnées secondaires

À l’exemple d’une application web standard, la navigation par onglets doit s’effectuer dans un ordre qui vous aide à prendre en compte les principales fonctionnalités de votre application.

L’exemple montre une application personnelle en tête avec du contenu ou des métadonnées secondaires.

Hiérarchie d’onglets

À faire : les onglets doivent être de hiérarchie égale et représenter des pages d’application clés

Vos onglets doivent catégoriser les principales fonctionnalités et le contenu de votre application. Avec le resserrage réactif, le contenu à droite peut être tronqué ou hors de vue.

L’exemple montre une application personnelle avec des onglets de hiérarchie égale.

À ne pas faire : inclure différents niveaux de hiérarchie

Votre contenu doit évoluer dans un ordre logique qui aide les utilisateurs à le comprendre. Si vous avez deux onglets qui sont étroitement liés, envisagez de les combiner en un seul onglet.

L’exemple montre une application personnelle avec différents niveaux de hiérarchie.

Première expérience d’utilisation

À faire : inclure une expérience de première expérience

Il doit y avoir au moins un écran d’accueil la première fois que vous utilisez une application personnelle. Pour les bots, décrivez ce que votre bot peut faire et fournissez des actions rapides, telles qu’un bouton de sign-in.

L’exemple montre comment faire lors de la première expérience de première application personnelle.

Un autre exemple montre comment faire lors de la première expérience de première application personnelle.

À ne pas faire : démarrer avec un écran vide

Les utilisateurs peuvent être confondus si rien ne s’affiche la première fois qu’ils exécutent votre application.

L’exemple montre ce qu’il ne faut pas faire lors de la première expérience de première application personnelle.

Contenu personnalisé

À faire : agréger le contenu d’application pertinent pour un utilisateur

Qu’il s’agit d’un onglet personnel ou d’un bot, affichez le contenu lié uniquement à l’activité d’un utilisateur dans votre application.

L’exemple montre comment faire avec une application personnelle et du contenu personnalisé.

Un autre exemple montre comment faire avec une application personnelle et du contenu personnalisé.

À ne pas faire : afficher du contenu non lié ou trop large

Dans les contextes personnels, n’affichez pas de contenu pour les équipes dont un utilisateur ne fait pas partie. Le contenu du bot personnel doit se concentrer sur la personne, et non sur un groupe.

L’exemple montre ce qu’il ne faut pas faire avec une application personnelle et du contenu personnalisé.

Un autre exemple montre ce qu’il ne faut pas faire avec une application personnelle et du contenu personnalisé.

Fonctionnalités d’application complexes

À faire : autoriser les utilisateurs à accéder à des fonctionnalités complexes dans un navigateur

Votre application doit se concentrer sur les tâches principales dans Teams, mais vous pouvez toujours afficher l’application autonome complète dans un navigateur.

L’exemple montre comment gérer des fonctionnalités d’application complexes avec une application personnelle.

À ne pas faire : inclure l’intégralité de votre application

Sauf si vous avez créé votre application spécifiquement Teams, vous disposez probablement de fonctionnalités qui n’ont pas de sens dans un outil de collaboration.

L’exemple montre comment ne pas gérer des fonctionnalités d’application complexes avec une application personnelle.

Voir aussi

Ces autres recommandations de conception peuvent vous aider en fonction de l’étendue de votre application personnelle :