UX design patterns for Office Add-ins
When designing Office Add-ins, the UX design of your add-in should provide compelling experiences that extend Office. For example, your add-in should provide a first-run experience, a first-class UX experience, and smooth transitions between pages, among other things. Providing a clean, modern UX experience increases user retention and adoption of your add-in. This repo has UX resources for developers that implement:
- Common UX design patterns based on best practices.
- Office Fabric components and styles.
- Add-ins that look like a natural extension of the default Office UI.
For overview information and the types of UX design patterns available, see UX design pattern templates for Office Add-ins.
Important: After customizing these design patterns to meet your requirements, be sure to test your add-in on all platforms where your add-in will be available. These UX design patterns were tested using Office 2016 and Windows 10.
Using the UX design patterns
- Clone this repo.
- Copy the assets folder, and the code folder for the individual pattern you choose to your add-in project.
- Incorporate the individual pattern into your add-in. For example:
- Edit the source location or add-in command URL in the manifest.
- Use the UX design pattern as a template for other pages.
- Link to or from the UX design pattern.
- Resolution: Ensure you add these files to an Office add-in project.
- After converting these design patterns to a Single Page App (SPA), all sections of the HTML page become top-aligned and overlaps each other.
- Resolution: When converting from HTML additional wrapper DIVs may be added. Ensure that the height of these additional DIVs are reset properly. For example, if a parent DIV is set to a height of 100%, a child DIV has no height, and a grandchild DIV is set to 100%, you need to set the child DIV to 100% to layout the sections properly.
- Best practices for developing Office Add-ins
- Office UI Fabric. This project uses version 2.1.0 or higher.
Copyright (c) Microsoft Corporation 2016. All rights reserved.