Entwerfen Ihrer persönlichen App für Microsoft Teams

Eine persönliche App kann ein Bot, ein privater Arbeitsbereich oder beides sein. Manchmal funktioniert es wie ein Ort zum Erstellen oder Anzeigen von Inhalten, in anderen Fällen bietet es dem Benutzer einen Blick auf alles, was ihnen liegt, wenn die App als Registerkarte in mehreren Kanälen konfiguriert wurde.

Zur Anleitung ihres App-Designs beschreiben und veranschaulichen die folgenden Informationen, wie Benutzer persönliche Apps in Teams hinzufügen, verwenden und verwalten können.

Microsoft Teams-UI-Kit

Im Microsoft Teams UI Kit finden Sie umfassende Designrichtlinien für persönliche Apps, einschließlich Elementen, die Sie nach Bedarf abrufen und ändern können. Der Benutzeroberflächenbausatz enthält auch wichtige Themen wie Barrierefreiheit und dynamische Größenanpassung, die hier nicht behandelt werden.

Hinzufügen einer persönlichen App

Benutzer können eine persönliche App aus dem Teams Store oder dem App-Flyout hinzufügen, indem sie auf der linken Seite von Teams das Symbol "Mehr" auswählen (siehe das folgende Beispiel).

Beispiel zeigt, wie Sie eine persönliche App aus dem App-Flyout hinzufügen.

Verwenden einer persönlichen App (privater Arbeitsbereich)

Mit einem privaten Arbeitsbereich können Benutzer App-Inhalte, die für sie von Bedeutung sind, an einem zentralen Ort anzeigen, ohne Teams zu verlassen.

(Implementierungshinweis: Der private Arbeitsbereich basiert auf der persönlichen Registerkartenfunktion.)

Anatomie: Persönliche App (privater Arbeitsbereich)

Mobilgeräte

Beispiel zeigt die Aufbaukomponente der persönlichen Registerkarte.

Leistungsindikator Beschreibung
A App-Zuordnung: Ihr App-Name.
B Registerkarten: Bietet Navigation für Ihre persönliche App.
C Mehr Menü: Enthält zusätzliche App-Optionen und Informationen.
D Primäre Navigation: Bietet Navigation zu Ihrer App, andere hauptfunktionen Teams.

Beispiel zeigt die strukturelle Anatomie der persönlichen Registerkarte.

Leistungsindikator Beschreibung
A Registerkarten: Bietet Navigation für Ihre persönliche App.
1 webview: Zeigt Ihre App-Inhalte an.

Desktop

Dieses Beispiel zeigt die Aufbaukomponente der persönlichen Registerkarte.

Leistungsindikator Beschreibung
A App-Zuordnung: Ihr App-Logo und -Name.
B Registerkarten: Bietet Navigation für Ihre persönliche App.
C Popupansicht: Verschiebt Ihre App-Inhalte aus einem übergeordneten Fenster in ein eigenständiges untergeordnetes Fenster.
D Mehr Menü: Enthält zusätzliche App-Optionen und Informationen. (Alternativ können Sie Einstellungen eine Registerkarte erstellen.)

Dieses Beispiel zeigt die strukturelle Anatomie der persönlichen Registerkarte.

Leistungsindikator Beschreibung
A Registerkarten: Bietet Navigation für Ihre persönliche App.
1 iframe: Zeigt Ihre App-Inhalte an.

Design mit Benutzeroberflächenvorlagen und erweiterten Komponenten

Verwenden Sie eine der folgenden Teams Vorlagen und Komponenten, um Ihre persönliche Registerkarte 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 persönliche App eine Navigation erfordert. Im Allgemeinen sollten Sie die Navigation auf ein Minimum beschränken.

Verwenden einer persönlichen App (Bot)

Persönliche Apps können einen Bot für 1:1-Unterhaltungen und private Benachrichtigungen enthalten (z. B. wenn ein Kollege einen Kommentar auf dem Zeichenboard postet). Benutzer interagieren mit dem Bot auf einer von Ihnen angegebenen Registerkarte.

Anatomie: Persönliche App (Bot)

Mobilgeräte

Beispiel zeigt die Anatomie der persönlichen Botkomponente.

Leistungsindikator Beschreibung
A Bot-Einstiegspunkt: Einstiegspunkt für Benutzer, um auf das Bot-Feature in Ihrer persönlichen App zuzugreifen.
B Schaltfläche "Zurück": Führt Benutzer zurück zum privaten Arbeitsbereich.
C Botnachricht: Bots senden häufig Nachrichten und Benachrichtigungen in Form einer Karte (z. B. einer adaptiven Karte).
D Feld "Verfassen": Eingabefeld zum Senden von Nachrichten an den Bot.

Desktop

Beispiel zeigt die Anatomie der persönlichen Botkomponente.

Leistungsindikator Beschreibung
A Bot-Registerkarte: Fügen Sie beispielsweise eine Chat-Registerkarte ein, um auf Bot-Unterhaltungen und -Benachrichtigungen zuzugreifen.
B Botnachricht: Bots senden häufig Nachrichten und Benachrichtigungen in Form einer Karte (z. B. einer adaptiven Karte).
C Feld "Verfassen": Eingabefeld zum Senden von Nachrichten an den Bot.

Verwalten einer persönlichen Registerkarte

Auf der linken Seite von Teams können Benutzer mit der rechten Maustaste auf die persönliche App klicken, um andere App-Optionen zu anheften, zu entfernen und zu konfigurieren.

Beispiel zeigt Optionen zum Verwalten einer persönlichen App.

Bewährte Methoden

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

Registerkartenpriorität

Do: Anzeigen der relevantesten Inhalte auf der ersten Registerkarte

Bei einer dynamischen Größenanpassung werden Registerkarten auf der rechten Seite möglicherweise abgeschnitten oder nicht mehr angezeigt.

Beispiel zeigt eine persönliche App, die den relevantesten Inhalt auf der ersten Registerkarte anzeigt.

Don't: Lead with secondary content or metadata

Wie bei einer standardmäßigen Web-App sollte die Registerkartennavigation in einer Reihenfolge ausgeführt werden, die die wichtigsten Features Ihrer App sinnvoll macht.

Beispiel zeigt eine persönliche App, die mit sekundären Inhalten oder Metadaten führt.

Registerkartenhierarchie

Do: Registerkarten sollten eine gleiche Hierarchie aufweisen und wichtige App-Seiten darstellen

Ihre Registerkarten sollten die wichtigsten Features und Inhalte Ihrer App kategorisieren. Bei einer dynamischen Größenanpassung werden Inhalte auf der rechten Seite möglicherweise abgeschnitten oder nicht mehr angezeigt.

Beispiel zeigt eine persönliche App mit Registerkarten gleicher Hierarchie.

Don't: Include different levels of hierarchy

Ihre Inhalte sollten in einer logischen Reihenfolge ausgeführt werden, die den Benutzern dabei hilft, sie zu verstehen. Wenn Sie zwei Registerkarten haben, die eng miteinander verbunden sind, sollten Sie diese in einer Registerkarte kombinieren.

Beispiel zeigt eine persönliche App mit unterschiedlichen Hierarchieebenen.

Erste Ausführung

Do: Einschließen einer Benutzeroberfläche für die erstausführung

Bei der ersten Verwendung einer persönlichen App sollte mindestens eine Willkommensseite vorhanden sein. Beschreiben Sie für Bots, was Ihr Bot tun kann, und stellen Sie schnelle Aktionen bereit, z. B. eine Anmeldeschaltfläche.

Das Beispiel zeigt, was bei der ersten Ausführung einer persönlichen App zu tun ist.

Ein weiteres Beispiel zeigt, was bei der ersten Ausführung einer persönlichen App zu tun ist.

Don't: Start with a blank screen

Benutzer sind möglicherweise verwirren, wenn beim ersten Ausführen Ihrer App nichts angezeigt wird.

Das Beispiel zeigt, was bei der ersten Ausführung einer persönlichen App nicht zu tun ist.

Personalisierte Inhalte

Do: Aggregieren von App-Inhalten, die für einen Benutzer relevant sind

Unabhängig davon, ob es sich um eine persönliche Registerkarte oder einen Bot handelt, zeigen Sie Inhalte an, die sich nur auf die Aktivitäten eines Benutzers in Ihrer App beziehen.

Das Beispiel zeigt, was mit einer persönlichen App und personalisierten Inhalten zu tun ist.

Ein weiteres Beispiel zeigt, was mit einer persönlichen App und personalisierten Inhalten zu tun ist.

Don't: Show unrelated or overly broad content

Zeigen Sie in persönlichen Kontexten keine Inhalte für Teams an, zu der ein Benutzer nicht gehört. Persönliche Bot-Inhalte sollten sich auf die Person konzentrieren, nicht auf eine Gruppe.

Das Beispiel zeigt, was nicht mit einer persönlichen App und personalisierten Inhalten zu tun ist.

Ein weiteres Beispiel zeigt, was nicht mit einer persönlichen App und personalisierten Inhalten zu tun ist.

Komplexe App-Features

Do: Benutzern den Zugriff auf komplexe Features in einem Browser gestatten

Ihre App sollte sich auf die Kernaufgaben in Teams konzentrieren, Sie können jedoch weiterhin die vollständige eigenständige App in einem Browser anzeigen.

Beispiel zeigt, wie komplexe App-Features mit einer persönlichen App behandelt werden.

Don't: Include your entire app

Wenn Sie Ihre App nicht speziell für Teams erstellt haben, verfügen Sie wahrscheinlich über Features, die in einem Tool für die Zusammenarbeit nicht sinnvoll sind.

Das Beispiel zeigt, wie komplexe App-Features nicht mit einer persönlichen App behandelt werden.

Siehe auch

Diese anderen Entwurfsrichtlinien können je nach Umfang Ihrer persönlichen App hilfreich sein: