Entwerfen Ihrer Microsoft Teams-Nachrichtenerweiterung

Nachrichtenerweiterungen sind Abkürzungen zum Einfügen von App-Inhalten oder zum Bearbeiten einer Nachricht, ohne die Konversation verlassen zu müssen. Die folgenden Informationen beschreiben und veranschaulichen, wie Personen in Teams Nachrichtenerweiterungen hinzufügen, verwenden und verwalten können, und dienen als Leitfaden für Ihr App-Design.

Microsoft Teams-Benutzeroberflächenbausatz

Umfassende Richtlinien für das Design von Nachrichtenerweiterungen, einschließlich Elementen, die Sie bei Bedarf übernehmen und ändern können, finden Sie im Microsoft Teams UI-Kit.

Hinzufügen einer Nachrichtenerweiterung

Sie können eine Nachrichtenerweiterung in den folgenden Teams-Kontexten hinzufügen:

  • Aus dem Microsoft Teams Store.
  • In einem Kanal, Chat oder einer Besprechung (vor, während und nachher) in der Nähe des "Verfassen"-Felds. Beachten Sie, wenn Sie eine Nachrichtenerweiterung an einer dieser Stellen hinzufügen, können nur Sie sie in diesem Kontext verwenden.

Die folgenden Beispiele zeigen, wie Sie eine Nachrichtenerweiterung in einem Kanal hinzufügen.

Mobilgeräte

Das Beispiel zeigt, wie Sie eine Nachrichtenerweiterung in der Nähe des Felds „Verfassen“ in einem Kanal auf Mobilgeräten hinzufügen.

Desktop

Das Beispiel zeigt, wie Sie eine Nachrichtenerweiterung in der Nähe des Felds „Verfassen“ in einem Kanal hinzufügen.

Einrichten einer Nachrichtenerweiterung

Eine Authentifizierung ist nicht zwingend erforderlich, aber wenn es sich bei Ihrer Anwendung um ein Tool zur Nachverfolgung von Tickets handelt, müssen sich die Benutzer möglicherweise anmelden, um die Nachrichtenerweiterung nutzen zu können.

Aus Gründen der Konsistenz zwischen Teams-Apps können Sie den Anmeldebildschirm nicht anpassen. Wenn Sie die Authentifizierung mit einmaligem Anmelden (Single Sign-On, SSO) verwenden, werden Benutzer automatisch angemeldet.

Mobil

Das Beispiel zeigt den Einrichtungsbildschirm der Nachrichtenerweiterung mit einer Anmeldeschaltfläche auf dem Handy.

Desktop

Das Beispiel zeigt den Einrichtungsbildschirm für Nachrichtenerweiterungen mit einer Anmeldeschaltfläche.

Arten von Nachrichtenerweiterungen

Nachrichtenerweiterungen können Suchbefehle, Aktionsbefehle oder beides beeinhalten. Ihre Befehle hängen von den Features Ihrer App ab und davon, wie diese in Teams-Anwendungsfälle passen.

Suchbefehle

Mit Suchbefehlen können Personen Ihre Nachrichtenerweiterung nutzen, um schnell externe Inhalte zu finden und in eine Nachricht einzufügen. Suchbefehle werden häufig im "Verfassen"-Feld zur Verfügung gestellt. Sie können z. B. eine Diskussion beginnen oder etwas zu einer Diskussion hinzufügen, indem Sie einen Teil des Inhalts teilen – ohne Teams verlassen zu müssen.

Mobil

Das Beispiel zeigt eine suchbasierte Nachrichtenerweiterung, die über das Erstellungsfeld auf dem Handy gestartet wird.

Desktop

Das Beispiel zeigt eine suchbasierte Nachrichtenerweiterung, die über das Erstellungsfeld gestartet wird.

Layoutoptionen für das "Verfassen"-Feld

Sie haben einige Optionen für die Anzeige der Suchergebnisse von Nachrichtenerweiterungen, darunter Listen- und Gitteransichten.

Illustrationen mit Layoutoptionen für Suchergebnisse der Nachrichtenerweiterung.

Aktionsbefehle

Aktionsbefehle ermöglichen es Personen, Aktionen auszulösen und Anforderungen in externen Diensten in Teams zu verarbeiten. Wenn Ihre App beispielsweise Bestellungen nachverfolgt, kann ein Benutzer eine neue Bestellung erstellen, indem er den Inhalt der Nachricht eines Kollegen direkt in seinem Chat verwendet.

Bei aktionsbasierten Nachrichtenerweiterungen müssen Benutzer häufig ein Formular oder eine andere Art von Konfiguration innerhalb eines Modals ausfüllen. Sie können diese Erfahrungen mit Dialogen (in TeamsJS v1.x als Aufgabenmodule bezeichnet) erstellen.

Öffnen einer Nachrichtenerweiterung

Das Feld „Verfassen“ und Nachrichten oder Beiträge sind die primären Kontexte, in denen Personen Nachrichtenerweiterungen verwenden.

Über das "Verfassen"-Feld

Nach dem Hinzufügen können Benutzer Ihre Nachrichtenerweiterung öffnen, indem sie ihr App-Symbol unter dem Feld „Verfassen“ auswählen. In diesen Beispielen verfügt die Erweiterung über Such- und Aktionsbefehle.

Mobil

Das Beispiel zeigt, wie Sie eine Nachrichtenerweiterung über das Feld „Verfassen“ auf Mobilgeräten öffnen.

Desktop

Das Beispiel zeigt, wie eine Nachrichtenerweiterung über das Feld „Verfassen“ geöffnet wird.

Aus einer Chatnachricht oder einem Kanalbeitrag

Nach dem Hinzufügen können Benutzer das Symbol Mehr in der Chatnachricht oder dem Kanalbeitrag auswählen, um die Aktionsbefehle Ihrer Erweiterung zu finden. Ihre Erweiterung wird möglicherweise basierend auf der Nutzung unter Weitere Aktionen aufgeführt.

Chatnachricht

Das Beispiel zeigt, wie eine Nachrichtenerweiterung aus einer Chatnachricht geöffnet wird.

Kanalbeitrag

Das Beispiel zeigt, wie Sie eine Nachrichtenerweiterung über einen Kanalbeitrag auf mobilen Geräten öffnen.

Verwenden einer Nachrichtenerweiterung

In den folgenden Szenarien werden die wichtigsten Verwendungsmöglichkeiten von Nachrichtenerweiterungen veranschaulicht.

Einfügen von Inhalt in eine Nachricht

1. Wählen Sie eine Nachrichtenerweiterungaus. Benutzer können über das "Verfassen"-Feld nach dem Inhalt suchen, den sie freigeben möchten.

Mobil

Das Beispiel zeigt einen Benutzer, der auf einem Mobilgerät über das

Desktop

Das Beispiel zeigt einen Benutzer, der nach Inhalten sucht, die aus dem

2. Inhalt einfügen. Nach der Veröffentlichung können andere Personen auf den Inhalt antworten oder diesen auswählen, um weitere Informationen in Ihrer App anzuzeigen.

Mobil

Das Beispiel zeigt, wie ein Benutzer auf einem Mobilgerät Inhalte in einer Kanalunterhaltung postet.

Desktop

Das Beispiel zeigt, wie ein Benutzer Inhalte in einer Kanalunterhaltung postet.

Aktionen für eine Nachricht ausführen

1. Wählen Sie eine Nachrichtenerweiterungaus. Ihre App kann einen oder mehrere Aktionsbefehle enthalten.

Das Beispiel zeigt, wie ein Benutzer einen Aktionsbefehl für die Nachrichtenerweiterung auswählt.

2. Führen Sie die Aktion aus. Ihre App kann alle Inhalte oder Daten empfangen und verarbeiten, die von der Nachrichtenaktion gesendet werden. Benutzer führen die Aktion in Ihrer App aus, während sie in ihrer Unterhaltung bleiben.

Beispiel für das Ausführen von Aktionen für eine Nachricht.

Mit Nachrichtenerweiterungen können Sie auch Rich-Links von einer erkannten URL in eine Nachricht einfügen (diese Funktion wird als Linkentfaltung bezeichnet).

1. Fügen Sie einen erkannten Link in das "Verfassen"-Feld ein.

Mobil

Das Beispiel zeigt, wie ein Benutzer auf einem Mobilgerät einen Link in das

Desktop

Das Beispiel zeigt, wie ein Benutzer einen Link in das

2. Inhalt einfügen. Wenn Ihre App die URL im "Verfassen"-Feld erkennt, rendert sie den Link als Karte, die eine inhaltsreiche Vorschau des Webinhalts bereitstellt. (Weitere Informationen finden Sie unter Entwurfsrichtlinien für Adaptive Karten.)

Mobil

Das Beispiel zeigt, wie die URL auf einem Mobilgerät umfangreiche Inhalte in das

Desktop

Das Beispiel zeigt, wie die URL umfangreiche Inhalte in das

Verwalten einer Nachrichtenerweiterung

Wenn sie mit der rechten Maustaste auf Ihr Symbol klicken, können Benutzer Ihre Nachrichtenerweiterung anheften, entfernen oder konfigurieren.

Anatomie

Nachrichtenerweiterung im Feld „Verfassen“

Die folgenden Beispiele zeigen eine Nachrichtenerweiterung, die über das Feld „Verfassen“ geöffnet wurde.

Mobilgeräte

Illustration der UI-Anatomie einer Nachrichtenerweiterung im Erstellungsfeld auf einem Mobilgerät.

Leistungsindikator Beschreibung
1 App-Name: Vollständiger Name Ihrer App.
2 Menüsymbol für Aktionsbefehle (optional): Öffnet eine Liste von Aktionsbefehlen für Ihre Nachrichtenerweiterung (sofern vorhanden).
3 Suchfeld: Ermöglicht Benutzern das Suchen von App-Inhalten, die sie einfügen möchten.
4 Registerkartenmenü (optional): Stellt mehrere Inhaltskategorien bereit.
5 Menü "Aktionsbefehle" (optional): Zeigt die Liste der Aktionsbefehle an (sofern angegeben).
6 App-Inhalt: Hauptsächlich zum Anzeigen von Suchergebnissen.

Desktop

Abbildung, die die UI-Anatomie einer Nachrichtenerweiterung im Feld „Verfassen“ zeigt.

Leistungsindikator Beschreibung
1 App-Logo: Farbsymbol Ihres App-Logos.
2 App-Name: Vollständiger Name Ihrer App.
3 Menüsymbol für Aktionsbefehle (optional): Öffnet eine Liste von Aktionsbefehlen für Ihre Nachrichtenerweiterung (sofern vorhanden).
4 Suchfeld: Ermöglicht Benutzern das Suchen von App-Inhalten, die sie einfügen möchten.
5 Registerkartenmenü (optional): Stellt mehrere Inhaltskategorien bereit.
6 Menü "Aktionsbefehle" (optional): Zeigt die Liste der Aktionsbefehle an (sofern angegeben).
7 App-Inhalt: Hauptsächlich zum Anzeigen von Suchergebnissen. Im folgenden Beispiel wird das Listenlayout verwendet (Rasterlayout ist eine weitere Option).
8 App-Logo: Gliederungssymbol Ihres App-Logos.

Menü „Verwalten von Nachrichtenerweiterungen“

Abbildung der UI-Struktur eines Menüs für die Verwaltung von Nachrichtenerweiterungen.

Leistungsindikator Beschreibung
1 Lösen sie: Verfügbar, wenn der Benutzer Ihre App angeheftet hat.
2 Entfernen: Entfernt die Nachrichtenerweiterung aus dem Kanal, Chat oder der Besprechung.

Bewährte Methoden

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

Setup und allgemeine Nutzung

Beispiel für Einrichtung und allgemeine Verwendung.

Was Sie tun sollten: Integration mit einmaligem Anmelden

Einmaliges Anmelden vereinfacht, beschleunigt und schützt den Anmeldevorgang. Wenn sich ein Benutzer bereits bei Ihrer persönlichen App angemeldet hat, muss er sich auch nicht erneut anmelden, um auf die Nachrichtenerweiterung zuzugreifen.

Beispiel für die Integration mit einmaligem Anmelden.

Was Sie nicht tun sollten: Benutzer aus der Unterhaltung entfernen

Nachrichtenerweiterungen sind Abkürzungen, die den Kontextwechsel reduzieren sollen. Ihre Erweiterung sollte Benutzer beispielsweise nicht zu einer Webseite außerhalb von Teams weiterleiten.

Do: Nachrichtenerweiterung hervorheben

Nachrichtenerweiterungen sind nicht immer leicht zu finden. Fügen Sie Screenshots zur Verwendungsweise auf der Detailseite Ihrer App ein. Wenn Ihre Anwendung auch einen Bot enthält, können Sie die Hilfedokumentation zur Nachrichtenerweiterung in eine Bot-Begrüßungstour einbinden.

Vorlagen

Beispiel für Vorlagen.

Was Sie tun sollten: Lassen Sie Teams nach Möglichkeit einen Teil der Entwurfsarbeit erledigen

Wenn es für Ihre Anwendungsfälle sinnvoll ist, sollten Sie eine suchbasierte Nachrichtenerweiterung erstellen. Teams rendert diese Arten von Erweiterungen mit integriertem Design und Barrierefreiheit.

Beispiel für die Verarbeitung von Entwurfsarbeiten.

Nicht: Einbetten der gesamten App in ein Dialogfeld

Wenn Ihre Nachrichtenerweiterung Aktionsbefehle erfordert, halten Sie das Dialogfeld einfach, und zeigen Sie nur die Komponenten an, die zum Abschließen der Aktion erforderlich sind.

Design

Beispiel für Design.

Was Sie tun sollten: Teams-Farbtoken nutzen

Jedes Teams-Design verfügt über ein eigenes Farbschema. Um Designänderungen automatisch zu verarbeiten, verwenden Sie Farbtoken (Fluent UI) in Ihrem Entwurf.

Beispiel für Farbtoken.

Was Sie nicht tun sollten: Hartcodieren von Farbwerten

Wenn Sie keine Teams-Farbtoken verwenden, sind Ihre Designs weniger skalierbar und benötigen mehr Zeit für die Verwaltung.

Aktionen

Beispiel für Aktionen.

Was Sie tun sollten: Aktionsbefehle einschließen, die im Kontext sinnvoll sind

Nachrichtenaktionen sollten sich auf das beziehen, was ein Benutzer sieht. Geben Sie Benutzern beispielsweise eine Verknüpfung zum Erstellen eines Problems oder Arbeitselements mithilfe des Texts in einem Beitrag einer Person an.

Beispiel für Aktionsbefehle.

Was Sie nicht tun sollten: Aktionsbefehle einschließen, die nicht kontextbezogen sind

Eine Nachrichtenaktion zum Anzeigen Ihres Dashboards scheint wahrscheinlich von den meisten Unterhaltungen getrennt zu sein.

Suchvorgänge

Was Sie tun sollten: Suchergebnisse während der Eingabe anzeigen

Geben Sie vorgeschlagene Suchergebnisse an, während Benutzer Text eingeben. Möglicherweise finden sie so den benötigten Inhalt schneller mit einer minimalen Anzahl von Zeichen.

Was Sie nicht tun sollten: Benutzer müssen eine Abfrage übermitteln

Sie können festlegen, dass Benutzer eine Taste drücken oder eine Schaltfläche auswählen, um Abfragen an Ihre App zu senden. Obwohl dies für Ihren App-Services-Dienst einfacher sein kann, sind Benutzer möglicherweise verwirrt, dass sie während der Texteingabe keine Echtzeitsuchergebnisse sehen.

Was Sie tun sollten: Erwägen Sie Nullausdrucksabfragen

Bevor ein Benutzer beispielsweise etwas in das Suchfeld schreibt, zeigen Sie an, was er zuletzt in Ihrer App angesehen hat. Es ist möglich, dass sie diesen Inhalt in ihre Unterhaltung einfügen möchten.