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 shipKeep 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: 640×460 = 294,400 pixels
   UI space taken by Word: 640×72 = 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 (640×480): 15.6%
  • Word 97 (800×600): 13.6%
  • Word 2003 (Task Pane on, 1024×768): 26.4%
  • Word 2003 (Task Pane off, 1024×768): 10.2%
  • Word “12” (1024×768): 13.6%
  • Word “12” (1280×1024): 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 1024×768 and for the next common screen size, 1280×1024.
 
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 1024×768, 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 1280×1024 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, 1280×1024 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 1024×768 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!
Comments (30)

  1. TC says:

    Nice info. The more info. you provide on internal design processes, the more we can see the thought process behind them; they don’t just happen by accident.

    Having said that, thank %^$%@# you are moving away from that *($%@#$in’ adaptive menu idea that surfaced in Office. That was the worst thought-out UI idea, that I have ever come across! "Hey, the user is getting too confident, let’s frig-around with all his menus, so he has to learn them again!"

  2. jensenh says:

    Down the road, I plan on discussing "Adaptive Menus" as part of a series about the history of Office UI. You are right that we’re moving away from that model in Office "12."

  3. anona says:

    A comment on speed? On the video, the UI behaves like a pig : when you click a menu option ; when you make a live preview of a very simple single page Word document.

    Start Office 97 again, and be ready for a shock.

  4. BlueJay says:

    I like that you can also turn on/off the ribbon. What I’d like to see beyond that is an "auto-hide" option that will show the ribbon when I move my mouse (or my pen on my tablet) up to the ribbon area. It looks GREAT! I can’t wait for beta 1.

  5. jensenh says:

    Our goal is to bring performance in-line with Office 2003.

    Also, Julie’s laptop is having problems. 🙂

  6. Technovia says:

    Since Microsoft gave PDC attendees the first look at Office 12, there’s been a slew of reports around the web accusing it of – you guessed it – stealing the interface from Apple. Jensen Harris, of the Office UI team,

  7. My laundry list of product/technology/features that I liked at PDC (based mostly on keynotes):

     …

  8. My laundry list of product/technology/features that I liked at PDC (based mostly on keynotes):

     …

  9. "Because we moved nearly all of the Task Pane functionality into the Ribbon, it is no longer taking up valuable space."

    What does this mean for existing Office solutions based around a taskpane? Will it be discontinued? Or supported for backwards-compatibility, but stick out like a sore thumb?

    Will existing Taskpane technologies (Smart Documents, VSTOv2, IBF) switch to working the ribbon, or will we have to convert solutions to RibbonX?

    I know it’s probably still early to tell, and being UX-focused your blog might not be the right place to get an answer to that, but I’d love to read a future article about the new Office APIs, or a pointer to an appropriate blog.

    Keep up the great posts. We’ve all got a great thirst for Office "12" information. (And you really must get a better codename than that. 🙂

  10. jensenh says:

    Regarding Task Panes… the programmable Task Pane (Document Actions) has gotten even better in Office 12. You can have multiple, independent programmable Task Panes.

    I’ll definitely be posting about developer opportunities in the new UI… stay patient, there’s a lot to cover. 🙂

  11. <i>You can have multiple, independent programmable Task Panes.</i>

    Is that exposed to VBA? How much of the new UI is exposed to VBA through the object model(s)?

  12. "Is that exposed to VBA? How much of the new UI is exposed to VBA through the object model(s)? "

    Which of course begs the questions we’ve all been dying to ask:

    Will Office "12", at long last, have a native managed API, or will we still be reduced to painful COM Interop from .NET apps?

  13. PatriotB says:

    "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."

    Such widely- and frequently-used programs as Office shouldn’t be "skinned." They should follow the OS’s UI guidelines as much as possible.

    When Office 95 came out, it was a perfect model citizen in Windows 95. Ever since that, however, Office has done more and more of its "own thing." Seeing the current screenshots of Office 12 and comparing them to both Windows XP and Vista–it doesn’t look right on either OS.

    I understand that the Ribbon UI is new and I think it’ll be great, from a functional perspective. But please, try to make the overall product fit in great with the OS.

  14. Mario Goebbels says:

    Not to rain on your parade, but the Office Techbeta 1 user interface looked almost exactly the same as in the final product. The thing that changed were the icons.

    And I actually like the current WIP style. If there’ll be an improved UI, I hope you’ll be keeping these glowy/glassy buttons, and make the window frame transparent when running on Vista.

  15. Andre says:

    Also, does every Office user have the Comments toolbar turned on? Yes, the Office 12 toolbar is indeed larger.

  16. Mario Goebbels says:

    I forgot to specify the version. I was talking about Office 2003.

  17. Dewi Morgan says:

    Is % screen area what’s important? I don’t feel it is. I get a larger, higher res screen so that I can window more efficiently, fitting more stuff on the screen at once, shrinking the size of the windows and the fonts while still having them legible. I don’t get a higher res screen just so that you can gobble up more of it.

    Word 2.0 (640×480): 15.6% = 47,923pixels

    Word 97 (800×600): 13.6% = 65,280pixels

    Word 2000 Omitted – why?

    Word 2003 (Task Pane on, 1024×768): 26.4% = 207,618pixels

    Word 2003 (Task Pane off, 1024×768): 10.2% = 80,216pixels

    Word "12" (1024×768): 13.6% = 106,954pixels

    Word "12" (1280×1024): 10.1% = 132,382pixels

    You’ve satisfactorily demonstrated that it takes up a large amount more than previous configurations, other than the office 2003 "Task pane", which sounds like a definite "first thing everyone turns off" nonfeature to me.

    In widescreen format it’ll be an even bigger spacegobbler.

    Also, if you’re going to mention changing resolutions, then you also got to mention changing screen sizes. You’ve forgotten that back in the days of 640×480, people had 14-15 inch CRT screens (visible diagonal 12-13 inches). Now we have LCDs with 21 inch visible diagonals. 15% of a 12 inch diagonal is considerably less "huge" than 10% of a 21 inch diagonal.

    So, that myth remains doubly unbusted.

    ===

    If the "ribbon" is not customisable to show the tools that I personally use regularly, then it is trying to nanny me, and so will be turned off. Assuming I *can* turn it off, that is.

    One big test of the new office will be: "how many clicks does it take to turn off the default nannying?" In the current version, turning off all the annoying autotype/autohint/autoformat/blah nannying work-interference takes a large number of clicks. If it’s more than three clicks to turn the whole lot off, then my needs obviously weren’t "anticipated" very well.

    I normally have to add some buttons that I use a lot to the default word layout: I *like* the fact that I can do this. And I *like* the fact that I can delete those buttons that I don’t ever click, like "open", "save", etc.

    My main fear for this "ribbon" is that it will not be easy to customise to suit the way I work. Looking at the marketing spiel, it looks like I’d need to specify what situations I wanted each added button to show up in… assuming I can add buttons.

    Until it’s more clearly stated that that’s not the case, then the myth of it trying to "anticipate my needs" (rather than responding to my desires) remains unbusted.

    ===

    As for look & feel being stolen from OSX… what? Other than lawyers, who cares, if it works?

  18. A Designer says:

    "to call it "huge" or "oversized" based on the history of Office seems unjustified."

    Using previous versions of Office as your baseline presumes that said previous versions are reasonable uses of screen real estate. I’m not sure that is the case.

    But at any rate, I think that the analyis of % is overly simplistic, since I believe vertical real estate is much more valuable than horizontal, especially for document-centric apps like Word, Excel, and PPT. So I wonder why you chose to put commands horizontally above the doc rather than vertically next to the doc like many other apps do with palettes including MacOffice?

    (I do think this is heading in the right direction, though. Replacing both menus and toolbars with a single UI mechnanism is great)

  19. This is the fourth part in my weekly series of entries in which I outline some of the reasons we decided…

  20. This is the fourth part in my eight-part series of entries in which I outline some of the reasons we…

  21. One of the most discussed aspects of the new Office 2007 UI has been: &quot;Does it take up too much room?&quot;…