Concevoir votre onglet pour Microsoft Teams

Un onglet est un espace de grande taille pour le contenu de votre application. Pour guider la conception de votre application, les informations suivantes décrivent et illustrent comment des utilisateurs peuvent ajouter, utiliser et gérer des onglets dans Teams.

Kit d’interface utilisateur de Microsoft Teams

Vous trouverez des instructions plus détaillées sur la conception d’onglet, y compris les éléments que vous pouvez récupérer et modifier selon vos besoins, dans le Kit d’interface utilisateur de Microsoft Teams. 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 un onglet

Vous pouvez ajouter un onglet à partir du Store Teams (AppSource) ou dans l’un des contextes suivants :

  • Conversation
  • Canal
  • Réunion (avant, pendant ou après la réunion)

Mobile

Les utilisateurs peuvent accéder aux onglets en sélectionnant le bouton Plus dans le canal (exemple ci-dessous) ou la conversation dans laquelle ils ont été ajoutés.

L’exemple illustre l’ajout d’un onglet mobile dans un canal.

Ordinateur de bureau

L’exemple suivant montre comment les utilisateurs peuvent ajouter un onglet dans un canal.

L’exemple montre l’ajout d’un onglet dans un canal.

Configurer un onglet

Il existe un bref processus de configuration pour ajouter une application en tant qu’onglet de canal, conversation ou de réunion. C’est en grande partie à vous de faire l’expérience. Par exemple, vous pouvez avoir une description de l’utilisation de l’application et de certains paramètres facultatifs. Incluez une étape de connexion ici si vous devez authentifier les utilisateurs.

Boîte de dialogue de configuration d’onglet

Exemple de configuration modale d’onglet.

Anatomie : boîte de dialogue de configuration d’onglet

Illustration montrant l’anatomie de l’interface utilisateur d’une configuration modale d’onglet.

Compteur Description
1 Logo d’application : logo d’application en couleur complète de votre application.
2 Nom de l’application : nom complet de votre application.
3 IFrame : espace réactif pour le contenu de votre application (par exemple, authentification ou paramètres d’onglet).
4 À propos du lien : ouvre une boîte de dialogue affichant plus d’informations sur l’application, telles qu’une description complète, les autorisations requises par l’application et les liens vers votre politique de confidentialité et les conditions d’utilisation.
5 Bouton Fermer : ferme la boîte de dialogue.
6 Option Avertir les membres de l’équipe : la boîte de dialogue demande aux utilisateurs s’ils souhaitent créer un billet pour informer d’autres utilisateurs qu’ils ont ajouté un onglet.
7 Bouton Précédent : passe à l’étape précédente en fonction de l’endroit où la boîte de dialogue s’est ouverte.
8 Bouton Enregistrer : termine la configuration de l’onglet.

Authentification d’onglet avec l’authentification unique

Vous pouvez ajouter une étape dans laquelle les utilisateurs doivent d’abord se connecter avec leurs informations d’identification Microsoft. Cette méthode d’authentification est appelée authentification unique (SSO).

Exemple d’écran d’authentification de l’onglet.

Concevoir une configuration d’onglet avec des modèles d’interface utilisateur

Utilisez l’un des modèles d’interface utilisateur Teams suivants pour vous aider à concevoir votre expérience de configuration d’onglet :

  • 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.
  • 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.

Afficher un onglet

Les onglets offrent une expérience web en plein écran dans Teams où vous pouvez afficher du contenu collaboratif (tableaux de tâches et tableaux de bord, par exemple) et des informations importantes.

Mobile

L’exemple montre un onglet mobile avec un tableau des tâches.

Ordinateur de bureau

L’exemple montre un onglet avec un tableau des tâches.

Anatomie : onglet

Mobile

Illustration montrant l’anatomie de l’interface utilisateur d’un onglet.

Compteur Description
1 Nom de l’onglet : étiquette de navigation pour votre onglet.
2 Conversation par onglet: ouvre une conversation qui permet aux utilisateurs d’avoir une conversation à côté du contenu.
3 affichage web : affiche le contenu de votre application.

Ordinateur de bureau

Cette illustration montre l’anatomie de l’interface utilisateur d’un onglet.

Compteur Description
1 Nom de l’onglet : étiquette de navigation pour votre onglet.
2 Dépassement d’onglet : ouvre les actions d’onglet, telles que renommer et supprimer.
3 Conversation par onglet : ouvre une conversation à droite, ce qui permet aux utilisateurs d’avoir une conversation à côté du contenu.
4 IFrame : affiche le contenu de votre application.

Concevoir un onglet avec des modèles d’interface utilisateur et des composants avancés

Utilisez l’un des composants et modèles Teams suivants pour vous aider à concevoir votre expérience d’onglet :

  • 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 onglet nécessite une navigation. En règle générale, vous devez conserver la navigation par onglets au minimum.

Utiliser un onglet pour collaborer

Les onglets facilitent les conversations relatives à un contenu dans un emplacement central.

Conversation de thread

Les utilisateurs peuvent publier automatiquement sur un canal ou une conversation une fois qu’ils ont ajouté un nouvel onglet. Non seulement cela leur permet d’informer les membres de l’équipe du nouveau contenu et de fournir un lien vers l’onglet, mais les utilisateurs peuvent également commencer à discuter de l’onglet.

Mobile

L’exemple montre un onglet mobile abordé dans un thread de canal.

Ordinateur de bureau

L’exemple montre un onglet étant évoqué dans un thread de canal.

Conversation par onglets

Les utilisateurs peuvent avoir une conversation en regard du contenu de l’onglet qu’ils affichent. Sur un ordinateur de bureau, la conversation s’ouvre sur le côté du contenu de l’application.

Mobile

L’exemple montre un onglet mobile avec une zone de conversation en contexte.

Ordinateur de bureau

L’exemple montre un onglet avec une conversation ouverte sur le côté droit.

Autorisations et affichages en fonction du rôle

L’expérience d’onglet peut être différente pour les utilisateurs en fonction de leurs autorisations. Par exemple, un utilisateur peut accéder à l’onglet sans avoir à se connecter. Toutefois, un autre utilisateur doit se connecter et afficher un contenu légèrement différent.

Gérer un onglet

Vous pouvez inclure des options pour renommer, supprimer ou modifier un onglet.

Anatomie : menu d’onglet

Mobile

Illustration montrant l’anatomie de l’interface utilisateur d’un menu onglet mobile.

Compteur Description
1 Ouvrir dans le navigateur : ouvre l’application dans le navigateur par défaut de l’appareil.
2 Lien Copier : les utilisateurs peuvent copier et partager un lien vers l’onglet.
3 Paramètres : (Facultatif) Modifier les paramètres d’un onglet après son ajout.
4 Renommer : les utilisateurs peuvent donner à l’onglet un nom significatif pour le canal, la conversation ou la réunion.
5 Supprimer : supprime l’onglet du canal, de la conversation ou de la réunion.

Ordinateur de bureau

Illustration montrant l’anatomie de l’interface utilisateur d’un menu d’onglet.

Compteur Description
1 Paramètres : (Facultatif) Permet aux utilisateurs de modifier les paramètres d’un onglet après son ajout.
2 Renommer : les utilisateurs peuvent donner à l’onglet un nom significatif pour le canal, la conversation ou la réunion.
3 Supprimer : supprime l’onglet du canal, de la conversation ou de la réunion.

Notifications d’onglet et liaison approfondie

Vous pouvez envoyer un message avec un lien profond vers votre onglet. Par exemple, une carte affiche un résumé des données de bogue qu’un utilisateur peut sélectionner pour voir l’intégralité du bogue dans un onglet. L’envoi de messages sur l’activité de l’onglet augmente la sensibilisation sans avertir explicitement tout le monde (c’est-à-dire, activité sans bruit). Vous pouvez également @mentionner des utilisateurs spécifiques si nécessaire.

Informez les utilisateurs de l’activité de l’onglet de l’une des manières suivantes :

  • Bot : cette méthode est préférée, en particulier si le thread d’onglet est ciblé. La conversation à thread de l’onglet est déplacée en tant que conversation récemment active. Cette méthode permet également une certaine complexité dans la façon dont la notification est envoyée.
  • Message : un message s’affiche dans le flux d’activités de l’utilisateur avec un lien profond vers l’onglet.

Meilleures pratiques

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

Collaboration

Illustration montrant comment procéder avec la conception de navigation d’onglet.

À faire : faciliter la conversation

Incluez le contenu et les composants dont les utilisateurs peuvent parler. S’ils ne s’intègrent pas dans le contexte d’une conversation, d’un canal ou d’une réunion, ils n’appartiennent pas à votre onglet.

L’exemple montre ce qu’il ne faut pas faire avec la conception de navigation par onglets.

À ne pas faire : traiter votre onglet comme n’importe quelle autre page web

Un onglet n’est pas une page web que quelqu’un peut afficher une seule fois. Un onglet doit afficher le contenu le plus important et pertinent dont les utilisateurs ont besoin pour accomplir quelque chose ensemble.

Exemple montrant comment procéder avec la conception de navigation par onglets.

À faire : limiter les tâches et les données

Les onglets fonctionnent mieux lorsqu’ils s’adressent à des besoins spécifiques. Incluez un ensemble limité de tâches et de données pertinentes pour l’équipe ou le groupe.

Illustration montrant ce qu’il ne faut pas faire avec la conception de navigation par onglets.

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

L’utilisation d’un onglet pour afficher l’ensemble d’une application avec une navigation à plusieurs niveaux et des interactions complexes entraîne une surcharge d’informations.

Configuration

Illustration montrant ce qu’il faut faire avec la conception de la configuration de l’onglet.

À faire : rester simple

Si votre application nécessite une authentification, essayez d’intégrer l’authentification unique (SSO) Microsoft pour une expérience d’authentification plus transparente. En outre, incluez uniquement les informations essentielles et les étapes à suivre pour ajouter l’onglet.

Illustration montrant ce qu’il ne faut pas faire avec la conception de la configuration de l’onglet.

À ne pas faire : trop d’étapes

Supprimez les étapes inutiles pour ajouter un onglet.

Thèmes

Illustration montrant ce qu’il faut faire avec les thèmes d’onglet.

À faire : tirer parti des jetons de couleur Teams

Chaque thème Teams a son propre modèle de couleurs. Pour gérer automatiquement les modifications de thème, utilisez jetons de couleur (Fluent UI) dans votre conception.

Illustration montrant ce qu’il ne faut pas faire avec les onglets.

À ne pas faire : valeurs de couleur du code en dur

Si vous n’utilisez pas de jetons de couleur Teams, vos conceptions seront moins évolutives et prendront plus de temps à gérer.

Voir aussi

Modifications des marges de l’onglet