Microsoft (MSFT) Shows How Office for iPad was Designed

Microsoft (NASDAQ: MSFT) group program manager and design manager for Office for iPad, Han-Yi Shaw, posted the following to the company's official Office blog on Thursday:

Hello once again from the Office for iPad team. We’ve hit a great milestone with over 27 million downloads of Office for iPad and we would like to say thank you to everyone who has tried out the apps and provided feedback to help us continually improve Office for you. Today we want to give you a behind-the-scenes look at the design and creative journey we took as we reimagined Office from the ground up for iPad.

From its inception, the Office for iPad project has been a blend of imagination and passion. When we had our first tantalizing glimpse of the iPad, we were intrigued by the huge opportunity ahead: enabling Office customers—over 1 billion around the globe—to rediscover the power of mobile productivity in new and exciting ways.

A scenario-driven design approach

Over the past few years, touch-enabled devices have changed the way we engage with technology, but the promise of mobile productivity had yet to be fully realized. Mobile productivity is about getting things done, no matter where you are, so we began by taking a deep look into how people—including ourselves—aspired to use mobile devices to get work done. We identified several key mobile scenarios that people said they wanted and needed to do most on their iPads. At a high-level, these included:

• Packing up for the ride home
• Starting from scratch
• Last minute scramble
• Buttoning things up
• Collaborating with coworkers
• Taking notes

By taking a scenario-driven approach, we made our starting point “designing for iPad” as opposed to “porting to iPad.” As the world’s most powerful productivity suite, Office has tremendous breadth and depth, but we knew that bringing over hundreds of Office commands, toolbars, and dialogs to the iPad would be, simply put, a mistake. A key measure of success for productivity software is: how productive are the users who are using this software? This means offering the right set of features appropriate for the device. The mobile scenarios we identified served as important criteria for our decisions about what goes in, what gets left out, and what has yet to be invented for Office for the iPad.

Based on these mobile scenarios, here are a few examples of what we put in. We included the top-most editing commands and one-tap visual galleries for instant and beautiful results that do not require repetitive steps. We included designer templates so your documents are beautiful and professional from the get go. And we also included best-of-breed track changes in Word and reviewing comments across all the applications. And, to help you take great notes, we included a significantly updated OneNote on iPad.

What we left out was based on these mobile productivity scenarios, too. For example, creating unweighted cross-tabulations with PivotTables on your way to work or adding cross-references to masterpieces like War and Peace on the commute home is not how most users use their iPads. The scenarios helped us focus our energy on the tasks that mattered most for the first release—and it was liberating!

So whether you’re reading through documents on your evening commute, putting the final touches on your way to your big presentation, taking notes in class, co-authoring documents with others, or hitting that fast-approaching deadline (such as for this blog post!), Office for iPad offers the tools that will get you there with the quickest and best results.

User experience goals—unmistakably Office, optimized for iOS 7

While the mobile productivity scenarios above helped us define the “What,” we also wanted to nail the “How.” When we looked at how people were using existing productivity solutions on the iPad, we observed that many users found themselves being “perpetual beginners.” This means they found themselves spending more time learning the product than actually using it, which of course is contrary to the goal of productivity. So when it came to defining our user experience goals, it was important to us that users could just pick up our product and get started right away. With that in mind, our user experience goals were:

• Familiar Office experience, with no learning curve
• Unmistakably Office, optimized for iPad
• Immersive and removes distractions
• Document content, not UI, takes center stage
• Experience is always beautiful, fast, and fluid

The purpose of a familiar Office experience is simple: a low learning curve and high user confidence. However, it’s just as important to strike a balance between “unmistakably Office” and “platform optimization,” which means optimizing for iOS platform conventions and touch-first user expectations. The most important, yet challenging, goal was finding the sweet spot between the essence of Office and iOS. Fortunately, since the Office for iPad and Mac team (formally known as the Macintosh Business Unit) is made up of Apple platform specialists, we were able to apply our deep knowledge of Apple platforms to the task.

Here’s how these user experience goals guided us in redesigning the Office Ribbon for iPad. We wanted the next-generation Ribbon for iPad to offer the familiarity of the desktop, but be touch-first and slate-optimized. Time and again, I stressed the need for it to be “no heavier than a feather.” To achieve its thin and light-weight appearance, we tucked the Ribbon inside the standard iOS navigation bar and included only a single row of commands. We designed it this way to let you easily browse the capabilities of Office, without requiring you to unearth features buried deep inside menus. We didn’t want to overwhelm users by showing all of the depth of Office all at once. Thanks to the Ribbon’s tab-based design, you—not the Office for iPad team—get to decide what you’d like to expose based on the task at hand. And, to enhance the Ribbon’s overall fluidity, responsiveness, and sense of direct manipulation, we added subtle animations.

We also added Quick Access commands to the left and right of the Ribbon, so you can access the most commonly used global commands—such as Undo, Redo, Search, and Share—without having to switch to a specific tab.

Another key aspect of the Ribbon for iPad is that it dynamically adapts to the constantly changing screen size and orientation, portrait or landscape. When space is constrained, Ribbon controls flow into popover menus with precise positioning. This ensures that the Ribbon for iPad is built for the future, because it can scale nicely with the evolving Office feature set and adapt to new screen sizes. The Ribbon can also be fully collapsed, so when you just want to read your document, the user interface (UI) is “out of sight, out of mind.”

Once the Ribbon and other basics of the suite-wide interface were defined, the designers and program managers across Word, Excel, PowerPoint, and OneNote worked closely together to incorporate application functionality into this suite-wide user experience framework. Throughout, we were also fine-tuning the core user interface elements to make sure they accommodated the rich yet highly diverse functionality across applications while maintaining suite-wide consistency. For example, Excel sheet tabs and OneNote section tabs reflect their distinctive app personality, but behave consistently when adding, naming, and scrolling through tabs.

Design principles

In addition to optimizing Office for iPad for touch, we also wanted the visual display to be refreshingly modern and beautiful. The Microsoft Modern Language and Apple’s iOS 7 design language share a common philosophy: a fierce reduction of complexity. This applies to the information architecture, but also to the visual language as well. With iOS 7’s more flexible theming capabilities, we were able to deliver the Unmistakably Microsoft, Optimized for iOS 7 experience we had intended. That meant stripping out extraneous detail and focusing on clear information hierarchy. Over the course of designing Office for iPad, if there was a visual treatment or text label that wasn’t absolutely necessary, we stripped it away. The result is a clear information hierarchy, where everything is more functional and efficient, yet still beautiful in its own right.

Signature design tenets from the Microsoft Modern Language include:

• Pride in craftsmanship
• Fast and fluid
• Do more with less
• Win as one

Each one of these tenets played an important role in our design process.

Pride in craftsmanship speaks to the belief that when there is attention to detail, customers notice. The level of craftsmanship is further elevated since every pixel and every movement we rendered on the screen was also Retina Display ready. The result is that Office for iPad offers the crispest text and graphics on any version of Office yet.

Fast and fluid. With four times more pixels to render, the crisp text and graphics we were after required deep engineering investments to ensure that the user experience remained fast and fluid. This was especially true in the motion department, for example, for things like the spreadsheet grid “scroll bounce” and gliding “cell selection animation” in Excel. To achieve the best performance, we leveraged Apple’s CoreAnimation APIs for UI animations; and the native Office AirSpace APIs for in-document animations.

Do more with less speaks to our belief that reduction is a creative act. We believe in “content over chrome,” meaning that the users’ documents should always take center stage, not the UI. Shading or drop shadows were reduced to a minimum—and available only to aid usability or convey hierarchal depth on iOS 7—while remaining “felt but not seen.”

Win as one is about Word, Excel, PowerPoint, and OneNote for iPad offering coherent experiences that work beautifully together. We didn’t just stop with our iPad offerings. Collectively, we applied these cohesive design qualities of the Microsoft Design Language to ensure that function and form work together to exceed expectations.

That’s the story of how we aspired to bring the gold standard of productivity to iPad, while setting a new standard for mobile productivity. I hope you enjoyed this journey of how we put Office at your fingertips—and I hope Office for iPad brings out your own creative touch.

You May Also Be Interested In

• Microsoft earnings: Will AI help Azure cloud revenue soar?
• Bristol-Myers Squibb (BMY) stock slips despite earnings beat
• Microsoft's (MSFT) next-quarter guidance may be 'prudent' - Jefferies