Mythbusters: The Office 12 New UI

Although the amount of attention being paid to the new UI in news reports and especially the blogosphere has amazed even us, the quality and depth of the commentary varies widely.  (Not surprising, considering very few people will have a build to play with until beta 1.)  And, as can be expected with anything Microsoft announces, the conspiracy theorists are out in force, especially surrounding the visual appearance of the new UI.


So today, I want to focus on clearing up three of the top myths I've seen pop up in news reports, blogs, and comments around the web.

  • The New UI Tries To Automatically Guess What I Want To Do Next!
  • The Visual Design of the Ribbon is Stolen From Mac OS X!
  • The Ribbon is Huge!


The New UI Tries To Automatically Guess What I Want To Do Next


There was a wire report that was picked up by a gazillion news outlets, including MSN Money.  The title of the wire article was "Microsoft: Office 12 to Anticipate Needs" and, of course, many news outlets just left it as the wire wrote it.


While this seems like a harmless enough title, people started picking up on it without watching our movie or even viewing the screenshots and condemning us for creating "more meddlesome Auto-UI."  One blogger wrote that the new "Automatic UI" would be just like "Clippy 2005."


The reality of the situation is actually exactly the opposite.  We looked into all kinds of different interaction design models several years ago when we started this process.  Some of them explored the notion of trying to have an even more automatic "auto-customizing" UI that was constantly re-optimizing itself based on usage.  The result was as you might guess: unpredictable, unreliable, and meddlesome.


In August of 2003, I sat down and wrote a little document called something like "Thoughts on a Positive New UI."  This eventually morphed into a set of design tenets our team uses to evaluate design decisions.  One of the key tenets was: "No Automatic UI.  Prefer predictable, consistent, and human-designed over clever and auto-optimized."  Written in big letters: "Help People Work Without Interference."


The Ribbon is designed to be predictable.  Every command has a place, and that place doesn't change.  There a finite search space for functionality and a straightforward way to browse it.  Any panes or windows or other interfering interface elements only come up when you summon them.


Work without interference.   It's a way of life for us.  Myth: Busted.



The Visual Design of the Ribbon is Stolen From Mac OS X!


As screenshots first appeared, some users and news outlets breathlessly pointed out perceived similarities between the screenshots we posted and Mac OS X.  Specifically, there's a blue rectangle that some people think looks like a Mac OS button and a gray gradient some people think looks like brushed metal.  I won't argue whether or not these two rectangles look like Mac OS X or not.


The important point to take away is: The visual look and feel you are seeing in the screenshots is not what we intend to ship.   Keep in mind is that this is the earliest we've ever shared detailed information or screenshots of an Office release.  We're still months away from even beta 1!


One of the ways we structure our engineering of Office is such that we're often done doing most of the coding before we have the full set of production visuals finished.  It takes a lot of money and time for our design team to coordinate the creation of thousands of visual elements necessary for a full production skin.  So, what we do is define the structural requirements of the visual design ahead of time--things such as "we need a 9-grid bitmap with three different states behind this button" or "we'll need a stretched tiled vector image behind this surface".  Then, in order to test the code behind the visuals, we create some temporary artwork that allows our test and development teams to make sure all the drawing code works as it should.


In the meantime, as we start to finalize the interaction design, we work to create the actual visual skin so that they fit "hand in glove" together and complement one another.  That's a process that has just about finished up, and we're now starting to make the actual production artwork.


The long and short of it is: what you're seeing now is just temporary artwork and doesn't share the visual look and feel we intend for the final product.  What you can focus on is the interaction design: the controls, concepts, and way of working with the product.  That is a piece we're ready to start getting feedback on.


Having a temporary skin is a routine part of how we engineer software at Microsoft--you probably saw the "Slate" theme early in Windows Vista, and may remember that the final skins for Windows XP ("Luna") and Office 2003 both showed up close to shipping the product.


So what does the final skin look like?   Not telling, but I think it looks great and it certainly won't be confused with Mac OS X. :)  Myth: Busted.



The Ribbon is Huge!


This last myth is hard to bust outright, because "huge" is a subjective concept.  But I can share with you some data we looked at that helped to convince us that the space taken up by the Ribbon was reasonable.

(click to enlarge)


One way to evaluate the size of a user interface is as a percentage of the total available screen space taken up by the UI.  We always consider and design for what will be the most common screen resolution when a given version of Office is in the marketplace.


So, we can evaluate a UI's "hugeness" by doing some quick calculations.  Let's start with Word 2.0, the first release to have the exact same basic menu and toolbar structure as Word 2003.  (Note, in all calculations I exclude the title bar from work area.)


   Word 2.0

   Common work area available: 640x460 = 294,400 pixels

   UI space taken by Word: 640x72 = 46,080 pixels

   % of total work space taken by UI : 15.6% of available space 


I ran these same calculations for major past versions of Word and also for Word "12".  Here's a summary of the results:

  • Word 2.0 (640x480): 15.6%
  • Word 97 (800x600): 13.6%
  • Word 2003 (Task Pane on, 1024x768): 26.4%
  • Word 2003 (Task Pane off, 1024x768): 10.2%
  • Word "12" (1024x768): 13.6%
  • Word "12" (1280x1024): 10.1%

As you can see, I did the numbers for both Word 2003 "out-of-the-box" (with the Task Pane on) as well as if you turned it off (which would mean that you can't use any of the many features available only in the Task Pane.)  Also, note that I did the Word "12" numbers both for 1024x768 and for the next common screen size, 1280x1024.


There are a number of different ways you can draw conclusions from this data.  One might be to note that, even if you're pessimistic about the most common screen size ever going above 1024x768, Word "12" takes no more relative space than perhaps the most popular version of Word ever, Word 97.  However, if you do look at the marketplace and conclude that a lot of people are buying LCD flat panels capable of at least 1280x1024 and that will be a common resolution among Office users in 2006-2007 (and beyond), then you might notice that Word "12" takes the least amount of relative space we've even taken.  (Through our Customer Experience Improvement Program data, we know that even now in 2005, 1280x1024 and up is a very sizable percentage of Office users.)


Or, you might look at the data this way: for an out-of-the-box 1024x768 Word 2003 user, Word "12" represents nearly a 13% improvement in available screen size.  Because we moved nearly all of the Task Pane functionality into the Ribbon, it is no longer taking up valuable space.


Another thought: When we looked at the proliferation of Task Panes built over the last few versions of Office, it became clear to us that Office "12" would have been adding probably around another 100 Task Panes if we hadn't re-done the UI.  This means that if you had bought a fictitious non-Ribbon Office "12", chances are it would have been for the new features, which would have very likely required the Task Pane and taken a much larger amount of space than the Ribbon we built instead.


Probably the most straightforward way to look at the data is simply this: over the lifetime of Word, we've usually taken between 10% and 15% of the commonly available space for our UI.  As screens have gotten larger, so too has Office become more and more rich and, as well, the UI needed to take advantage of it.  I guess Moore's Law is behind this somehow...


We really do look at the Ribbon as the way to minimize the amount of space we take for the UI.  How?  Because the Ribbon is a one-time tax.  Unlike previous UI, the Ribbon does everything: no other pieces are required in order to use Pictures or Tables or to draw on or review a document, or to get a Word Count.  The UI is a stable force on the screen.


So, you can draw your own conclusion from the data about whether you think the size of the Ribbon is appropriate.  But to call it "huge" or "oversized" based on the history of Office seems unjustified.


Myth: Busted!