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.

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

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.

Examples of a progress bar and an activity indicator on iOS

Sign in/Sign up

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

Examples of sign in and sign up pages on iOS

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.

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.

Examples of margins on iOS

Typography

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

Typography samples for iOS

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.

Cell types for iOS


Cell 'dos' for iOS


Cell 'don'ts' for iOS


Cells and inputs for iOS

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.

Actions and cells in iOS


Actions 'dos' for iOS

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 for iOS

Tabs

Tabs can aid in content organization.

Examples of tabs for iOS

Icons

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

Examples of icons for iOS

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

End-to-end design for the GIPHY add-in

Nimble

End-to-end design for the Nimble add-in

Trello

End-to-end design for the Trello add-in part 1


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


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

Dynamics CRM

End-to-end design for the Dynamics CRM add-in