Entwurfsrichtlinien für Outlook-Add-Ins

Add-Ins sind eine großartige Möglichkeit für Partner, die Funktionalität von Outlook über unsere Kernfunktionen hinaus zu erweitern. Add-Ins ermöglichen Benutzern den Zugriff auf Erfahrungen, Aufgaben und Inhalte von Drittanbietern, ohne den eigenen Posteingang zu verlassen. Nach der Installation sind Outlook-Add-Ins auf jeder Plattform und jedem Gerät verfügbar. Die folgenden allgemeinen Richtlinien helfen Ihnen beim Entwerfen und Erstellen eines überzeugenden Add-Ins, das das Beste aus Ihrer App direkt in Outlook zur Verfügung stellt, unabhängig davon ob unter Windows, im Web, unter iOS, auf dem Mac oder unter Android (in Kürze verfügbar).

Grundsätze

  1. Konzentrieren Sie sich auf einigen wichtigen Aufgaben

    Die am besten gestalteten Add-Ins sind einfach zu verwenden und konzentrieren sich darauf, Benutzern einen echten Mehrwert zu bieten. Da das Add-In in Outlook ausgeführt wird, liegt ein besonderer Schwerpunkt auf diesem Grundsatz. Outlook ist eine Produktivitätsanwendung, mit der Benutzer Ihre Aufgaben erledigen.

    Sie erweitern unsere Funktionen, deshalb ist es wichtig, dass die bereitgestellten Szenarien und das Verhalten sich nahtlos in Outlook einfügen. Denken Sie sorgfältig darüber nach, welche gemeinsamen Anwendungsfälle am meisten von Hooks profitieren, auf die sie direkt in der E-Mail- und Kalenderoberfläche zugreifen können.

    Ein Add-In sollte nicht das tun, was die App bereits tut. Der Fokus sollte auf den am häufigsten verwendeten und entsprechenden Aktionen im Kontext von Outlook-Inhalten liegen. Denken Sie an Ihre Handlungsaufforderung und machen Sie klar, welche Aktionen der Benutzer durchführen sollte, wenn Ihr Aufgabenbereich geöffnet wird.

  2. Sorgen Sie für eine möglichst native Erfahrung

    Das Add-In sollte mithilfe von Mustern entworfen werden, die für die Plattform nativ sind, auf der Outlook ausgeführt wird. Um dies zu erreichen, berücksichtigen Sie unbedingt die Interaktion und visuelle Richtlinien, die für die jeweilige Plattform gelten. Outlook verfügt über eigene Richtlinien, welche ebenfalls berücksichtigt werden müssen. Ein gut entworfenes Add-In stellt eine entsprechende Mischung aus der Funktionalität, der Plattform und Outlook dar.

    Das bedeutet, dass Ihr Add-In in Outlook für iOS und Outlook für Android jeweils anders aussehen muss (sobald wir Add-Ins für diese App unterstützen). Wir empfehlen Ihnen Framework7 als Anlaufstelle für Designanregungen. Wir werden aktualisierte Richtlinien (insbesondere auch für Android) veröffentlichen, sobald der Termin für die Implementierung von Add-In-Unterstützung in Outlook für Android näher rückt.

  3. Machen Sie die Nutzung zum Genuss und achten Sie auf Details

    Benutzer genießen es, Produkte zu verwenden, die funktional und optisch ansprechend sind. Sie tragen zum Erfolg Ihres Add-Ins bei, indem Sie eine Umgebung ausarbeiten, in der jede Interaktion und visuelle Details sorgfältig berücksichtigt wurden. Die notwendigen Schritte zum Durchführen einer Aufgabe müssen klar und relevant sein. Im Idealfall sollten für keine Aktion mehr als ein oder zwei Klicks erforderlich sein. Vermeiden Sie es, dass Benutzer außerhalb des Kontexts eine Aktion ausführen müssen. Die Benutzer sollten problemlos das Add-In aufrufen und verlassen können, unabhängig davon, welche Aufgaben Sie vorher durchgeführt haben. Ein Add-In soll nicht viel Zeit in Anspruch nehmen, sondern eine Erweiterung der Kernfunktionen darstellen. Wenn dies ordnungsgemäß geschieht, dient das Add-In als Unterstützung dabei, zu mehr Produktivität von Benutzern beizutragen.

  4. Branding mit Bedacht

    Wir schätzen großartiges Branding und wissen, dass es wichtig ist, Benutzern eine einzigartige Erfahrung zu bieten. Wir sind der Meinung, dass man den Erfolg von Add-Ins am besten sicherstellen kann, indem eine intuitive Benutzeroberfläche sichergestellt wird, die Elemente Ihrer Marke enthält, statt dauerhafte oder störende Markenelemente, die den Benutzer davon ablenken, frei Ihr System zu verwenden. Eine gute Möglichkeit, Ihre Marke auf sinnvolle Weise einzubinden, ist die Verwendung von Markenfarben, Symbolen und VoIP, vorausgesetzt diese stehen nicht in Konflikt mit den bevorzugten Plattformmustern und Barrierefreiheitsanforderungen stehen. Legen Sie den Fokus auf Inhalte und Aufgaben, nicht auf die Marke. Hinweis: Anzeigen sollten nicht innerhalb von Add-Ins unter IOS oder Android angezeigt werden.

Entwurfsmuster

Hinweis: Während die oben genannten Prinzipien für alle Endpunkte/Plattformen gelten, gelten die folgenden Muster und Beispiele für mobile Add-Ins auf der iOS-Plattform.

Damit Sie ein Add-In mit ansprechendem Design erstellen können, gibt es Vorlagen, die mobile iOS-Muster enthalten, die innerhalb der Outlook Mobile-Umgebung funktionieren. Durch Nutzung dieser bestimmten Muster können Sie eine systemeigene Erfahrung des Add-Ins auf der iOS-Plattform und in Outlook Mobile sicherstellen. Diese Muster werden weiter unten detailliert beschrieben. Die Beschreibungen sind zwar nicht vollständig, es ist jedoch der Beginn einer Bibliothek, die wir weiter ausbauen werden, sobald weitere Paradigmenpartner ihre Add-Ins mit aufnehmen möchten.

Übersicht

Ein Add-In besteht in der Regel aus den folgenden Komponenten.

Ein Diagramm mit grundlegenden UX-Mustern für einen Aufgabenbereich unter iOS

Ein Diagramm mit grundlegenden UX-Mustern für einen Aufgabenbereich unter Android

Ladevorgang

Wenn ein Benutzer auf das Add-In tippt, sollte UX so schnell wie möglich angezeigt werden. Wenn eine Verzögerung eintritt, verwenden Sie eine Statusanzeige oder einen Aktivitätsindikator. Eine Statusanzeige sollte verwendet werden, wenn die Zeitspanne bestimmt werden kann. Ein Indikator für Aktivität sollte verwendet werden, wenn die Zeitspanne nicht bestimmt werden kann.

Ein Beispiel für das Laden von Seiten unter iOS Beispiele für eine Statusanzeige und einen Aktivitätsindikator unter iOS

Ein Beispiel für das Laden von Seiten unter Android Beispiele für eine Statusanzeige und einen Aktivitätsindikator unter Android

Anmelden/Registrieren

Stellen Sie sicher, dass der Anmeldevorgang (und Registrierungsvorgang) unkompliziert und benutzerfreundlich ist.

Ein Beispiel für eine Anmeldung und eine Anmeldeseite unter iOS Beispiele für Anmeldungen und Anmeldeseiten unter iOS

Ein Beispiel für eine Anmeldeseite unter Android Beispiele für Anmeldeseiten unter Android

Markenleiste

Im ersten Bildschirm des Add-Ins sollte Ihr Brandingelement enthalten sein. Die der Erkennung dienende Markenleiste hilft ebenfalls dabei, den Kontext für den Benutzer festzulegen. Da die Navigationsleiste den Namen Ihres Unternehmens/Ihrer Marke enthält, ist es nicht erforderlich, die Markenleiste auf nachfolgende Seiten zu wiederholen.

Ein Beispiel für Branding unter iOS Beispiele für Markenleisten unter iOS

Ein Beispiel für Branding unter Android Beispiele für Markenleisten unter iOS

Seitenränder

Seitenränder in mobilen Umgebungen sollten auf 15 Pixel (8 % des Bildschirms) für jede Seite festgelegt werden, damit dies mit Outlook iOS übereinstimmt. Für eine Übereinstimmung mit Outlook Android sollten 16 Pixel für jede Seite eingestellt werden.

Beispiele für Seitenränder unter iOS

Typografie

Typografienutzung wird an Outlook iOS ausgerichtet und ist zur Wahrung der Lesbarkeit einfach gehalten.

Typografie unter iOS Typografiebeispiele für iOS

Typografie unter Android Typografiebeispiele für Android

Farbpalette

Die Farbverwendung ist subtil in Outlook iOS. Zur Anpassung sollte die Verwendung von Farben an Aktionen und Fehlerstatus angepasst sein. Nur für die Markenleiste sollte eine einzigartige Farbe verwendet werden.

Farbpalette unter iOS

Zellen

Da die Navigationsleiste nicht für die Bezeichnung einer Seite verwendet werden kann, verwenden Sie Abschnittstitel hierfür.

Beispiele für Zellen unter iOS Zellentypen für iOS


Dos für Zellen unter iOS


Don’ts für Zellen unter iOS


Zellen und Eingaben unter iOS

Beispiele für Zellen unter Android Zellentypen für Android


Dos für Zellen unter Android


Don‘ts für Zellen unter Android


Zellen und Eingaben unter Android – Teil 1

Zellen und Eingaben unter Android – Teil 2

Aktionen

Selbst wenn Ihre App eine Vielzahl von Aktionen enthält, überlegen Sie, welche die wichtigsten für Ihr Add-In sind, und konzentrieren Sie sich auf diese.

Beispiele für Aktionen unter iOS Aktionen und Zellen in iOS


Dos für Aktionen unter iOS

Beispiele für Aktionen unter Android Aktionen und Zellen in Android


Dos für Aktionen unter Android

Schaltflächen

Schaltflächen werden verwendet, wenn andere UX-Elemente unten vorhanden sind (im Gegensatz zu Aktionen, bei denen die Aktion das letzte Element auf dem Bildschirm ist).

Beispiele für Schaltflächen unter iOS Beispiele für Schaltflächen für iOS

Beispiele für Schaltflächen unter Android Beispiele für Schaltflächen für Android

Registerkarten

Registerkarten können bei der Organisation des Inhalts hilfreich sein.

Beispiele für Registerkarten unter iOS Beispiele für Registerkarten für iOS

Beispiele für Registerkarten unter Android Beispiele für Registerkarten für Android

Symbole

Symbole sollten nach Möglichkeit dem aktuellen Outlook iOS-Design entsprechen. Verwenden Sie unsere Standardgrößen und -farben.

Beispiele für Symbole unter iOS Beispiele für Symbole für iOS

Beispiele für Symbole unter Android Beispiele für Symbole für Android

End-to-End-Beispiele

Bei Version 1 von Outlook Mobile-Add-Ins haben wir eng mit unseren Partnern zusammengearbeitet, die Add-Ins erstellen. Zur Präsentation des Potenzials von Add-Ins für Outlook Mobile hat unser Designer End-to-End-Flüsse für jedes Add-In zusammengestellt, in denen unsere Richtlinien und Muster berücksichtigt werden.

Wichtiger Hinweis: In diesen Beispielen werden ideale Möglichkeiten zum Erzielen von Interaktion und des visuellen Designs dargestellt. Sie weichen möglicherweise von den tatsächlichen Funktionssätzen in den veröffentlichen Versionen von Add-Ins ab.

GIPHY

Ein Beispiel für GIPHY unter iOS End-to-End-Design für das GIPHY-Add-In unter iOS

Ein Beispiel für GIPHY unter Android End-to-End-Design für das GIPHY-Add-In unter Android

Nimble

Ein Beispiel für Nimble unter iOS End-to-End-Design für das Nimble-Add-In unter iOS

Ein Beispiel für Nimble unter Android End-to-End-Design für das Nimble-Add-In unter Android

Trello

Ein Beispiel für Trello unter iOS End-to-End-Design für das Trello-Add-In Teil 1 unter iOS


End-to-End-Design für das Trello-Add-In Teil 2 unter iOS


End-to-End-Design für das Trello-Add-In Teil 3 unter iOS

Ein Beispiel für Trello unter Android End-to-End-Design für das Trello-Add-In Teil 1 unter Android


End-to-End-Design für das Trello-Add-In Teil 2 unter Android

Dynamics CRM

Ein Beispiel für Dynamics CRM unter iOS End-to-End-Design für das Dynamics CRM-Add-In unter iOS

Ein Beispiel für Dynamics CRM unter Android End-to-End-Design für das Dynamics CRM-Add-In unter Android