Microsoft Office 12 Interface Design

by Luke Wroblewski September 21, 2005

Since Office 12 was previewed at the Microsoft Professional Developer Conference last week, the Microsoft Office User Experience team has been doing a great job documenting the design decisions behind Office 12’s user interface design changes.

Though probably not a surprise to anyone, the primary reason for what Microsoft is calling “the most dramatic change to the way Office applications work since introduction of the toolbar in 1997” turns out to be feature-creep.

“Over time, as we’ve added more and more features, it’s gotten harder for users to find the things they want to do with the product.” - Julie Larson-Green, Office User Experience Program Manager

Design Principles

In order to account for ever-increasing features, several design principles that enable long-term scalability underlie the new Office UI: a focus on results, a streamlined approach, and an emphasis on context.

Focus on Results

“We set about rethinking the UI from the user’s perspective, which is ‘results-oriented,’ rather than from the developer’s perspective, which tends to be ‘feature-oriented’ or ‘command-oriented’ – thereby enabling people to focus on what they want to do rather than on how they do it.”

This focus on results mirrors aspects of the Activity Centered Design process recently advocated by Don Norman:

“The methods of HCD seem centered around static understanding of each set of controls, each screen on an electronic display. But as a result, the sequential operations of activities are often ill supported.” –Human-Centered Design Considered Harmful

A Streamlined Approach

“To streamline means having the UI generally be much less intrusive –without popping things up over the top of where you’re trying to work, without toolbars appearing because you inserted a picture, and without task panes coming up automatically.”

There are many times you can “open a new window” to present additional functionality to users. That doesn’t necessarily mean you should.

“By making it context-driven, only the more relevant features are visible, which also makes it easier for the user to understand what the product’s capabilities are.”

Context provides information about: where you are situated within content (the information and activities that constitute an interactive system), the various relationships between content, and a big picture (macro view) of the information/interaction space.

Interface Features

Many new interface features are included in Office 12 to support the design principles outlined above.

The Ribbon

  • A strip across the top of the window that exposes what the program can do. Billed as “the one and only place to look for functionality”.
  • The ribbon’s default contents are based on customer data outlining what features are used most frequently and how often they’re used.
  • Commands can look like a toolbar, a menu, a dialog box, or even a web page.
  • Primary & Secondary actions- key functionality can have large buttons, while supporting functions have smaller, grouped controls.
  • Every command is labeled “because most people don't click on an unlabeled 16x16 icon”.
  • The Ribbon is designed to be predictable –“every command has a place, and that place doesn't change”.

Contextual Tabs

  • Object specific controls within the ribbon.
  • Contain “all the features you need for working with a selected object”.
  • When you deselect an object, the contextual tabs go away because “all of the commands would have otherwise been disabled”.

Galleries

  • Galleries give you a visual representation of the kinds of formatting choices you can make in your document.
  • Present the likely result the user is looking for first, and then exposing the individual advanced commands secondarily aka present the functionality in your program at a slightly higher level.(http://blogs.msdn.com/jensenh/archive/2005/09/21/471696.aspx)

Super Tooltips

  • Integrated Help tips that provide quick access to information about a command directly from the command’s location in the ribbon.

Quick Launch Toolbar

  • Allows you to customize the UI by adding as many commands as you like to a toolbar.

Floatie

  • A formatting tool that presents the most common text formatting features on a tool panel that “floats” over the selected text
  • “Improves formatting efficiency by eliminating mouse trips to the command area”.

Further Reading