Entwurfsrichtlinien für Outlook-Add-InsOutlook add-in design guidelines

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).Add-ins are a great way for partners to extend the functionality of Outlook beyond our core feature set. Add-ins enable users to access third party experiences, tasks, and content without needing to leave their inbox. Once installed, Outlook Add-ins are available on every platform and device. The following high-level guidelines will help you design and build a compelling add-in, which brings the best of your app right into Outlook – on Windows, Web, iOS, Mac and Android (coming soon).

GrundsätzePrinciples

  1. Konzentrieren Sie sich auf einigen wichtigen AufgabenFocus on a few key tasks; do them well

    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.The best designed add-ins are simple to use, focused, and provide real value to users. Because your add-in will run inside of Outlook, there is additional emphasis placed on this principle. Outlook is a productivity app – it's where people go to get things done.

    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.You will be an extension of our experience and it is important to make sure the scenarios you enable feel like a natural fit inside of Outlook. Think carefully about which of your common use cases will benefit the most from having hooks to them from within our email and calendaring experiences.

    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.An add-in should not attempt to do everything your app does. The focus should be on the most frequently used, and appropriate, actions in the context of Outlook content. Think about your call to action and make it clear what the user should do when your task pane opens.

  2. Sorgen Sie für eine möglichst native ErfahrungMake it feel as native as possible

    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.Your add-in should be designed using patterns native to the platform that Outlook is running on. To achieve this, be sure to respect and implement the interaction and visual guidelines set forth by each platform. Outlook has its own guidelines and those are also important to consider. A well-designed add-in will be an appropriate blend of your experience, the platform, and Outlook.

    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.This does mean that your add-in will have to visually be different when it runs on Outlook for iOS vs Outlook for Android (when we roll out support for it). We recommend taking a look at Framework7 as one option to help you with styling. We will be posting updated guidelines, especially for Android, as we get closer to launching add-in support for Outlook for Android.

  3. Machen Sie die Nutzung zum Genuss und achten Sie auf DetailsMake it enjoyable to use and get the details right

    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.People enjoy using products that are both functionally and visually appealing. You can help ensure the success of your add-in by crafting an experience where you've carefully considered every interaction and visual detail. The necessary steps to complete a task must be clear and relevant. Ideally, no action should be further than a click or two away. Try not to take a user out of context to complete an action. A user should easily be able to get in and out of your add-in and back to whatever she was doing before. An add-in is not meant to be a destination to spend a lot of time in – it is an enhancement to our core functionality. If done properly, your add-in will help us deliver on the goal of making people more productive.

  4. Branding mit BedachtBrand wisely

    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.We value great branding, and we know it is important to provide users with your unique experience. But we feel the best way to ensure your add-in's success is to build an intuitive experience that subtly incorporates elements of your brand versus displaying persistent or obtrusive brand elements that only distract a user from moving through your system in an unencumbered manner. A good way to incorporate your brand in a meaningful way is through the use of your brand colors, icons, and voice – assuming these don't conflict with the preferred platform patterns or accessibility requirements. Strive to keep the focus on content and task completion, not brand attention. Note: Ads should not be shown within add-ins on iOS or Android.

EntwurfsmusterDesign patterns

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.Note: While the above principles apply to all endpoints/platforms, the following patterns and examples are specific to mobile add-ins on the iOS platform.

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.To help you create a well-designed add-in, we have templates that contain iOS mobile patterns that work within the Outlook Mobile environment. Leveraging these specific patterns will help ensure your add-in feels native to both the iOS platform and Outlook Mobile. These patterns are also detailed below. While not exhaustive, this is the start of a library that we will continue to build upon as we uncover additional paradigms partners wish to include in their add-ins.

ÜbersichtOverview

Ein Add-In besteht in der Regel aus den folgenden Komponenten.A typical add-in is made up of the following components.

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

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

LadevorgangLoading

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.When a user taps on your add-in, the UX should display as quickly as possible. If there is any delay, use a progress bar or activity indicator. A progress bar should be used when the amount of time is determinable and an activity indicator should be used when the amount of time is indeterminable.

Ein Beispiel für das Laden von Seiten unter iOS Beispiele für eine Statusanzeige und einen Aktivitätsindikator unter iOSAn example of loading pages on iOS Examples of a progress bar and an activity indicator on iOS

Ein Beispiel für das Laden von Seiten unter Android Beispiele für eine Statusanzeige und einen Aktivitätsindikator unter AndroidAn example of loading pages on Android Examples of a progress bar and an activity indicator on Android

Anmelden/RegistrierenSign in/Sign up

Stellen Sie sicher, dass der Anmeldevorgang (und Registrierungsvorgang) unkompliziert und benutzerfreundlich ist.Make your sign in (and sign up) flow straightforward and simple to use.

Ein Beispiel für eine Anmeldung und eine Anmeldeseite unter iOS Beispiele für Anmeldungen und Anmeldeseiten unter iOSAn example sign in and sign up page on iOS Examples of sign in and sign up pages on iOS

Ein Beispiel für eine Anmeldeseite unter Android Beispiele für Anmeldeseiten unter AndroidAn example sign in page on Android Examples of sign in page on Android

MarkenleisteBrand bar

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.The first screen of your add-in should include your branding element. Designed for recognition, the brand bar also helps set context for the user. Because the navigation bar contains the name of your company/brand, it's unnecessary to repeat the brand bar on subsequent pages.

Ein Beispiel für Branding unter iOS Beispiele für Markenleisten unter iOSAn example of branding on iOS Examples of brand bars on iOS

Ein Beispiel für Branding unter Android Beispiele für Markenleisten unter iOSAn example of branding on Android Examples of brand bars on iOS

SeitenränderMargins

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.Mobile margins should be set to 15px (8% of screen) for each side, to align with Outlook iOS and 16px for each side to align with Outlook Android.

Beispiele für Seitenränder unter iOS

TypografieTypography

Typografienutzung wird an Outlook iOS ausgerichtet und ist zur Wahrung der Lesbarkeit einfach gehalten.Typography usage is aligned to Outlook iOS and is kept simple for scannability.

Typografie unter iOS Typografiebeispiele für iOSTypography on iOS Typography samples for iOS

Typografie unter Android Typografiebeispiele für AndroidTypography on Android Typography samples for Android

FarbpaletteColor palette

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.Color usage is subtle in Outlook iOS. To align, we ask that usage of color is localized to actions and error states, with only the brand bar using a unique color.

Farbpalette unter iOS

ZellenCells

Da die Navigationsleiste nicht für die Bezeichnung einer Seite verwendet werden kann, verwenden Sie Abschnittstitel hierfür.Since the navigation bar cannot be used to label a page, use section titles to label pages.

Beispiele für Zellen unter iOS Zellentypen für iOSExamples of cells on iOS Cell types for 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 AndroidExamples of cells on Android Cell types for 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

AktionenActions

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.Even if your app handles a multitude of actions, think about the most important ones you want you add-in to perform, and concentrate on those.

Beispiele für Aktionen unter iOS Aktionen und Zellen in iOSExamples of actions on iOS Actions and cells in iOS


Dos für Aktionen unter iOS

Beispiele für Aktionen unter Android Aktionen und Zellen in AndroidExamples of actions on Android Actions and cells in Android


Dos für Aktionen unter Android

SchaltflächenButtons

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).Buttons are used when there are other UX elements below (vs. actions, where the action is the last element on the screen).

Beispiele für Schaltflächen unter iOS Beispiele für Schaltflächen für iOSExamples of buttons on iOS Examples of buttons for iOS

Beispiele für Schaltflächen unter Android Beispiele für Schaltflächen für AndroidExamples of buttons on Android Examples of buttons for Android

RegisterkartenTabs

Registerkarten können bei der Organisation des Inhalts hilfreich sein.Tabs can aid in content organization.

Beispiele für Registerkarten unter iOS Beispiele für Registerkarten für iOSExamples of tabs on iOS Examples of tabs for iOS

Beispiele für Registerkarten unter Android Beispiele für Registerkarten für AndroidExamples of tabs on Android Examples of tabs for Android

SymboleIcons

Symbole sollten nach Möglichkeit dem aktuellen Outlook iOS-Design entsprechen. Verwenden Sie unsere Standardgrößen und -farben.Icons should follow the current Outlook iOS design when possible. Use our standard size and color.

Beispiele für Symbole unter iOS Beispiele für Symbole für iOSExamples of icons on iOS Examples of icons for iOS

Beispiele für Symbole unter Android Beispiele für Symbole für AndroidExamples of icons on Android Examples of icons for Android

End-to-End-BeispieleEnd-to-end examples

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.For our v1 Outlook Mobile Add-ins launch, we worked closely with our partners who were building add-ins. As a way to showcase the potential of their add-ins on Outlook Mobile, our designer put together end-to-end flows for each add-in, leveraging our guidelines and patterns.

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.Important note: these examples are meant to highlight the ideal way to approach both the interaction and visual design of an add-in and may not match the exact feature sets in the shipped versions of the add-ins.

GIPHYGIPHY

Ein Beispiel für GIPHY unter iOS End-to-End-Design für das GIPHY-Add-In unter iOSAn example of GIPHY on iOS End-to-end design for the GIPHY add-in on iOS

Ein Beispiel für GIPHY unter Android End-to-End-Design für das GIPHY-Add-In unter AndroidAn example of GIPHY on Android End-to-end design for the GIPHY add-in on Android

NimbleNimble

Ein Beispiel für Nimble unter iOS End-to-End-Design für das Nimble-Add-In unter iOSAn example of Nimble on iOS End-to-end design for the Nimble add-in on iOS

Ein Beispiel für Nimble unter Android End-to-End-Design für das Nimble-Add-In unter AndroidAn example of Nimble on Android End-to-end design for the Nimble add-in on Android

TrelloTrello

Ein Beispiel für Trello unter iOS End-to-End-Design für das Trello-Add-In Teil 1 unter iOSAn example of Trello on iOS End-to-end design for the Trello add-in part 1 on 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 AndroidAn example of Trello on Android End-to-end design for the Trello add-in part 1 on Android


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

Dynamics CRMDynamics CRM

Ein Beispiel für Dynamics CRM unter iOS End-to-End-Design für das Dynamics CRM-Add-In unter iOSAn example of Dynamics CRM on iOS End-to-end design for the Dynamics CRM add-in on iOS

Ein Beispiel für Dynamics CRM unter Android End-to-End-Design für das Dynamics CRM-Add-In unter AndroidAn example of Dynamics CRM on Android End-to-end design for the Dynamics CRM add-in on Android