Entwerfen von Aufgabenmodulen für Ihre Microsoft Teams-App

Sie können modale Popup-Erfahrungen in Ihrer Teams-App mit Aufgabenmodulen erstellen. Verwenden Sie diese Funktion, um Rich-Media und Informationen anzuzeigen, oder eine komplexe Aufgabe abzuschließen.

Beispiel zeigt ein Aufgabenmodul an.

Microsoft Teams-Benutzeroberflächenbausatz

Umfassendere Anleitungen für das Aufgabenmoduldesign, einschließlich Elemente, die Sie nach Bedarf abrufen und ändern können, finden Sie im Microsoft Teams-Benutzeroberflächenbausatz.

Öffnen eines Aufgabenmoduls

Aufgabenmodule können von fast überall in Ihrer App gestartet werden.

  • Registerkarte: Ein Aufgabenmodul kann über einen beliebigen Link innerhalb einer Registerkarte gestartet werden. Verwenden Sie dies in Szenarien, in denen sich der Benutzer auf eine Interaktion konzentrieren soll.
  • Bot: Ein Aufgabenmodul kann über einen Link innerhalb einer Botnachricht gestartet werden.
  • Adaptive Karte: Ein Aufgabenmodul kann über eine adaptive Karte gestartet werden (gesendet mit einer Messaging-Erweiterung oder von einem Bot), wenn ein Benutzer eine Schaltfläche auswählt.
  • Messaging-Erweiterung (Aktionsbefehle): Messaging-Erweiterungen ermöglichen es Ihnen, eine bestimmte Aktion für Nachrichteninhalte auszuführen. Wenn Sie eine Aktion auswählen, wird ein Aufgabenmodul geöffnet.
  • Messaging-Erweiterung (Feldkontext verfassen): Im Feld „verfassen“ können Sie eine Messaging-Erweiterung entwerfen, um ein Aufgabenmodul zu öffnen anstelle des typischen Flyout. Reservieren Sie Aufgabenmodule für komplexe Interaktionen, z. B. das Ausfüllen eines Formulars.

Anatomie

Aufgabenmodule bieten eine flexible Oberfläche für gehostete App-Erfahrungen. Sie werden mithilfe eines iFrame (Desktop) oder einer WebView (Mobilgerät) erstellt, sodass Sie Aufgabenmodule mit unseren Benutzeroberflächenvorlagen (empfohlen) oder von Grund auf neu entwerfen können.

Sie können auch mit dem Framework für Adaptive Karten erstellt werden. Dies kann eine einfachere und schnellere Möglichkeit sein, häufige Szenarien (z. B. Formulare) zu vereinfachen.

Mobilgeräte

Abbildung zeigt die Benutzeroberflächenanatomie eines Aufgabenmoduls auf Mobilgeräten.

Leistungsindikator Beschreibung
1 Kopfzeile: Erstellen Sie Ihre Kopfzeilen klar und präzise. Beschreiben Sie die Aufgabe, die Benutzer ausführen sollen.
2 App-Name: Vollständiger Name Ihrer App.
3 Schaltfläche „Schließen“: Schließt das Aufgabenmodul. Wendet keine ungespeicherten Änderungen in App-Inhalten an.
4 WebView: Reaktionsfähiger Bereich, der Ihre App-Inhalte hostet.
5 Aktionen (optional): Schaltflächen im Zusammenhang mit Ihren App-Inhalten.

Desktop

Abbildung zeigt die Benutzeroberflächenanatomie eines Aufgabenmoduls.

Leistungsindikator Beschreibung
1 App-Symbol
2 App-Name: Vollständiger Name Ihrer App.
3 Kopfzeile: Erstellen Sie Ihre Kopfzeilen klar und präzise. Beschreiben Sie die Aufgabe, die Benutzer ausführen sollen.
4 Schaltfläche „Schließen“: Schließt das Aufgabenmodul. Wendet keine ungespeicherten Änderungen in App-Inhalten an.
5 iFrame: Reaktionsfähiger Bereich, der Ihre App-Inhalte hostet.
6 Aktionen (optional): Schaltflächen im Zusammenhang mit Ihren App-Inhalten.

Entwerfen mit Benutzeroberflächenvorlagen

Erwägen Sie die Verwendung von Vorlagen für allgemeine Layouts innerhalb Ihrer Aufgabenmodule. Jede besteht aus kleineren Komponenten, um ein elegantes, reaktionsfähiges Design zu erstellen, das sofort verwendet oder für Ihr Szenario oder das Look & Feel Ihrer Marke angepasst werden kann.

  • Liste: Listen können verwandte Elemente in einem durchsuchbaren Format anzeigen und es Benutzern ermöglichen, Aktionen für eine ganze Liste oder einzelne Elemente auszuführen.
  • Formular: Formulare dienen zum Sammeln, Überprüfen und Übermitteln von Benutzereingaben auf strukturierte Weise.
  • Leerer Status: Die Vorlage „leerer Status“ kann für viele Szenarien verwendet werden, z. B. für die Anmeldung, die Erfahrung beim ersten Ausführen, Fehlermeldungen und vieles mehr.

Beispiele

Liste

Listen funktionieren gut in einem Aufgabenmodul, da sie einfach zu durchsuchen sind.

Mobilgeräte

Beispielliste in einem Aufgabenmodul auf einem Mobilgerät.

Desktop

Beispielliste in einem Aufgabenmodul.

Formular

Aufgabenmodule eignen sich hervorragend zum Anzeigen von Formularen mit sequenziellen Benutzereingaben und Inline-Validierung. Sie können adaptive Karten als Möglichkeit zum Einbetten von Formularelementen nutzen.

Mobilgeräte

Beispielformular in einem Aufgabenmodul auf Mobilgeräten.

Desktop

Beispielformular in einem Aufgabenmodul.

Anmelden

Erstellen Sie einen fokussierten Anmelde- oder Registrierungsfluss mit einer Reihe von Aufgabenmodulen, sodass Benutzer problemlos sequenzielle Schritte durchlaufen können.

Mobilgeräte

Beispiel für die Anmeldeerfahrung in einem Aufgabenmodul auf Mobilgeräten.

Desktop

Beispiel für die Anmeldeerfahrung in einem Aufgabenmodul.

Medien

Einbetten von Medieninhalten in ein Aufgabenmodul für eine fokussierte Anzeigeerfahrung.

Mobilgeräte

Beispiel für Medieninhalte in einem Aufgabenmodul auf Mobilgeräten.

Desktop

Beispiel für Medieninhalte in einem Aufgabenmodul.

Leerer Zustand

Wird für Begrüßungs-, Fehler- und Erfolgsmeldungen verwendet.

Mobilgeräte

Beispiel für leeren Zustand in einem Aufgabenmodul auf Mobilgeräten.

Desktop

Beispiel für leeren Zustand in einem Aufgabenmodul.

Einbetten eines Katalogkarussells in ein iFrame (Desktop) oder eine WebView (Mobilgerät).

Mobilgeräte

Beispiel eines Bildkatalogs in einem Aufgabenmodul auf Mobilgeräten.

Desktop

Beispiel eines Bildkatalogs in einem Aufgabenmodul.

Umfrage

Dieses Beispiel zeigt Ergebnisse einer Umfrage, die von einer adaptiven Karte gestartet wurde. Die Umfrage kann auch in ein Aufgabenmodul platziert werden.

Mobilgeräte

Beispielumfrage in einem Aufgabenmodul auf Mobilgeräten.

Desktop

Beispielumfrage in einem Aufgabenmodul.

Bewährte Methoden

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

Benutzerfreundlichkeit

Beispiel zeigt eine bewährte Methode für ein Aufgabenmodul (ein Aufgabenmodul nach dem anderen).

Tun: Verwenden Sie jeweils ein Aufgabenmodul nach dem anderen.

Das Ziel besteht darin, dass sich der Benutzer auf das Erledigen einer Aufgabe konzentriert.

Beispiel zeigt eine bewährte Methode für ein Aufgabenmodul (ein Dialogfeld über einem Aufgabenmodul einblenden).

Nicht tun: Einblenden eines Dialogfelds über einem Aufgabenmodul

Dies führt zu einer unscharfen, verwirrenden Benutzererfahrung.

Reaktionsfähig

Beispiel zeigt eine bewährte Methode für ein Aufgabenmodul (sicherstellen, dass die Inhalte reaktionsfähig sind).

Tun: Sicherstellen, dass die Inhalte reaktionsfähig sind

Während adaptive Karten, die in einem Aufgabenmodul gehostet werden, gut auf mobilen Geräten gerendert werden, müssen Sie bei Verwendung eines iFrames zum Hosten von App-Inhalten sicherstellen, dass die Benutzeroberfläche reaktionsfähig ist und geräteübergreifend gut funktioniert.

Beispiel zeigt eine bewährte Methode für ein Aufgabenmodul (verwenden Sie keine horizontalen Bildlaufleisten).

Nicht tun: Horizontale Bildlaufleisten verwenden

Es ist eine bewährte Methode, Inhalte fokussiert und nicht zu lang zu halten. Wenn ein Bildlauf erforderlich ist, scrollen Sie vertikal und nicht horizontal.

Einfachheit

Beispiel zeigt eine bewährte Methode für ein Aufgabenmodul (halten Sie es kurz).

Tun: Halten Sie Ihren Beitrag kurz.

Sie können ganz einfach einen Assistenten mit mehreren Schritten erstellen, aber das bedeutet nicht unbedingt, dass Sie es sollten! Ein Aufgabenmodul mit mehreren Bildschirmen kann problematisch sein, da eingehende Nachrichten ablenkend sind und Benutzer zum Beenden verleiten. Wenn Ihre Aufgabe sehr umfangreich ist, sollten Sie statt eines Aufgabenmoduls eine ganze Webseite öffnen.

Beispiel zeigt eine bewährte Methode für ein Aufgabenmodul (keine langen Interaktionen).

Nicht tun: Lange Interaktionen erstellen

Versuchen Sie, Ihre Interaktionen kurz zu halten und auf den Punkt zu bringen.

Fehlermeldungen

Beispiel zeigt eine bewährte Methode für ein Aufgabenmodul (Inline-Fehlermeldungen verwenden).

Tun: Verwenden von Inline-Fehlermeldungen

Anleitungen zur Inline-Fehlerbehandlung finden Sie in den Formularen zur Benutzeroberflächenvorlage.

Beispiel zeigt eine bewährte Methode für ein Aufgabenmodul (Fehlermeldungen in Dialogfelder einfügen).

Nicht tun: Fehlermeldungen in Dialogfelder einfügen

Blenden Sie keine Fehlermeldung in einem Dialogfeld über einem Aufgabenmodul ein. Dies führt zu einer verwirrenden Benutzererfahrung.