Apps for Office and SharePoint UX guidelines
Published: July 16, 2012
This document is intended to introduce developers of apps for Office and SharePoint to a recommended design process, as well as to basic guidelines for developing quality user experiences.
Applies to: apps for Office | apps for SharePoint | Office 2013 | Office 365 | SharePoint Foundation 2013 | SharePoint Server 2013
An "app" is a specific term that users understand to mean a focused solution to their problem. Users don’t expect apps to do everything in a merely acceptable way: they expect apps to do one or a handful of things perfectly, and well-designed apps will be specialized in solving a particular problem end-to-end.
Apps take various shapes and have different capabilities depending on where they’re being used. An app for Office is essentially a webpage that can be hosted inside an Office application to provide extended content or functionality within a document, hosted in a task pane that is associated with the client application, or activated contextually in an email message. An app for SharePoint has a fully immersive experience, as well as the ability to tie into experiences in the main SharePoint site, such as in menus or by providing embeddable parts for other pages.
After you develop and publish your App, it will be available to consumers in the marketplace.
This topic discusses high-level principles that span Office and SharePoint. For application-specific guidelines, see the following:
This guide is for app designers and for app developers who need guidance on how to structure the user interaction model of their apps for Office and SharePoint. This guide gives you the necessary information to enable you to make the best user-experience design decisions you possibly can. Your real goal should be to create an app experience that enables users to fulfill the scenarios that you intend for them to accomplish.
Spend time up front thinking about end users and how they navigate through the user interface of your app. Be sure to think through the usage scenarios and do some preliminary sketches that show how you want your app to be laid out. Remember that design is an iterative process and the more you’re willing to test and refine your designs the better your app will be.
Your app should help people get their task done as quickly and effortlessly as possible, empowering them to be productive and successful.
Pride in craftsmanship
Devote time and energy to small things that are seen often by many of your users, and engineer the experience to be complete and polished at every stage.
Sweat the details.
Make using apps safe and reliable.
Use balance, symmetry, and hierarchy to foster trust and a sense of integrity.
Always remember how users will access your app, and design the right experience for that scenario.
When necessary, design a separate experience for different interaction models, such as when your app is accessed through the desktop machine versus through a phone.
Do more with less
You can do more with less by reducing your design to its essence, and solving for distractions, not discoverability. Create a clean and purposeful experience by leaving only the most relevant elements on screen so people can be immersed in the content. Choose a limited number of problems to solve, and solve them completely.
Be great at something instead of mediocre at many things.
Put content before chrome.
Be visually focused and direct, letting people get immersed in what they love, and they will explore the rest.
Inspire confidence in users.
Be fast and fluid
Let people interact directly with content, and respond to actions quickly with matching energy. Bring life to the experience by creating a sense of continuity and telling a story through meaningful use of motion.
Be responsive to user interaction and ready for the next interaction.
Design for touch and intuitive interaction.
Delight your users with motion.
Create a UI that is immersive and compelling.
Keep your interaction model consistent and easy to learn.
Inform users about background processes and errors when necessary.
Store user settings and state.
Be authentically digital
Take full advantage of the digital medium. Remove physical boundaries to create experiences that are more efficient and effortless than reality. Being authentically digital means embracing the fact that apps are pixels on a screen and designing with colors and images that go beyond the limits of the real world.
Connect to the cloud so that your users can stay connected to each other.
Be dynamic and alive with communication.
Use typography beautifully.
Use bold, vibrant colors.
Use motion meaningfully.
Embrace the platform
Use UI features that take advantage of what people already know, such as standard touch gestures and icons, to provide a sense of familiarity, control, and confidence. Remember that users interact with your app in the context of another application, so aligning to the existing interaction models and controls will help users be more successful with your app.
Fit into the UI model.
Put common UI elements in consistent places.
Reduce redundancy in your UI.
Use our tools and templates to promote consistency.
Design for touch devices
Desktop and tablet are alike in that that they often share the most common screen resolution (1024 x 800). Therefore, the UI designed for desktop should in many cases work without modification on a tablet device. Tablet devices, however, use touch as the primary input mechanism, rather than a physical keyboard and a mouse. This has several implications:
Hit targets on a tablet need to be bigger overall, because they have to work well with a pointing device that is far less precise than a mouse cursor: namely, one's finger. Although it might be tempting to design the UI specifically for desktop and assume it's just going to work on tablet, the tablet UI should actually not be an afterthought. The good news is that the UI designed for tablet computers can usually work pretty well with a mouse, too.
On a tablet device, the on-screen keyboard can cover a large part of the screen. This should be taken into consideration when selecting the desired height of an app for Office or SharePoint that will use keyboard input.
Some common controls do not work well on a tablet device. For example, the standard Microsoft Windows date picker really only works with a mouse and keyboard. On tablet devices, alternative versions of such controls should be used.
Smartphones are even more challenging than tablets because of the very limited screen size they provide. The UI for an app for Office and SharePoint on the smartphone should be designed specifically for the smartphone; desktop and tablet UI will almost never scale down well.
Observe the following guidelines when developing apps for various form factors.
Share a UI for tablet and desktop, if possible. Be sure that hit targets (for example, buttons) are big enough for touch input.
Use appropriate controls on different form factors.
Explicitly design for smartphone. Consider creating a simplified version of your app for Office to provide a good experience.
Avoid using desktop or tablet UI on smartphones.
Now that you have a general understanding of the shared principles for designing apps, you can dive right into understanding the design guidelines and UX patterns at a deeper level. If you are building an app for Office, make sure to read Apps for Office UX design guidelines, and if you are building an app for SharePoint you will want to make sure to see Apps for SharePoint UX design guidelines.
July 16, 2012