Apps for Office UX design guidelines

Example: Content app for Excel that generates a chart from data in a spreadsheet.

In the following example shown in Figure 1, the app does not become active until the user selects and binds data to it. For this reason, it is important to communicate in the initial view the purpose of the app as well as the steps the user must take to activate it. Instructions are displayed along with a disabled button (A), reinforcing the notion that the user must perform an action before choosing. Once the user selects a range of cells in their spreadsheet, the Create Chart button becomes active (B - C). The visualization fills out the container and replaces the previous view (D). Any necessary UI can be displayed towards the bottom edge of the container and a settings button can take the user to a view from where they can reset and or manage the app.

Best suited for:

• Apps that require the user to select data prior to activation.

Example: Task pane app that translates text in your document into another language

In the following example shown in Figure 2, the user must select text in their document to begin the scenario. A headline communicates the purpose of the app and hints at the fact that the user must first make a selection (A). The language menu and Translate button are disabled, reinforcing the notion that the user must perform an action before progressing. Once the user selects content in their document, these two elements become active (D). Once the user chooses Translate, the UI unfolds and they see the translated content along with a button for inserting it back into their document (E). A Clear or Reset button could be provided as well, allowing the user to return to the initial view.

Best suited for:

• Apps that require the user to select data prior to activation.

• UI that unfolds or is revealed as the user progresses through a scenario.

Example: Task pane app that checks data in Excel

In the following example shown in Figure 3, the user must select data in their spreadsheet to begin the scenario. The purpose of the app is described in the headline. Instructions help the user get started. The Send selected data button is disabled, reinforcing the notion that the user must perform an action in order to progress (A). Once the user selects a range of cells in their spreadsheet (B), the Send selected data button becomes active. Once the user chooses this button, the UI is replaced with the selected range of cells, a progress bar, and a Cancel button. The progress bar communicates to the user the status of the process, and the Cancel button allows them to interrupt it (D). When the process is finished, the results are automatically displayed (E). When the user selects an element in the list, the corresponding cell in the spreadsheet becomes active.

Best suited for:

• Processes that take an indeterminate length of time.

Example: Task pane app that displays word definitions as the user types.

In the following example shown in Figure 4, the user must select text in their document to see results. A headline explains the purpose of the app and how to get started (A). Auto-search is enabled by default and the option to disable is provided (B). Once the user makes a selection, corresponding content is displayed (D). A link to display more information is provided (E).

Best suited for:

• Apps that automatically return content as you author.

• Apps that require the user to select content prior to activation.

Example 1: Task pane app for searching content

In the following example shown in Figure 5, the initial view is composed of a search box (A) and a list of featured content (B). When the user enters a string in the search box, the search icon is replaced with a close icon (C). Choosing the close icon should return the user to the initial view.

Best suited for:

• Apps that automatically return content as you author.

• Apps that require the user to select content prior to activation.

In the following example shown in Figure 6, the user has filtered a list (A) and selected content to insert (B). A Detail view of the selected content is displayed (C) with a button that takes users back to the list. An Insert Photo button is located in the footer (D). Once the user chooses this button, the image is inserted into their document. A short description of where the image came from is included with the inserted content (E). UI in the app visually confirms the success of the action.

Best suited for:

• Apps for inserting content.

In The following example shown in Figure 7, the user has already located a piece of content (A). A disabled Insert Selection button is displayed in the footer (B). As the user selects a string of text (C), the Insert Selection button becomes active. After the user chooses this button, the selected text is inserted into the document along with a reference to the source of the content (E).

Best suited for:

• Apps for conducting research and inserting content.

Example: Task pane app for publishing a document as a blog post

In the following example shown in Figure 8, the user has already authored content in a document and has decided to post it to their blog. A sign-in form is displayed first, prompting the user to enter their credentials (A). Links for creating an account and handling typical sign-in troubles are provided (B). Choosing these links should open the respective views in a browser. Once the user is signed in, they automatically see a form for creating a new blog post (C). Located towards the top is the title of the account that they signed in to. A link to preview the post is provided (D). Choosing this displays the preview in a browser. Once the user chooses Create post, they see a view confirming that their document was posted (E). A link to view the post in a browser is provided (F), as well as a button to create another post (G).

Best suited for:

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

• Apps that require the user to sign into a service.

Example 1

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 app container

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

Example 2

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.

Example 1

Best suited for:

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

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

• Details pages that use the full size of the app container.

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

Example 2

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

Example 1

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

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

Best suited for:

• Apps that require a user to enter data.

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

Users can filter content in your app with tabs. Ensure that tabs never wrap but are instead truncated. A drop-down menu containing the truncated tabs can be made available. Make sure the most important tabs are aligned to the left where they are less likely to be cut off. Since the app bar in Outlook already uses tabs to represent apps, avoid placing another row of tabs directly below the app bar.

Users can quickly search content in your app with search. A prominently displayed search box helps users understand that search is the primary means for finding content. Depending on your app, it may be helpful to users to provide default content. Consider displaying live search results as the user types.

Items displayed in lists typically link to Detail views. Tabs can be provided as a means for filtering the listed content. Listed items can be grouped into sub-groups with headers. Consider what the default ordering and number of items displayed should be and how users can retrieve more if they want. Similar to task panes, lists can be used in horizontal apps as well. Instead of one column, multiple columns can be used, taking advantage of the available horizontal space.

When designing your app to scale and adapt to varying container dimensions and proportions, ensure that critical UI elements such as brand, navigation and important action buttons are not scrolled out of view. Horizontal scroll bars should be avoided. Instead, provide affordances that allow users to page through content.

When displaying detail views, focus the user’s attention on the selected content and provide a light weight button or link for returning to the previous view. Bread crumb trails should be avoided. In task pane apps, the back button can be placed on a separate row above the header. In mail apps, the back button could be placed on the same row as the header.

In narrow content and task pane apps, display text in a single scrollable vertical column. In horizontal apps, avoid displaying excessively wide columns of text which can be difficult for users to read. Instead, consider breaking text into two or more columns and provide controls that allow the user to page through the text. Large bodies of text with sub-sections can be collapsed by sub-section.

The footer should be considered the primary command surface for task pane, content and mail apps. When using a footer in your layout, make sure that important commands are not scrolled out of view. Commands can be grouped and aligned to either the left or right edge of the container.

Position actions or commands adjacent to the content to which they apply when a full Detail view is not necessary and or a lighter weight experience is desired. In an accordion style list, commands can be nested within a selected item and made visible when a user expands the item. A similar pattern can be applied to a tile interface. Tapping on a tile can reveal detail content and commands.

If your app allows users to insert content into a document, consider how users will use the inserted content when defining the format. Include a reference to your app such as a title and a link to the source content.

Dialogs take users out of their immersive experience and require explicit user interaction. They dim the app container and demand a user response before continuing. Use dialogs only when you intend to stop the user and to demand a response.

Use toasts to keep users informed about background processes and errors. Locate toasts towards the bottom of the app container.

Center loading indicators horizontally and vertically in the app container. Avoid overlapping the indicator with content below. Instead, hide any content when displaying the indicator.

In task pane apps, the title of the app appears above the pane, similar to other task panes in Office. The title does not appear in content apps. In mail apps, the title appears in small type on the app bar as a tab.

In task pane and content apps, a button with a left pointing arrow appears when the app has focus. This button is located in the top right corner of the app container. Tapping or clicking on this button triggers the app menu to appear. The menu contains information about the identity of the app and other app level commands.

In all types of apps that run within Office, an icon appears in the top left corner when there is an error or status message to display. When a user taps or clicks on the icon, the message appears within a box that extends to the full width of the pane, covering any UI or content contained with the app window.

Users will more easily understand the content and interactions that your app enables by following a consistent pattern for margins, gutters, positioning of common UI, and padding between groups and elements. A consistent silhouette will limit distractions and help users focus on the experience.

Segoe UI is the signature user interface font for Office 2013 and Windows 8 and is the recommended font for apps. The recommended sizes below are designed to align with Office 2013 applications. Use scale in typography to create hierarchy. Use no more than three font sizes in one view and be sure that the font sizes that you use are noticeably different in scale.

Tag	Image	Font-family	Font-size	Font-weight
H1		Segoe UI Light	26px	lighter
H2		Segoe UI Light	18px	lighter
H3		Segoe UI	12px	600
Body		Segoe UI	12px	normal
Links within app		Segoe UI	12px	normal
Links to outside of app		Segoe UI	12px	normal
Tabs		Segoe UI	12px	normal
Controls, labels		Segoe UI	12px	normal
Buttons		Segoe UI	12px	normal

Use color meaningfully and consistently in your app. If you use color to denote actionable items such as navigation, links, and buttons, be careful not to use the same color for items that are not actionable. If you use color to emphasize headings, be consistent with this throughout your app.

Ensure that color is accessible. When using color for text or white text on a color background, ensure that your colors have enough contrast to meet accessibility guidelines (a 4.5:1 contrast ratio).

Default text
Text used for navigation and links within an app
Links that open a browser
Glyphs/icons
Border colors on input and button controls
Background colorHorizontal rules/separators

Color themes for mail apps

Outlook and Outlook Web App support color themes that enable users to change the color to a theme of their choice. If you use the theme colors (and appropriate CSS), you can ensure that your app matches the color palette for each theme. By using theme colors, you can make your app feel more integrated into the software and be visually consistent with of the overall user experience of these applications.

An example of a simple and effective color palette that uses a primary, secondary and background color is shown below:

Primary blue Navigation bar, hero elements, text links
Secondary blue Accent color
Light 1 Background theme color

Use icons or glyphs for buttons when the command is used often since the user is more likely to learn the meaning of the graphic through repeated use. Use icons or glyphs for common commands such as a gear for settings or a question mark for help. For commands that receive occasional use, use buttons with text labels or glyphs with text labels.

Usage	Graphic
Within or adjacent to a search box
Links to a settings page
Use where items in a tab menu are truncated
Indicates that there are options
Loading graphic
Dismisses a dialog or toast message
Back button when a simple text string is not sufficient

The app container contains a built-in border to denote the app contents. Your app should not contain an additional border. Use borders throughout your app sparingly to separate content. A good guide for when to use borders is "if it's not necessary, don’t add one."

When possible, avoid adding backgrounds. Image backgrounds are considered noise if they are not part of the content a user needs to consume. To create structure, use solid backgrounds of light grays, but only when necessary.

Place brand logo and title towards the top of the container in task pane and content apps. Align this content to the left unless a centered layout is a strong component of your brands visual identity. In mail apps, place logo in the top right corner of the app and reserve the top left for important navigation and messaging.