UX building blocks for apps for Office

apps for Office

Learn about the UX building blocks for apps for Office, such as tabs, buttons, dialogs, and toasts. Read guidelines for using search and how to best navigate and present content in your apps. Also, learn about where built-in UI (the title, app menu, and status/error messages) is displayed, so that you can design your app to account for them.

Last modified: February 27, 2014

Applies to: Access app for SharePoint | Excel 2013 | Excel 2013 RT | Excel 2013 SP1 | Excel Online | Outlook 2013 | Outlook 2013 RT | Outlook 2013 SP1 | Outlook Web App | OWA for Devices | PowerPoint 2013 | PowerPoint 2013 RT | PowerPoint 2013 SP1 | PowerPoint Online | Project 2013 | Project 2013 SP1 | Word 2013 | Word 2013 RT | Word 2013 SP1

In this article
Building blocks
Tabs
Search
Lists
Scrolling and paging
Detail views
Displaying text
Commands (buttons and links)
Contextual UI
Inserted content
Dialogs
Toasts for notifications and errors
Loading animations
Built-in app UI

Organize the content in your app so users can navigate quickly and intuitively. Using the right navigation pattern for your app helps users focus on your app's tasks and the content it provides. Extraneous UI and navigation gets in the way and distracts users. Avoid too many levels of navigation and maintain relatively flat content structures.

Filter and organize content in your app with tabs.

Task pane app with truncated tabs

Task pane app with truncated tabs
  • Make sure that tabs never wrap – truncate them instead. Provide a drop-down menu to access the truncated tabs.

  • Align the most important tabs the left, so they are less likely to be cut off.

Mail app with header separating tabs from the app bar

Mail app with header separating tabs from the app
  • The app bar in Outlook already uses tabs to navigate between multiple apps, so avoid placing another row of tabs directly below it.

Users can quickly locate content in your app with search.

Search with live results in a task pane app

Task pane app showing live results
Search box in a mail app

Search box in a mail app
  • Put the search box in a prominent location to make clear that search is the primary way for finding content.

  • Depending on your app, it may be helpful to provide default content.

  • Consider displaying live search results as a user types.

Items displayed in lists typically link to Detail views.

List with tabs for filtering content

List with tabs for filtering content
List with a "See more" link

List with a "See more" link
  • Provide tabs for filtering the listed content.

  • Group listed items into sub-groups with headers.

  • Consider what the default ordering and number of items displayed should be and how users retrieve more items.

Mail app with a list reflowing into 3 columns as the app window is widened

Mail app showing a list reflowing into 3 columns a
  • Use lists in the horizontal window of mail apps, but use multiple columns to take advantage of the available horizontal space.

When you design your app to scale and adapt to varying container dimensions and proportions, make sure that critical UI elements, such as brand, navigation and important action buttons, can't scroll out of view.

Carousel-style mail app with left and right arrows for navigation

Carousel-style mail app with left and right arrows
Task pane app with a header and a scrollable content area

Task pane app with a header and a scrollable conte
Mail app with paging UI for navigating through a list

Mail app with paging UI for navigating through a l
  • Avoid horizontal scroll bars. Instead, provide UI that lets users page through content.

When you display detail views, focus the user’s attention on the selected content and provide a lightweight button or link for returning to the previous view. Avoid using bread crumb trails.

Detail page in a task pane app

Detail page in a task pane app
  • In task pane apps, place the back button on a separate row above the header.

Mail app with a list that shows detail when you select an item

Mail app with a list showing the selected item alo
Detail page in a mail app

Detail page in a mail app
  • In mail apps, place the back button on the same row as the header.

Task pane app with scrollable text area

Task pane app with scrollable text area
  • In narrow content and task pane apps, display text in a single scrollable vertical column.

Mail app with two columns of text and paging UI

Mail app with two columns of text and paging UI
  • In horizontal apps, avoid wide columns of text that are difficult to read. Instead, break text into more columns and provide controls for paging through the text.

Displaying a large text document with collapsible sub-sections

Showing a large text document with collapsible sub
  • Large bodies of text with sub-sections can be collapsed by sub-section.

Consider the footer the primary command surface for task pane, content, and mail apps. When using a footer in your layout, make sure that important commands can't scroll out of view.

Task pane app with command located in footer

Task pane app with command located in footer
Detail View with an Insert button located in footer

Detail View with an Insert button located in foote
Mail app with a command located in footer

Mail app with a command located in footer
  • Group and align commands to the left or right edge of the app window.

Text with inline command

Text with inline command
  • When you don't need a full detail view or want a lighter weight experience, put commands next to the content they apply to.

Contextual command nested within an expanded list item

Contextual command nested within an expanded list
  • In an accordion style list, you can nest commands within a selected item and make them visible when a user expands the item.

Contextual command nested within a selected tile

Contextual command nested within a selected tile
  • Use a similar design pattern with a tile interface - tapping a tile reveals detail content and commands.

If your app inserts content into a document, think about how it will be used when you define the content's format.

Inserted content with link and reference to its source

Showing inserted content with link and reference t
  • Include a reference to your app and a link to the source of the content.

Dialogs take users out of their immersive experience and require explicit user interaction. Use dialogs only when you need to stop the user and require a response.

Dialog in a task pane app

Dialog in a task pane app
Dialog in a content app

Dialog in a content app
Dialog in a mail app

Dialog in a mail app

Use toasts to keep users informed about background processes and errors.

Task pane app with toast appearing from the bottom of the app window

Task pane app with toast appearing from the bottom
Mail app with toast appearing from bottom of app window

Mail app with toast appearing from bottom of app w
  • Locate toasts towards the bottom of the app window.

Placement of a loading indicator

Showing the placement of a loading indicator
  • Center loading indicators horizontally and vertically in the app window.

  • Avoid overlapping the indicator with content below. Instead, hide any content when you display the indicator.

Three kinds of built-in app UI may overlap or obscure your app's UI when it's running in the context of an Office host application (Excel, Word, Outlook, PowerPoint, or Project):

  • The app title (only in task pane and mail apps)

  • The built-in app menu (only in task pane and content apps)

  • The app bar (only in mail apps) in Outlook already uses tabs to navigate between multiple apps, so avoid placing another row of tabs directly below it.

  • Status or error UI

When you design, implement, and test your app, be aware how these built-in app UI elements can affect your app's UI and content.

App title and app bar

In task pane apps, the title of the app appears above the pane, similar to other task panes in Office. The title doesn't appear in content apps.

In mail apps, the app bar appears above the message pane with one or more tabs used to activate apps. An app's title appears in small type on each tab in the app bar.

Use margins and padding to make sure your app's UI is distinct from the app title or app bar.

App menu

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

Task page app with app menu visible

Task page app with app menu visible

Status/Error UI

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

Task page app with status icon

Task page app with status icon
Content app with status icon

Content app with status icon
Task pane app with visible status message

Task pane app with visible status message
Mail app with status icon

Mail app with status icon
Show:
© 2014 Microsoft