Entwerfen ihrer Microsoft Teams Besprechungserweiterung

Sie können Apps erstellen, um Besprechungen produktiver zu gestalten. Bitten Sie personen beispielsweise, während einer Besprechung eine Umfrage durchzuführen, oder senden Sie eine kurze Erinnerung, die den Ablauf der Besprechung nicht unterbricht.

Microsoft Teams-UI-Kit

Umfassendere Entwurfsrichtlinien, einschließlich Elementen, die Sie nach Bedarf abrufen und ändern können, finden Sie im Microsoft Teams UI Kit.

Hinzufügen einer Besprechungserweiterung

Benutzer können vor und während Besprechungen eine Besprechungserweiterung hinzufügen. Sie können eine App für eine bestimmte Besprechung auch direkt aus dem Teams Store hinzufügen.

Hinzufügen vor einer Besprechung

In den Besprechungsdetails können Benutzer eine Registerkarte hinzufügen + auswählen, um das App-Flyout zu öffnen und apps zu finden, die für Besprechungen optimiert sind.

Beispiel zeigt, wie Sie eine Besprechungserweiterung vor einer Besprechung hinzufügen.

Während einer Besprechung hinzufügen

Mobilgeräte

Nachdem die App hinzugefügt wurde (z. B. auf dem Desktop), können Benutzer in einer Besprechung auf die App zugreifen, indem sie "Mehr" auswählen.

Beispiel zeigt, wie sie während einer Besprechung auf mobilen Geräten eine Besprechungserweiterung hinzufügen.

Desktop

In einer Besprechung können Benutzer weitere > Apps hinzufügen und die gewünschte App auswählen.

Beispiel zeigt, wie sie während einer Besprechung eine Besprechungserweiterung hinzufügen.

Vor einer Besprechung

Vor einer Besprechung steht Ihre App Benutzern auf einer Registerkarte zur Verfügung. Das folgende Beispiel zeigt einen Entwurf einer Umfragefrage, die während der Besprechung beantwortet wird.

Beispiel zeigt, wie Sie Inhalte in den Besprechungsdetails vor einem Anruf appieren.

Anatomie: Besprechungsregisterkarte (vor und nach Besprechungen)

Beispiel zeigt die strukturelle Anatomie einer Besprechungsregisterkarte vor und nach einer Besprechung.

Leistungsindikator Beschreibung
1 Registerkartenname:Navigationsbezeichnung für Ihre Registerkarte.
2 Registerkartenüberlauf: Öffnet Registerkartenaktionen, z. B. Umbenennen und Entfernen.
3 iframe: Zeigt Ihre App-Inhalte an.

Entwerfen mit Benutzeroberflächenvorlagen

Verwenden Sie eine der folgenden Teams Ui-Vorlagen, um die Besprechungsregisterkarte zu entwerfen:

  • Liste: Listen können verwandte Elemente in einem übersichtlichen Format anzeigen und Benutzern ermöglichen, Aktionen für eine gesamte Liste oder einzelne Elemente auszuführen.
  • Task Board: Ein Task Board, manchmal auch als „Kanban-Board“ oder „Organisationsprozessdarstellungen“ bezeichnet, ist eine Sammlung von Karten, die häufig verwendet werden, um den Status von Arbeitselementen oder Tickets nachzuverfolgen.
  • Dashboard: Ein Dashboard ist ein Zeichenbereich mit mehreren Karten, die eine Übersicht über Daten oder Inhalte bieten.
  • Formular: Formulare dienen zum strukturierten Sammeln, Überprüfen und Übermitteln von Benutzereingaben.
  • Leerer Zustand: Die leere Statusvorlage kann für viele Szenarien verwendet werden, einschließlich der Anmeldung, der ersten Ausführung, der Fehlermeldungen und vieles mehr.
  • Linke Navigation: Die linke Navigationskomponente kann hilfreich sein, wenn ihre Registerkarte eine Navigation erfordert. Im Allgemeinen sollten Sie die Navigation auf ein Minimum beschränken.

Verwenden einer Besprechungsregisterkarte

Die Registerkarte "Besprechungsinterne Besprechung" ist ein Zeichenbereich zum Erweitern der Zusammenarbeit während Besprechungen. Teilnehmer können App-Inhalte in einem dedizierten Bereich außerhalb der Besprechungsphase über freigegebene oder rollenbasierte Ansichten anzeigen und mit ihnen interagieren.

Anwendungsfälle

Personen können die Registerkarte "Besprechungsinterne Besprechung" für Folgendes verwenden:

  • Geben Sie ausführliches Feedback. Bewerten Sie beispielsweise einen Stellenkandidaten.
  • Erstellen Sie eine Umfrage, eine Umfrage oder ein Aufgabenelement für die Besprechungsteilnehmer.
  • Zeigt notizen an, die für die Besprechung relevant sind. Beispielsweise Informationen zu einem Vertriebsleiter.

Mobilgeräte

Beispiel zeigt, wie Sie Umfrageinhalte auf einer Besprechungsregisterkarte auf mobilen Geräten anzeigen können.

Desktop

Beispiel zeigt, wie Sie Abfrageinhalte auf einer Besprechungsregisterkarte darstellen können.

Anatomie: Registerkarte "In-Meeting"

Beispiel zeigt die strukturelle Anatomie einer Besprechungsregisterkarte.

Leistungsindikator Beschreibung
1 App-Symbol (ausgewählt): 16 Pixel transparentes App-Logo.
2 App-Name
3 Header: Enthält ihren App-Namen.
4 Schaltfläche "Schließen": Schließt die Registerkarte. Verwenden Sie immer das Symbol zum Schließen oben rechts anstelle einer Aktion in der Fußzeile.
5 Benachrichtigungsleiste: Fehlerwarnungen werden direkt unterhalb der Kopfzeile angezeigt, und der iframe-Inhalt wird um 20 Pixel nach unten verschoben.
6 iframe: Zeigt Ihre App-Inhalte an.

Abstand

Optimieren Sie Ihre Besprechungsregisterkarte so, dass sie in den 280 Pixel breiten iFramebereich passt. Es gibt 20 Pixel Abstand auf der linken und rechten Seite des iframe und zwischen der Registerkartenkopfzeile. Der iframe ist vollständig beschnitten bis zum unteren Rand der Registerkarte.

Beispiel zeigt die Größe des Tababstands in besprechungsinternen Besprechungen.

Scrollen

Beachten Sie Folgendes, wenn Sie den Bildlauf zulassen:

  • Inhalte im iframe-Inhalt sollten nur vertikal scrollen.
  • Benutzer sollten nur den Inhalt sehen, zu dem sie einen Bildlauf durchgeführt haben (nichts über oder darunter).
  • Die Bildlaufleiste ist Teil des iframe-Inhalts.

Beispiel zeigt, wie die Besprechungsregisterkarte scrollt.

Für Szenarien mit Navigationsebenen oder umfangreichen Inhalten wird empfohlen, Dass Benutzer zu einer sekundären Ebene navigieren können. Benutzer müssen in der Lage sein, zur vorherigen Ebene zurückzukehren.

Beispiel zeigt die Navigation in Besprechungen.

Verwenden eines Besprechungsdialogfelds

Dialogfelder in Besprechungen werden auf der Teams Besprechungsphase angezeigt. Sie erfordern die Aufmerksamkeit, Bestätigung oder Interaktion eines Benutzers, sind aber dezent und unterbrechen die Besprechung nicht. Sie sollten diese sparsam und für Szenarien verwenden, die leicht und aufgabenorientiert sind.

Anwendungsfälle

In-Meeting-Dialogfelder werden von einem Benutzer (z. B. dem Besprechungsorganisator) ausgelöst, der Teilnehmer möglicherweise folgendes wünschen:

  • Geben Sie kurzes Feedback
  • Nehmen Sie an einer kurzen Umfrage oder Umfrage teil
  • Übermitteln von Genehmigungen
  • Abrufen von Erinnerungen

Mobilgeräte

Beispiel zeigt, wie Sie ein Besprechungsdialogfeld auf mobilgeräten verwenden können.

Desktop

Beispiel zeigt, wie Sie ein Besprechungsdialogfeld verwenden können.

Anatomie: Besprechungsdialogfeld

Beispiel zeigt die strukturelle Anatomie eines Besprechungsdialogfelds.

Leistungsindikator Beschreibung
1 Kopfzeile: Enthält das App-Symbol, den Namen, die Aktionszeichenfolge und das Schließen-Symbol.
2 iframe: Zeigt Ihre App-Inhalte an.

Anatomie: Kopfzeile des Besprechungsdialogfelds

Beispiel zeigt die strukturelle Anatomie einer Besprechungsdialogkopfzeile.

Es gibt zwei Kopfzeilenvarianten. Verwenden Sie nach Möglichkeit die Variante mit dem Avatar, um zu bestätigen, dass das Dialogfeld von einer Person stammt.

Leistungsindikator Beschreibung
1 Avatar: Person, die das Besprechungsdialogfeld initiiert.
2 App-Symbol
3 App-Name
4 Schaltfläche "Schließen": Schließt das Dialogfeld.
5 Aktionszeichenfolge: Beschreibt in der Regel, wer das Dialogfeld initiiert hat.

Reaktionsfähiges Verhalten: Dialogfelder in Besprechungen

Dialogfelder in Besprechungen können je nach Größe variieren, um unterschiedliche Szenarien zu berücksichtigen. Achten Sie darauf, die Auffüllung und Komponentengrößen beizubehalten.

  • Breite: Sie können die Breite des iframe des Dialogfelds an einer beliebigen Stelle innerhalb des unterstützten Größenbereichs angeben.
  • Höhe: Sie können die Höhe des iFrames des Dialogfelds an einer beliebigen Stelle innerhalb des unterstützten Größenbereichs angeben. Sie können Benutzern auch den vertikalen Bildlauf ermöglichen, wenn Der App-Inhalt die maximale Höhe überschreitet.

Geben Sie zum Implementieren die Breite und Höhe mithilfe des externalResourceUrl Schlüssels an.

Beispiel zeigt das Dialogfeld "In-Meeting". Breite: Min.-280 Pixel (248 Pixel iframe). Max-460 Pixel (428 Pixel iframe). Höhe: 300 Pixel (iframe).

Verwenden der freigegebenen Besprechungsphase

Die freigegebene Besprechungsphase hilft Besprechungsteilnehmern bei der Interaktion und Zusammenarbeit mit App-Inhalten in Echtzeit. Die Benutzer können sich beispielsweise auf die Bearbeitung eines Dokuments, brainstorming mit einem Whiteboard oder das Überprüfen eines Dashboards konzentrieren.

Für die Besprechungsphase freigegebene Apps belegen den gleichen Platz wie ein freigegebener Bildschirm. Die Phase wird für alle Besprechungsteilnehmer neu ausgerichtet.

Hinweis

Alle Benutzer in der Besprechung können die App sehen, wenn sie vom Desktop freigegeben werden. Derzeit können mobile Benutzer App-Inhalte nicht für die Besprechungsphase freigeben.

Anwendungsfälle

In der gemeinsamen Besprechungsphase geht es um Zusammenarbeit und Teilnahme. Hier sind einige Beispielszenarien, die Ihnen bei den ersten Schritten helfen.

Bearbeiten und Überprüfen: Befassen Sie sich mit Dashboards und planen Sie mit allen Personen in der Besprechung.

Beispiel zeigt ein Dashboard, das in der freigegebenen Besprechungsphase überprüft wird.

Whiteboard: Zeichnen und Zusammenstellen auf einer freigegebenen Canvas.

Beispiel zeigt ein Whiteboard in der freigegebenen Besprechungsphase.

Quiz: Testen Sie Wissen und gewinnen Sie Einblicke mit interaktiven Materialien.

Beispiel zeigt ein Quiz in der phase der freigegebenen Besprechung.

Anatomie: Gemeinsame Besprechungsphase

Die Abbildung zeigt die Design-Anatomie der freigegebenen Besprechungsphase.

Leistungsindikator Beschreibung
1 App-Symbol: Das hervorgehobene Symbol gibt an, dass die Registerkarte "In-Meeting" der App geöffnet ist.
2 Schaltfläche "Für Besprechungsphase freigeben": Der Einstiegspunkt, an dem die App für die Besprechungsphase freigegeben werden soll. Zeigt an, ob Sie Ihre App für die Verwendung der freigegebenen Besprechungsphase konfigurieren.
3 iframe: Zeigt Ihre App-Inhalte an.
4 Schaltfläche "Freigabe beenden": Beendet die Freigabe der App für die Besprechungsphase. Zeigt nur für den Teilnehmer an, der die Freigabe gestartet hat.
5 Zuschreibung des Referenten: Zeigt den Namen des Teilnehmers an, der die App freigegeben hat.

Reaktionsfähiges Verhalten: Freigegebene Besprechungsphase

Apps, die für die Besprechungsphase freigegeben wurden, variieren je nach Größe des Besprechungsstatus und der Größe des Fensters durch den Benutzer. Verwalten Sie den Abstand und das dynamische Layout von Navigation und Steuerelementen genau wie in einem Browser.

  • Seitenbereich: Ein Benutzer kann den Seitenbereich jederzeit während einer Besprechung öffnen lassen, um zu chatten, die Teilnehmerliste anzuzeigen oder eine App zu verwenden (z. B. die Registerkarte "In-Meeting"). Die Phase wird dynamisch neu angeordnet, wenn das Panel geöffnet ist.
  • Video- und Audioraster: Das Video- und Audioraster ist immer sichtbar, um Besprechungsteilnehmer anzuzeigen. Wenn ein Benutzer eine Person in der Besprechung ins Blickfeld rückt oder anheftet, erhöht dies die Höhe oder Breite des Teilnehmerrasters je nach Ausrichtung.

Besprechungsphase (ohne Seitenbereich)

Wenn der Seitenbereich nicht geöffnet ist, beträgt die Besprechungsphase standardmäßig 994 x 678 Pixel und kann mindestens 792 x 382 Pixel betragen.

Abbildung der Reaktionsfähigkeit der freigegebenen Besprechungsphase mit geschlossener Seitenleiste.

Besprechungsphase (mit Seitenbereich)

Wenn der Seitenbereich geöffnet ist, beträgt die Besprechungsphase standardmäßig 918 x 540 Pixel und kann mindestens 472 x 382 Pixel betragen.

Abbildung der Reaktionsfähigkeit der freigegebenen Besprechungsphase mit geöffneter Seitenleiste.

Nach einer Besprechung

Sie können zu einer Besprechung zurückkehren, nachdem sie beendet wurde, und App-Inhalte anzeigen. In diesem Beispiel kann sich der Besprechungsorganisator die Umfrageergebnisse auf der Registerkarte "Contoso" ansehen. (Hinweis: Aus Entwurfssicht gibt es keinen Unterschied zwischen der Registerkarte "Vor" und "Nach der Besprechung".)

Die Beispieldarstellung zeigt eine Registerkarte nach der Besprechung.

Bewährte Methoden

Verwenden Sie diese Empfehlungen, um eine hochwertige App-Erfahrung zu erstellen.

Interaktionen

Beispiel, in dem gezeigt wird, wie die Anzahl der Interaktionen begrenzt wird.

Do: Beschränken der Anzahl von Interaktionen

Entfernen Sie für Besprechungsdialogfelder unnötige Inhalte, die Benutzern nicht helfen, schnell etwas zu erreichen.

Beispiel, in dem gezeigt wird, wie keine unnötigen Elemente eingeführt werden.

Nicht empfohlen: Einführen unnötiger Elemente

Ein einzelnes Besprechungsdialogfeld mit mehreren Interaktionen kann von der Besprechung ablenken.

Beispiel für das Erstellen einer fokussierten Umgebung.

Do: Erstellen einer fokussierten Umgebung

Es wird empfohlen, die App-Erfahrung nur auf die Besprechungsphase zu beschränken. Sie können eine Besprechungsregisterkarte im Seitenbereich als sekundäre, private Ansicht für bestimmte Szenarien verwenden.

Beispiel, in dem gezeigt wird, wie sie während Besprechungen keine konkurrierten Oberflächen einschließen.

Nicht empfohlen: Einschließen von Oberflächen im Wettbewerb

Ihre App sollte die Benutzer nur auffordern, sich auf eine einzelne Oberfläche zu konzentrieren, unabhängig davon, ob sie auf der Stufe zusammenarbeitet oder auf ein Besprechungsdialogfeld reagiert. (Hinweis: Dialogfelder, die von anderen Apps ausgelöst werden, können nicht beibehalten werden, während Sich Ihre App auf der Stufe befindet.)

Layout

Beispiel für die Verwendung eines einspaltigen Dialogfeldlayouts.

Do: Verwenden eines einspaltigen Dialogfelds

Da die Dialogfelder im Mittelpunkt der Besprechungsphase stehen, sollte der Aufgabenabschluss schnell und einfach sein, um Benutzerfrustration zu vermeiden.

Beispiel, das zeigt, dass Sie den Raum einer Besprechungserweiterung nicht überladen sollten.

Don't: Clutter the space

Dichte oder übermäßig strukturierte Inhalte können ablenkend und überwältigend sein, insbesondere während einer Besprechung.

Beispiel für ein einspaltiges Registerkartenlayout.

Do: Verwenden einer einspaltigen Registerkarte

Angesichts der schmalen Natur der Besprechungsregisterkarte wird dringend empfohlen, den Inhalt in einer einzelnen Spalte anzuzeigen.

Beispiel für eine Registerkarte mit mehreren Spalten.

Don't: Use multiple columns

Aufgrund des begrenzten Platzes der Besprechungsregisterkarte werden Layouts mit mehr als einer Spalte nicht empfohlen.

Steuerelemente

Beispiel, das zeigt, wie primäre Steuerelemente rechts ausgerichtet werden.

Do: Rechtsgündige Ausrichtung der primären Aktion

Wir empfehlen, die visuell schwerste Aktion am rechten Ort zu positionieren.

Beispiel, das zeigt, wie Sie primäre Steuerelemente nicht linksbündig ausrichten sollten.

Nicht empfohlen: Aktionen links oder zentr werden ausgerichtet

Dies weicht vom standard Teams Muster für die Platzierung von Steuerelementen in einem Dialogfeld ab und kann mit einem Dialogfeld hinter dem oberen Dialogfeld in Konflikt geraten.

Scrollen

Beispiel für den vertikalen Bildlauf auf einer Besprechungsregisterkarte.

Beispiel für den vertikalen Bildlauf in der freigegebenen Besprechungsphase.

Do: Vertikaler Bildlauf

Benutzer erwarten einen vertikalen Bildlauf in Teams (und an anderer Stelle). Dies gilt möglicherweise nicht, wenn Sie über eine kreative Canvas verfügen, z. B. ein Whiteboard, das Benutzer über die X- und Y-Achse schwenken können.

Beispiel für einen horizontalen Bildlauf auf einer Besprechungsregisterkarte.

Beispiel für den horizontalen Bildlauf in der freigegebenen Besprechungsphase.

Nicht ausführen: Horizontaler Bildlauf

Horizontaler Bildlauf ist kein erwartetes Verhalten in Teams (einschließlich der Besprechungsumgebung).

Workflows

Beispiel für ein komplexes Szenario auf einer Besprechungsregisterkarte.

Do: Surface complex scenarios in the in-meeting tab

Wenn Ihre App mehrere Aufgaben enthält, wird dringend empfohlen, eine Besprechungsregisterkarte mit einem einspaltigen Layout zu verwenden.

Beispiel für komplexe Szenarien in einem Besprechungsdialogfeld.

Nicht empfohlen: In-Meeting-Dialogfelder komplex gestalten

Besprechungsdialogfelder sind für kurze Interaktionen vorgesehen.

Design

Beispiel für eine Besprechungserweiterung mit dem dunklen Design.

Ein weiteres Beispiel für die Besprechungserweiterung mit dem dunklen Design.

Do: Fokus auf dunklem Design

Teams Besprechungen sind für dunkles Design optimiert, um visuelles und kognitives Rauschen zu reduzieren, damit sich Benutzer auf die Diskussion und die freigegebenen Inhalte konzentrieren können. Beachten Sie, dass bestimmte Arten von Apps (z. B. Whiteboarding und Dokumentbearbeitung) keinen dunklen Zeichenbereich benötigen.

Beispiel für eine Besprechungserweiterung mit Farben, die nicht mit dem Besprechungsdesign übereinstimmen.

Ein weiteres Beispiel für eine Besprechungserweiterung mit Farben, die nicht mit dem Besprechungsdesign übereinstimmen.

Don't: Verwenden Sie unbekannte Farben

Farben, die mit der Besprechungsumgebung in Konflikt stehen, können ablenkend sein und für Teams weniger nativ erscheinen. Erfahren Sie mehr über die Teams Farbhierarchie,einschließlich Anrufdesign-Neutralen.

Beispiel für eine Besprechungserweiterung mit einer Schaltfläche "Zurück".

Do: Have a Back button

Wenn Sie auf einer Besprechungsregisterkarte mehr als eine Navigationsebene haben, müssen Benutzer in der Lage sein, zu ihren vorherigen Ansichten zurückzukehren.

Beispiel für eine Besprechungserweiterung mit zwei Schaltflächen zum Schließen.

Don't: Include another dismiss button

Das Bereitstellen einer Option zum Schließen von Besprechungsregisterkarteninhalten kann zu Problemen führen, da bereits eine Schaltfläche in der Kopfzeile vorhanden ist, um die Registerkarte in der Besprechung selbst zu schließen.

Beispiel für modale Elemente (oder Aufgabenmodule) innerhalb einer Besprechungsregisterkarte.

Vorsicht: Vermeiden Sie modale Elemente auf der Registerkarte "Besprechung".

Modale Elemente (auch als Aufgabenmodule bezeichnet) auf der bereits schmalen Besprechungsregisterkarte können den Inhalt umschließen und verdecken.

Dynamisches Verhalten

Beispiel, das zeigt, wie die Größe einer Besprechungserweiterung ordnungsgemäß angepasst wird.

Gehen Sie vor: Anpassen der Größe und dynamisches Skalieren Ihrer App

App-Inhalte sollten in kleineren Fenstern dynamisch angepasst und verkleinert werden. Halten Sie die Hauptnavigation Ihrer App und alle unverankerten Steuerelemente sichtbar.

Beispiel, das zeigt, wie die Größe einer Besprechungserweiterung nicht ordnungsgemäß angepasst wird.

Nicht empfohlen: Zuschneiden oder Beschneiden der primären UI-Komponenten

Die unverankerte Navigation und Steuerelemente außerhalb des Bildschirms und die Notwendigkeit, einen Bildlauf zu finden, können für Benutzer verwirrend sein. Ihre App-Inhalte sollten nicht horizontal scrollen, wenn sie nicht in den iframe passen können.

Nächster Schritt