Conception de votre extension Microsoft Teams réunion

Vous pouvez créer des applications pour rendre les réunions plus productives. Par exemple, demandez aux personnes de répondre à une enquête au cours d’une réunion ou d’envoyer un rappel rapide qui n’interrompt pas le flux de la réunion.

Kit d’interface utilisateur de Microsoft Teams

Vous trouverez des instructions de conception plus complètes, y compris des éléments que vous pouvez récupérer et modifier selon vos besoins, dans Microsoft Teams kit d’interface utilisateur.

Ajouter une extension de réunion

Les utilisateurs peuvent ajouter une extension de réunion avant et pendant les réunions. Ils peuvent également ajouter une application pour une réunion spécifique directement à partir du Teams store.

Ajouter avant une réunion

Dans les détails de la réunion, les utilisateurs peuvent sélectionner Ajouter un onglet + pour ouvrir le programme volant de l’application et rechercher des applications optimisées pour les réunions.

L’exemple montre comment ajouter une extension de réunion avant une réunion.

Ajouter au cours d’une réunion

Mobile

Une fois que l’application a été ajoutée (par exemple, sur le bureau), les utilisateurs peuvent accéder à l’application dans une réunion en sélectionnant Plus .

L’exemple montre comment ajouter une extension de réunion lors d’une réunion sur mobile.

Ordinateur de bureau

Lors d’une réunion, les utilisateurs peuvent sélectionner Ajouter une > application et l’application de leur choix.

L’exemple montre comment ajouter une extension de réunion au cours d’une réunion.

Avant une réunion

Avant une réunion, votre application est accessible aux utilisateurs sous un onglet. L’exemple suivant montre un brouillon de question d’enquête à qui les personnes répondront au cours de la réunion.

L’exemple montre comment apper le contenu des détails de la réunion avant un appel.

Anatomie : onglet Réunion (avant et après les réunions)

L’exemple montre l’anatomie structurelle d’un onglet de réunion avant et après une réunion.

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 IFrame : affiche le contenu de votre application.

Conception avec des modèles d’interface utilisateur

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

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

Utiliser un onglet de réunion

L’onglet de réunion est un canevas qui permet d’accroître la collaboration pendant les réunions. Les participants peuvent voir et interagir avec le contenu de l’application dans un espace dédié en dehors de la phase de réunion par le biais d’affichages partagés ou basés sur des rôles.

Cas d’utilisation

Les personnes peuvent utiliser l’onglet réunion pour :

  • Fournissez des commentaires détaillés. Par exemple, évaluez un candidat au poste.
  • Créez un sondage, une enquête ou un élément de tâche pour les participants à la réunion.
  • Afficher les notes pertinentes pour la réunion. Par exemple, des informations sur un responsable commercial.

Mobile

L’exemple montre comment présenter le contenu d’un sondage dans un onglet de réunion sur un appareil mobile.

Ordinateur de bureau

L’exemple montre comment présenter le contenu d’un sondage dans un onglet de réunion.

Anatomie : onglet En réunion

L’exemple montre l’anatomie structurelle d’un onglet en réunion.

Compteur Description
1 Icône de l’application (sélectionnée): logo d’application transparent de 16 pixels.
2 Nom de l'application
3 En-tête: inclut le nom de votre application.
4 Bouton Fermer : ferme l’onglet. Utilisez toujours l’icône de fermeture supérieure droite au lieu d’une action dans le pied de plan.
5 Barre de notification: les alertes d’erreur s’affichent directement sous l’en-tête et poussent le contenu de l’iFrame vers le bas de 20 pixels.
6 IFrame : affiche le contenu de votre application.

Espacement

Optimisez votre onglet de réunion pour qu’il s’adapte de bord à bord dans la zone iFrame de 280 pixels. Il y a 20 pixels de remplissage sur les côtés gauche et droit de l’iframe et entre l’en-tête de l’onglet. L’iframe est pleine page en bas de l’onglet.

L’exemple montre les dimensions d’espacement des onglets dans la réunion.

Défilement

N’oubliez pas les choses suivantes si vous autorisez le défilement :

  • Le contenu du contenu de l’iframe doit uniquement défiler verticalement.
  • Les utilisateurs doivent voir uniquement le contenu vers qui ils ont fait défiler (rien au-dessus ou au-dessous).
  • La barre de défilement fait partie du contenu de l’iframe.

L’exemple montre comment défile l’onglet dans la réunion.

Pour les scénarios avec des couches de navigation ou un contenu épais, nous vous recommandons de permettre aux utilisateurs d’accéder à une couche secondaire. Les utilisateurs doivent pouvoir revenir à la couche précédente.

Exemple de navigation en réunion.

Utiliser une boîte de dialogue de réunion

Les boîtes de dialogue de réunion s’affichent sur la Teams de réunion. Ils nécessitent l’attention, la confirmation ou l’interaction d’un utilisateur, mais sont discrets et n’interrompent pas la réunion. Vous devez les utiliser avec parcimonie et pour les scénarios légers et orientés vers les tâches.

Cas d’utilisation

Les boîtes de dialogue de réunion sont déclenchées par un utilisateur (tel que l’organisateur de la réunion) qui souhaite peut-être que les participants :

  • Fournir de brefs commentaires
  • Prendre une courte enquête ou un sondage
  • Envoyer des approbations
  • Obtenir des rappels

Mobile

L’exemple montre comment utiliser une boîte de dialogue en réunion sur un appareil mobile.

Ordinateur de bureau

L’exemple montre comment utiliser une boîte de dialogue en réunion.

Anatomie : boîte de dialogue en réunion

L’exemple montre l’anatomie structurelle d’une boîte de dialogue en réunion.

Compteur Description
1 En-tête : inclut l’icône de l’application, le nom, la chaîne d’action et l’icône fermer.
2 IFrame : affiche le contenu de votre application.

Anatomie : en-tête de boîte de dialogue en réunion

L’exemple montre l’anatomie structurelle d’un en-tête de boîte de dialogue en réunion.

Il existe deux variantes d’en-tête. Dans la mesure du possible, utilisez la variante avec l’avatar pour renforcer le fait que la boîte de dialogue vient d’une personne.

Compteur Description
1 Avatar: personne qui lance la boîte de dialogue en réunion.
2 Icône de l’application
3 Nom de l'application
4 Bouton Fermer : ferme la boîte de dialogue.
5 Chaîne d’action: décrit généralement qui a initié la boîte de dialogue.

Comportement réactif : boîtes de dialogue en réunion

Les boîtes de dialogue de réunion peuvent varier en taille pour tenir compte de différents scénarios. Veillez à maintenir le remplissage et les tailles de composants.

  • Largeur: vous pouvez spécifier la largeur de l’iframe de la boîte de dialogue n’importe où dans la plage de tailles prise en charge.
  • Hauteur: vous pouvez spécifier la hauteur de l’iframe de la boîte de dialogue n’importe où dans la plage de tailles prise en charge. Vous pouvez également autoriser les utilisateurs à faire défiler verticalement si le contenu de votre application dépasse la hauteur maximale.

Pour implémenter, spécifiez la largeur et la hauteur à l’aide de la externalResourceUrl clé.

Exemple de boîte de dialogue en réunion. Largeur : Min--280 pixels (248 pixels iframe). Max--460 pixels (428 pixels iframe). Hauteur : 300 pixels (iframe).

Utiliser l’étape de réunion partagée

La phase de réunion partagée permet aux participants à la réunion d’interagir et de collaborer avec le contenu de l’application en temps réel. Par exemple, les utilisateurs peuvent se concentrer sur la modification d’un document, le brainstorming avec un tableau blanc ou l’examen d’un tableau de bord.

Les applications partagées à l’étape de la réunion occupent le même espace qu’un écran partagé. L’étape se réoriente pour tous les participants à la réunion.

Notes

Tous les utilisateurs en réunion peuvent voir l’application lorsqu’ils sont partagés à partir du Bureau. Actuellement, les utilisateurs mobiles ne peuvent pas partager de contenu d’application à l’étape de la réunion.

Cas d’utilisation

L’étape de la réunion partagée est une question de collaboration et de participation. Voici quelques exemples de scénarios pour vous aider à commencer.

Modifier et réviser : examinez les tableaux de bord et la planification avec tous les utilisateurs de la réunion.

L’exemple montre un tableau de bord en cours de révision lors de la phase de réunion partagée.

Tableau blanc : dessin et idée ensemble sur une zone de dessin partagée.

L’exemple montre un tableau blanc sur la phase de réunion partagée.

Questionnaire : Tester les connaissances et obtenir des informations avec des supports interactifs.

Un exemple montre un questionnaire sur la phase de réunion partagée.

Anatomie : étape de réunion partagée

L’image illustre l’anatomie de conception de la phase de réunion partagée.

Compteur Description
1 Icône de l’application: l’icône en surbrillant indique que l’onglet de l’application en réunion est ouvert.
2 Bouton Partager à l’étape de la réunion: point d’entrée pour partager l’application à la phase de réunion. S’affiche si vous configurez votre application pour utiliser la phase de réunion partagée.
3 IFrame : affiche le contenu de votre application.
4 Bouton Arrêter le partage : arrête le partage de l’application à la phase de réunion. S’affiche uniquement pour le participant qui a démarré le partage.
5 Attribution du présentateur: affiche le nom du participant qui a partagé l’application.

Comportement réactif : étape de réunion partagée

Les applications partagées au stade de la réunion varient en taille en fonction de l’état de la réunion et de la façon dont l’utilisateur re dimensionne la fenêtre. Maintenez le remplissage et la disposition réactive de la navigation et des contrôles comme vous le feriez dans un navigateur.

  • Panneau latéral: un utilisateur peut ouvrir le panneau latéral à tout moment au cours d’une réunion pour discuter, afficher la liste de membres ou utiliser une application (c’est-à-dire, l’onglet de la réunion). L’étape est réorganiser dynamiquement lorsque le panneau est ouvert.
  • Grille vidéo et audio : la grille vidéo et audio est toujours visible pour afficher les participants à la réunion. Lorsqu’un utilisateur met à la une ou épingle une personne dans la réunion, cela augmente la hauteur ou la largeur de la grille des participants en fonction de l’orientation.

Étape de la réunion (sans panneau latéral)

Lorsque le panneau latéral n’est pas ouvert, l’étape de la réunion est de 994 x 678 pixels par défaut et peut être d’au moins 792 x 382 pixels.

Image montrant la réactivité de la phase de réunion partagée avec le panneau latéral fermé.

Étape de la réunion (avec panneau latéral)

Lorsque le panneau latéral est ouvert, l’étape de la réunion est de 918 x 540 pixels par défaut et peut être d’au moins 472 x 382 pixels.

Image montrant la réactivité de la phase de réunion partagée avec le panneau latéral ouvert.

Après une réunion

Vous pouvez revenir à une réunion une fois qu’elle s’est terminée et afficher le contenu de l’application. Dans cet exemple, l’organisateur de la réunion peut examiner les résultats des sondages dans l’onglet Contoso. (Remarque : du point de vue de la conception, il n’y a aucune différence entre l’expérience de l’onglet avant et après la réunion.)

L’exemple d’illustration montre un onglet après la réunion.

Meilleures pratiques

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

Interactions

Exemple montrant comment limiter le nombre d’interactions.

À faire : limiter le nombre d’interactions

Pour les boîtes de dialogue de réunion, supprimez le contenu inutile qui n’aide pas les utilisateurs à accomplir une tâche rapidement.

Exemple montrant comment ne pas introduire d’éléments inutiles.

À ne pas faire : introduire des éléments inutiles

Une seule boîte de dialogue de réunion avec plusieurs interactions peut distrayer la réunion.

Exemple montrant comment créer un environnement centré.

À faire : créer un environnement axé sur le travail

Nous vous recommandons de conserver l’étendue de l’expérience de votre application uniquement à la phase de réunion. Vous pouvez utiliser un onglet de réunion dans le panneau latéral en tant qu’affichage privé secondaire pour certains scénarios.

Exemple montrant comment ne pas inclure de surfaces concurrentes pendant les réunions.

À ne pas faire : inclure des surfaces concurrentes

Votre application doit uniquement demander aux utilisateurs de se concentrer sur une seule surface à la fois, qu’elle collabore sur la scène ou qu’elle réponde à une boîte de dialogue en réunion. (Remarque : vous ne pouvez pas conserver les boîtes de dialogue déclenchées par d’autres applications pendant que votre application est sur le terrain.)

Disposition

Exemple montrant comment utiliser une mise en page de boîte de dialogue à une seule colonne.

À faire : utiliser une boîte de dialogue d’une colonne

Étant donné que les boîtes de dialogue sont au centre de la phase de réunion, l’achèvement des tâches doit être rapide et simple pour éviter toute frustration de l’utilisateur.

Exemple montrant que vous ne devez pas encombrer l’espace d’une extension de réunion.

À ne pas faire : encombrer l’espace

Le contenu épais ou trop structuré peut être gênant et gênant, en particulier lors d’une réunion.

Exemple montrant une disposition d’onglet à une seule colonne.

À faire : utiliser un onglet d’une colonne

Étant donné la nature étroite de l’onglet en réunion, nous vous recommandons vivement d’afficher le contenu dans une seule colonne.

Exemple montrant un onglet avec plusieurs colonnes.

À ne pas faire : utiliser plusieurs colonnes

En raison de l’espace limité de l’onglet en réunion, les dispositions avec plusieurs colonnes ne sont pas recommandées.

Contrôles

Exemple montrant comment aligner à droite les contrôles principaux.

À faire : aligner à droite l’action principale

Nous vous recommandons de positionner l’action la plus lourde visuellement à l’emplacement le plus à droite.

Exemple montrant comment ne pas aligner à gauche les contrôles principaux.

À ne pas faire : aligner les actions à gauche ou au centre

Cela s’écarte du modèle Teams standard pour l’emplacement des contrôles dans une boîte de dialogue et peut être en conflit avec une boîte de dialogue derrière la partie supérieure.

Défilement

Exemple de défilement vertical dans un onglet de réunion.

Exemple de défilement vertical dans l’étape de réunion partagée.

À faire : faire défiler verticalement

Les utilisateurs s’attendent à ce que le défilement vertical Teams (et ailleurs). Cela peut ne pas s’appliquer si vous avez un canevas créatif, tel qu’un tableau blanc, que les utilisateurs peuvent faire panoramique sur les axes x et y.

Exemple de défilement horizontal dans un onglet de réunion.

Exemple de défilement horizontal dans l’étape de réunion partagée.

À ne pas faire : faire défiler horizontalement

Le défilement horizontal n’est pas un comportement attendu dans Teams (y compris l’environnement de réunion).

Flux de travail

Exemple montrant un scénario complexe dans un onglet de réunion.

À faire : surfacer des scénarios complexes dans l’onglet réunion

Si votre application comprend plusieurs tâches, nous vous recommandons vivement d’utiliser un onglet de réunion avec une disposition sur une seule colonne.

Exemple de scénarios complexes dans une boîte de dialogue en réunion.

À ne pas faire : rendre les boîtes de dialogue de réunion complexes

Les boîtes de dialogue en réunion sont conçues pour de brèves interactions.

Thèmes

Exemple montrant une extension de réunion avec le thème foncé.

Autre exemple montrant l’extension de réunion avec le thème foncé.

À faire : concentrez-vous sur le thème foncé

Teams réunions sont optimisées pour le thème foncé afin de réduire les bruits visuels et cognitifs afin que les utilisateurs peuvent se concentrer sur la discussion et le contenu partagé. Gardez à l’esprit que certains types d’applications (par exemple, tableau blanc et modification de documents) n’ont pas besoin d’une zone de dessin sombre.

Exemple montrant une extension de réunion avec des couleurs qui ne correspondent pas au thème de réunion.

Autre exemple montrant une extension de réunion avec des couleurs qui ne correspondent pas au thème de la réunion.

À ne pas faire : utiliser des couleurs inconnues

Les couleurs qui entrent en conflit avec l’environnement de réunion peuvent être gênantes et apparaître moins natives Teams. Découvrez la palette de couleurs Teams,y compris les neutres du thème d’appel.

Exemple montrant une extension de réunion avec un bouton Retour.

À faire : avoir un bouton Retour

Si vous avez plusieurs couches de navigation dans un onglet de réunion, les utilisateurs doivent pouvoir revenir à leurs vues précédentes.

Exemple montrant une extension de réunion avec deux boutons d’mascmit.

À ne pas faire : inclure un autre bouton d’arrêt

La fourniture d’une option pour fermer le contenu de l’onglet en réunion peut entraîner des problèmes, car l’en-tête ne doit pas être fermé par un bouton.

Exemple montrant des modales (ou des modules de tâche) dans un onglet de réunion.

Attention : évitez les modales dans l’onglet de la réunion

Les modaux (également appelés modules de tâche) dans l’onglet déjà étroit de la réunion peuvent encapsuler et masquer le contenu.

Comportement réactif

Exemple montrant comment re tailler correctement une extension de réunion.

À faire : resize and scale your app responsively

Le contenu de l’application doit être resserre et condensé dynamiquement dans des fenêtres plus petites. Conservez la navigation principale de votre application et tous les contrôles flottants visibles.

Exemple montrant comment ne pas re tailler correctement une extension de réunion.

À ne pas faire : rognez ou clipez les composants principaux de l’interface utilisateur

La navigation flottante et les contrôles hors écran et la nécessité d’un défilement à rechercher peuvent prêter à confusion pour les utilisateurs. Le contenu de votre application ne doit pas défiler horizontalement lorsqu’il ne peut pas tenir dans l’iframe.

Étape suivante