Thoughts on the Office 12 UI

The next version of Office, which got previewed this week at the PDC, features a radically different user interface. Given that most people seem to spend a lot of their tube time in the Office suite, these applications’ UIs have a big influence on their expectations of how software is supposed to behave. I think it’s important for us as web designers to examine the new Office UI to try to understand and anticipate its effects on our work.

Before getting into it, I recommend you watch the demo that Robert Scoble taped with Julie Larson Green, who runs the team that did the UI research. If you’ve only seen the screenshots, please go ahead and download the video (I know, it’s huge); the screenshots alone don’t do the software justice.

[It’s worth noting that Microsoft is doing an amazing job of being open with their customers about these new product developments. Scoble’s interviewing style is extremely personable and hands-on; it takes great courage for a company to be this open to the outside world. This approach is especially commendable when compared to Apple’s secretive — and litigious — attitude towards products in development.]

So, on to the new UI: the most notable change is the total erradication of the traditional drop-down menus in favor of a website-like “tabbed” design. The tabs reveal functional items in groups presented on a “ribbon” above the document itself. The new UI seems to be all about context: the ribbon presents only those functions that are relevant to what the user is trying to accomplish at any given moment, with the tabs functioning as filters that narrow down the choices that are available. Items on the ribbon are represented with icons of varying sizes, shapes, and colors. The new graphics engine previews the effects of the user’s actions instantaneously when he or she hovers over some of these icons.

There’s also a new type of toolbar (Julie called it a “floaty”) that shows up next to selected text, and presents buttons for the things you can do to it (make it bold, italic, etc.) I’m used to keyboard commands for this type of thing, but for most folks the floaty will eliminate the need to mouse up to the top of the screen to click on the bold / italic / underline / etc. buttons. (It’s worth noting that the floaty’s opacity is related to its proximity to the pointer: the farther away you move, the more transparent it becomes. Cool!)

While watching the demo, I kept thinking: what would my dad make of this? Dad, who is in his early 60s, is a regular non-techie computer user. He only uses email (Outlook), Word, and Excel, and tries to not toy too much with the computer lest he make a catastrophic mistake. He has no need / use for most of the features in Office, and is bewildered by some of the more advanced functions in these apps. I bet he’d feel less intimidated by Office 12 than he does now, and would probably be more willing to experiment: he’d have all of the options laid out in front of him in a visual and logical way. He’d also be likely to produce more attractive documents.

However, he would probably run into trouble after a while when trying to use an application that is not part of the Office suite. When they arrive in stores (hopefully) late next year, the Office 12 apps will probably be the only Windows applications sporting this new tab / ribbon metaphor. For new users, it’s going to be somewhat bewildering to have to go from an app like Word 12 to a third party app with its traditional drop-down menus. I wonder if most apps lend themselves to this type of UI treatment?

Office 12 seems to be the latest example of a new trend in UI design: a move away from consistency between apps. Apple has been doing it for some time now (that damned brushed metal look, the new iTunes, etc.) Now Microsoft seems to be doing it too. (I think that the Microsoft teams have much better reasons to screw around with their UIs than Apple.) Something important is being lost by sacrificing consistency: learnability. If each new app will sport a new metaphor, we are going to have spend more time learning to use each of them.

The problem of inconsistency even seems to plague the new Office itself. When asked about the new Outlook, Julie explains (somewhat apologetically) that its UI hasn’t changed as much because Outlook is not document-based. Except, of course, for the writing or reading of messages. Which is why the new Outlook uses the tab / ribbon UI for reading and writing email, but uses the old-style drop-down menus for everything else. What would my dad make of this? (Where did the ribbon go? Why don’t these menu items behave like the tabs they kinda look like?)

On another note, what will happen when other software developers — whose UI research labs will probably lack Microsoft-sized budgets — start aping this new approach? Will Microsoft develop a new set of guidelines for document-based like Word and Excel, or is the expectation that the Office UI will be a one-off in the Windows world? Who’s gonna draw the line?

This shift towards inconsistent apps is probably encouraged by the plethora of UIs that exist on the web. Users have become accustomed to websites that have slightly different navigation schemes, even while some UI elements have become somewhat standardized (eg. the placement of the site logo on the upper left corner of the page). As web designers, we are encouraged to be original in our site designs. Apple’s widgets and Microsoft’s new copycat “gadgets” are clearly web-inspired, and encourage UI originality in their design. This trend seems to open possibilities for web application developers to lose any OS UI-based inhibitions in favor of interfaces that function more honestly and usably within their own contexts and functions.

I look forward to seeing Office 12 in action; the new UI seems like an improvement for most Office users. It also presages — for better or worse — a new era in application UI design in which anything goes.