Outlook add-in design guidelines

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).

Principles

  1. Focus on a few key tasks; do them well

    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.

    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.

    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. Make it feel as native as possible

    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.

    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. Make it enjoyable to use and get the details right

    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. Brand wisely

    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.

Design patterns

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.

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.

Overview

A typical add-in is made up of the following components.

A diagram of basic UX patterns for a taskpane on iOS

A diagram of basic UX patterns for a taskpane on Android

Loading

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.

An example of loading pages on iOS Examples of a progress bar and an activity indicator on iOS

An example of loading pages on Android Examples of a progress bar and an activity indicator on Android

Sign in/Sign up

Make your sign in (and sign up) flow straightforward and simple to use.

An example sign in and sign up page on iOS Examples of sign in and sign up pages on iOS

An example sign in page on Android Examples of sign in page on Android

Brand bar

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.

An example of branding on iOS Examples of brand bars on iOS

An example of branding on Android Examples of brand bars on iOS

Margins

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.

Examples of margins on iOS

Typography

Typography usage is aligned to Outlook iOS and is kept simple for scannability.

Typography on iOS Typography samples for iOS

Typography on Android Typography samples for Android

Color palette

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.

Color palette for iOS

Cells

Since the navigation bar cannot be used to label a page, use section titles to label pages.

Examples of cells on iOS Cell types for iOS


Cell 'dos' for iOS


Cell 'don'ts' for iOS


Cells and inputs for iOS

Examples of cells on Android Cell types for Android


Cell 'dos' for Android


Cell 'don'ts' for Android


Cells and inputs for Android part 1

Cells and inputs for Android part 2

Actions

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.

Examples of actions on iOS Actions and cells in iOS


Actions 'dos' for iOS

Examples of actions on Android Actions and cells in Android


Actions 'dos' for Android

Buttons

Buttons are used when there are other UX elements below (vs. actions, where the action is the last element on the screen).

Examples of buttons on iOS Examples of buttons for iOS

Examples of buttons on Android Examples of buttons for Android

Tabs

Tabs can aid in content organization.

Examples of tabs on iOS Examples of tabs for iOS

Examples of tabs on Android Examples of tabs for Android

Icons

Icons should follow the current Outlook iOS design when possible. Use our standard size and color.

Examples of icons on iOS Examples of icons for iOS

Examples of icons on Android Examples of icons for Android

End-to-end examples

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.

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.

GIPHY

An example of GIPHY on iOS End-to-end design for the GIPHY add-in on iOS

An example of GIPHY on Android End-to-end design for the GIPHY add-in on Android

Nimble

An example of Nimble on iOS End-to-end design for the Nimble add-in on iOS

An example of Nimble on Android End-to-end design for the Nimble add-in on Android

Trello

An example of Trello on iOS End-to-end design for the Trello add-in part 1 on iOS


End-to-end design for the Trello add-in part 2 on iOS


End-to-end design for the Trello add-in part 3 on iOS

An example of Trello on Android End-to-end design for the Trello add-in part 1 on Android


End-to-end design for the Trello add-in part 2 on Android

Dynamics CRM

An example of Dynamics CRM on iOS End-to-end design for the Dynamics CRM add-in on iOS

An example of Dynamics CRM on Android End-to-end design for the Dynamics CRM add-in on Android