Interaction patterns for Office Add-ins

Office Add-ins can enhance authoring and productivity experiences as well as connect content in Office host applications to larger web-based workflows. A number of common scenarios apply to content, task pane, and Outlook add-ins that you might develop. This article describes some of the most common scenarios and provides recommended interaction patterns for the add-in UX. You can break down, combine, or mix and match these interaction patterns depending on your unique scenarios.

Common add-in scenarios

Add-in type Common scenarios
Content Visualizing data
Widgets and tools
Task pane Transforming and processing data
Authoring effectively and efficiently
Locating content and inserting data
Publishing or uploading content to a web service
Outlook Bridging between mail content and an external application
Giving more information about the content in a mail message or appointment
Providing information that helps you be more productive

Visualize data with a content add-in

This example shows a content add-in for Excel that generates a chart from data in a spreadsheet.

In this interaction pattern, the add-in doesn't become active until you select and bind data for generating the chart. It's important to communicate the purpose of the add-in and the steps for activating it in the initial view of the add-in.

Content add-in for Excel that generates a chart from data in a spreadsheet
Content app for Excel that generates a chart from data in a spreadsheet

  • To reinforce that you must perform an action before choosing the button, display instructions along with a disabled button (A).

  • After you select a range of cells, the Create Chart button becomes active (B - C).

  • The visualization fills out the container and replaces the previous view (D).

  • Display any additional UI at the bottom edge of the add-in along with a settings button (gear) to take you to a view where you can reset or manage the add-in.

Best suited for:

  • Add-ins that require you to select data prior to activation.

Transform content with a task pane add-in

This example shows a task pane add-in that translates text in your document into another language.

In this interaction pattern, you must first select the text you want to translate in the document.

Task pane add-in that translates text in your document into another language
Task pane app that translates text in your document into another language

  • Communicate the purpose of the add-in in a headline and hint at the fact that you must first make a selection (A).

  • The language menu and Translate button are disabled, reinforcing that you must perform an action before you can progress. After you select content in the document, these two elements become active (D).

  • After you choose Translate, the UI unfolds showing the translated content along with a button for inserting it back into the document (E).

  • You can provide a Clear or Reset button that returns to the initial view.

Best suited for:

  • Add-ins that require you to select data prior to activation.

  • UI that unfolds or is revealed as you progress through a scenario.

Process data with a task pane add-in

This example shows a task pane add-in that checks data in Excel.

In this interaction pattern, you must select a range of cells in the spreadsheet to begin.

Task pane add-in that checks data in Excel
Task pane app that checks data in Excel

  • The purpose of the add-in is described in the headline. Instructions help you get started.

  • The Send selected data button is disabled, reinforcing that you must perform an action in order to progress (A).

  • After you select a range of cells in their spreadsheet (B), the Send selected data button is activated.

  • After you choose this button, the UI is replaced with the selected range of cells, a progress bar, and a Cancel button.

  • The progress bar communicates the status of the process, and the Cancel button lets you interrupt it (D).

  • When the process is finished, the results are automatically displayed (E). Selecting an element in the list activates the corresponding cell in the spreadsheet.

Best suited for:

  • Processes that take an indeterminate length of time.

Analyze content with a task pane add-in

This example shows a task pane add-in that displays word definitions as you type.

In this interaction pattern, you must first select text in the document to see results.

Task pane add-in that displays word definitions as you type
Task pane app that displays word definitions as you type

  • A headline explains the purpose of the add-in and how to get started (A).

  • Auto-search is enabled by default with the option to disable it (B).

  • After you make a selection, the add-in displays the corresponding content (D).

  • Provide a link to display more information (E).

Best suited for:

  • Add-ins that automatically return content as you author.

  • Add-ins that require you to select content prior to activation.

Locate content with a task pane add-in

This example shows a task pane add-in for searching content.

In this interaction pattern, you enter a string in the search box, or select from a list of featured content to begin.

Task pane add-in for searching content
Task pane app for searching content

  • The initial view contains a Search box (A) and a list of featured content (B).

  • When you enter a string in the search box, the search icon is replaced with a close icon (C).

  • Choosing the close icon returns you to the initial view.

Best suited for:

  • Add-ins that automatically return content as you author.

  • Add-ins that require you to select content prior to activation.

Insert media with a task pane add-in

In this interaction pattern, you can select an image from search results to insert into your document.

Task pane add-in for inserting an image
Task pane app for inserting an image

  • You filtered a list of search returns (A) and selected content to insert (B).

  • A Detail view of the selected content is displayed (C) with a button that takes you back to the list.

  • An Insert Photo button is located in the footer (D). After you choose this button, the image is inserted into the document.

  • A short description of where the image came from is included with the inserted content (E).

  • UI in the add-in visually confirms the success of the action.

Best suited for:

  • Add-ins for inserting content.

Insert selected text with a task pane add-in

In this interaction pattern, you select text from search results to insert into the document.

Task pane add-in for inserting text
Task pane app for inserting text

  • You have already located a piece of content (A).

  • A disabled Insert Selection button is displayed in the footer (B).

  • When you select a string of text (C), the Insert Selection button becomes active.

  • After you choose this button, the add-in inserts the selected text into the document along with a reference to the source of the content (E).

Best suited for:

  • Add-ins for conducting research and inserting content.

Publish to a web service with a task pane add-in

This example shows a task pane add-in for publishing a document as a blog post.

In this interaction pattern, you have finished writing content in a document and want to post it to your blog.

Task pane add-in for publishing a document as a blog post
Task pane app for publishing a document as a blog post

  • First, a sign-in form is displayed to enter your credentials (A).

  • Links for creating an account and handling typical sign-in troubles are provided (B). Choosing these links opens these pages in a browser.

  • After you are signed in, the add-in displays a form for creating a new blog post (C).

  • The name of the account you signed in to (and will post to) is shown toward the top of the add-in. The add-in provides a link to preview the post (D). Choosing this link displays the preview in a browser.

  • After you choose Create post, the add-in displays a view confirming that the document content was posted (E).

  • The add-in provides a link to view the post in a browser (F), as well as a button to create another post (G).

Best suited for:

  • Add-ins that output, publish, or share content to social networks, blogging sites, and web services.

  • Add-ins that require you to sign into a service.

Get more information about people with an Outlook add-in

Example 1

Results and details page
Results and details page
Best suited for:

  • Exposing the breadth of your content if you have large data sets that are useful to showcase.

  • Details pages that use the full size of the add-in container

  • Navigation models that benefit from a "back and forth" flow.

Example 2

Details page with persistent navigation
Details page with persistent navigation
Best suited for:

  • Displaying, by default, the first result of a dataset.

  • Navigation structures that work like tabs (single-level linear navigation).

  • Reducing selection actions by keeping navigation available at all times.

  • Providing room to display navigation at all times.

Get more information about content with an Outlook add-in

Example 1

Results and details page
Results and details page
Best suited for:

  • Exposing the breadth of your content if you have large data sets that are useful to display.

  • Requiring you to make a choice or selection before showing more detail.

  • Details pages that use the full size of the add-in container.

  • Navigation models that benefit from a "back and forth" flow.

Example 2

Details page with secondary content
Details page with secondary content
Best suited for:

  • Cases where you want to feature one piece of content.

  • Exposing your content without user interaction.

  • Persistent navigation (can be added to this model for a mix of simplicity and ease of navigation).

Connect to an online service and present data

These examples show interaction patterns for getting data and content from an online service. They can be used in all three add-in types: content add-ins, task pane add-ins, and Outlook add-ins.

Example 1

Carousel
Carousel
Best suited for:

  • Small amounts of data that can be exposed one at a time or in groups.

  • Exposing content in a gallery format, such as slideshows or image galleries.

  • When a next/previous navigation model works well.

Example 2

Wizard
Wizard
Best suited for:

  • Content that needs to be presented in a specific order.

  • Large amounts of content that is best consumed in a series of small pieces.

  • Book-like consuming experiences.

  • When a series of steps or actions are required to complete a task.

Example 3

Form, results, and details
Form, results, and details
Best suited for:

  • Add-ins that require data entry.

  • An entry-point to a results and details pattern.

Additional resources