Designing great apps for Office and SharePoint
This article is brought to you by Elisabeth Olson and Russell Palmer, Program Managers in Office and SharePoint.
Apps are the new cool thing in Office and SharePoint, and we’re already seeing a lot of excitement around them. We want to make sure you get started in the right direction, so here are some top-level things you should think about when designing and developing your own apps.
First of all, an “app” is a focused solution to a problem. Users don’t want a Swiss Army knife–type application with a bunch of possible permutations and configurations they have to understand—they want something that does one or two things, but does them very well. They don’t want to mess with settings—they just want to get their work done, as quickly and as effortlessly as possible.
When you get right down to it, designing a fantastic app isn’t really different from designing any other software product—you need to understand the problem you’re trying to solve and understand your users, you need to develop scenarios, and most importantly, you need to usability test and iterate on your design at each stage of the development process. Elaborate usability tests aren’t necessary, but it’s important to get your app in front of people who weren’t intimately familiar with creating it and validate that it works for them. When you’ve been neck-deep in development, it’s easy to miss the things that will trip up users who don’t understand how your app is put together.
While you’re developing, you might also want to keep in mind the same design principles that we used when developing Office and SharePoint. These are outlined in more detail in the documentation links below, but here they are at a high level:
Have pride in craftsmanship
Make your experience as complete and polished as possible, paying attention to small details.
- Following the guideline: consistent use of typography, pixel-perfect alignment of user interface (UI) elements
- Ignoring the guideline: using inconsistent padding for similar elements
Do more with less
Don’t try to do everything, but do a few things very well.
- Following the guideline: on the first use of your app, a user is quickly successful at getting the job done
- Ignoring the guideline: the first experience users have with your app requires them to choose between multiple settings options
Be fast and fluid
Your UI should always be responsive and provide feedback to users.
- Following the guideline: if an action takes more than 500ms, show the user progress UI
- Ignoring the guideline: blocking the UI while processing a user action
Be authentically digital
Embrace the fact that you’re using pixels, and go beyond what’s possible in the real world.
- Following the guideline: using animation to draw the user’s attention to the correct objects
- Ignoring the guideline: using backgrounds to simulate physical textures like wood grain
Embrace the platform
Use the tools and templates we provide to fit into the context where your app will be seen.
- Following the guideline: using the default CSS styles in apps for SharePoint
- Ignoring the guideline: using your own CSS to mimic existing styling
Design for touch devices
Touch is an important and growing piece of the user base, so make sure your design works on tablets, and consider designing specialized UI for mobile devices.
- Following the guideline: having a special rendering mode in your UI for mobile devices
- Ignoring the guideline: using small, closely spaced hit targets that are hard to use on a tablet
We could fill pages with more specific guidance, but we wanted to keep this post relatively short. Luckily, we’ve already published lots of UX guidance on MSDN (direct links at the end of this post), so you can drill into those if you’re interested. Let us know what you like, and what you want to see more of—we’re always looking for more ways to help you out.
Thanks for reading,
Elisabeth and Russell
For more information, check out the following links:
Apps for Office and SharePoint UX guidelines