The Biggest Loser


As we continue to work on the visual design of the 2007 Office apps, we’ve been very conscious of looking for ways to slim down the overall UI of the apps.


Early on (especially before people learned more about how it worked) some people were saying things about the Ribbon like “it’s just a fat toolbar and takes up all my space.” We wanted to lose as much unnecessary weight as possible; you might remember how I feel about interface squalor.


In our current builds this week we finally got vertical spacing of the UI elements pretty much how we expect it to be when we ship Beta 2. So I thought it would be a good time to take some measurements to see where we were “out-of-the-box” vs. Word 2003 with the default Standard and Formatting toolbars up.


The question I wanted to answer was: “how much extra space does the 2007 UI take vertically vs. the 2003 UI.”


So, I counted up all of the vertical pixels in Word starting directly below the title bar and extending to the last pixel of the status bar. From this, I subtracted any pixels devoted to displaying your document. This left me with the count of “pixels devoted to the UI.” I did Word because it’s the app in which vertical space is the most critical.


The results:



  • Word 2000: 143 vertical pixels devoted to UI
  • Word 2003: 140 vertical pixels devoted to UI
  • Word 2007: 135 vertical pixels devoted to UI

It seems that we’re on our way to achieving the goal of creating a richer UI taking about the same amount of space as the common out-of-box experience with the current version.


And, the new UI uses 230 fewer horizontal pixels as well because the Task Pane is off by default.


And, you don’t have to spend extra UI space to put up the Picture toolbar, the Table toolbar, the Mail Merge toolbar, the Reviewing toolbar, the Word Count toolbar, the Drawing toolbar, etc., etc. All of this is built into the 135 vertical pixels already allotted to the UI.


And, remember that when you want the most space possible for your document, you can collapse the ribbon entirely by double-clicking the selected tab, giving you 111 of those vertical pixels back.


I was pretty enthused by the results, and I wanted to share them with you.

Comments (39)

  1. netfreak says:

    Great work guys. Really love the new UI and I’m glad that you’re making it slimmer, cause my thoughts were almost the same when I first time looked at the UI (that it’s fat).

    Can’t wait to see the next beta version, that is said to be out there after the February CTP (going to try to use them both at the same time)

    Keep up your good work

    p.s. don’t forget about the optimization I hope the Final version is going to be MUCH faster than beta-1

  2. Heiko Behrens says:

    I am impressed. I also thought that the ribbon would take more space. I would be pleased if you could post screenshots of both versions that "proof" this.

  3. Jeff Krueger says:

    Awesome metrics Jensen – simple and straightforword.  And don’t forget that those pesky "horizontal pixels" freed up by the task pane were the most cofusing pixels in recent UI designs.  Getting rid of the floating toolbars is awesome too.

    Thanks again for the awesome blog!  Lots of detailed info and regular posts every day!

  4. Thomas says:

    I’m the owner of a ultra-mini-tiny-small notebook (the discontinued JVC 7310) which only gives me 1024×600 of screen real estate. Unfortunately, this is the price I pay for having a full Centrino system in a less-than two pound package. This usually means I have to futilely expend energy in trying to turn off and/or move toolbars around. I am glad that you guys are working on the fat toolbar issue.

  5. Tim S. says:

    I’ve been following your Office blog for quite a while now; and as a fellow usability guy (not with MS obviously) I find your thoughts and comments ver insightful.  I’ve really enjoyed following the Office 12 UI development.

    One thought that I had however about the ribbon being a hair smaller than the Office 11 toolbars.  Even though the reality is that it’s smaller, the reigning perception may be that it is in fact "fat".  

    An unfortunate truth is that perception is reality.  Studies of slow sites that have a positive halo of some sort are perceived to be quick, and they’re rated quicker by users even thought they’re really dog slow.

    If people see the bar and think it’s fat, unless they happen to read this blog and know it’s not…  they will think it is and unfortunately it may impact their perception of this novel interface.

    Does this concern you all at all?  Does it not matter?  Do you all have a plan to mitigate this if you do care?

  6. jensenh says:

    Heiko:

    I definitely will post screenshots once we get a little closer to Beta 2.

  7. jensenh says:

    netfreak:

    We’ve done a lot of work to speed things up, but the development team continues to work on it.

    In particular, you will notice slowdown on Vista Feb CTP vs. Windows XP just because the OS is a moving target and so we’re not as optimized as we could be against the platform.  We’re working on that for the final release.

  8. greg says:

    Your point of comparison isn’t valid for corporate users.  Most of them are still on Office 2000 (or earlier) and those toolbars were smaller than Office 2003.

  9. Bob Snyder says:

    I’ve never heard anyone complain that their car’s windshield was too short, or that their car’s instrument panel took up too much of their visual field. I guess that’s because when driving, we tend to focus our gaze near the horizon, seldom looking very far up or down. Users apparently have very different expectations of instrument panels and toolbars/ribbons.

  10. jensenh says:

    Greg:

    I’m pretty sure the numbers would be pretty close in Word 2000 as well, but I’ll remote desktop to one of our Office 2000 test boxes and do the count this afternoon.

  11. Jote says:

    Jensen, I was just wondering – are you going to post any screenshots of Office 2007 UI prototypes, prior to what was the UI for Beta 1? You posted a "halloween" UI once, that was killer, can we expect more similar stuff? :)

  12. greg says:

    Thanks Jensen.  One obvious difference in our experiences is that I’m using Beta 1 and it devotes 141 pixels to the ribbon and other items at the top of the window and another 39 or so to the scroll bar and status bar at the bottom.

    If in beta 2, you’ve really managed to go from 180 total vertical pixels down to 135, then as the aussies say:  "good on ya, mate" and I look forward to seeing the build.

  13. ChrisC says:

    Greg: Good comment.  

    The ribbon takes up about 20% more space on the computer where I’m contracting

    My count is 114 for Word 2002.  That’s *NOT* out of the box because I don’t know what it’s like out of the box.

    I calculated based on my current settings: (in "Normal View")

    Menu = 25 pixels

    Standard + Formatting toolbars = 25 pixels (on the same line)

    Ruler = 26 pixels

     [document area]

    Horizontal scrollbar = 19 pixels

    Status bar = 19 pixels

    At (135/114) pixels Word 12 takes up 18.4% more vertical real estate than how *I* set Word XP/10/2002.

    Notes

    1. I checked "Print Layout View" and it is the same in verticle pixels.

    2. I dock the drawing toolbar above the status bar below the document, if this (or another toolbar) is showing out of the box then add another 25-26 pixels.

    This would make the ribbon SMALLER by a few pixels.

    3. Remember, these are just my numbers – maybe Jensen will tell us

      -Chris C.

    P.S. I’m still pumped about Word 12 and hope I get in on beta 2.  You won’t blackball me will you Jensen? j/k

  14. Hanford says:

    Jensen,

    I just read your post "Fight interface squalor" and I know you guys got rid of the wasted space in the menu bar, but I was wondering if you guys ever thought about getting rid of the title bar when the app is maximized.

    I think the Title Bar in maximized apps is the biggest waste of screen real estate and it’s in every single program I own. Yes, title is important, and the min/max/close buttons are too, but the rest of it is just wasted space.

  15. jensenh says:

    ChrisC:

    Most customers deploy with Standard and Formatting on separate lines.  But, yes if you shove all of your open toolbars on to a single line, you can get some space back.  You could also turn all of your toolbars off or do some other tricks.

  16. jensenh says:

    Just did Word 2000, and it’s actually 143 vertical pixels.  I’ll update the post.

  17. jensenh says:

    ChrisC:

    I’ll also mention that you can definitely continue to be excited about Office 2007. :)

    I am just trying to measure against the reasonable defaults most people deploy with.

    In the field, it is rare to see only 2 lines filled up with toolbars.  So many people have had the Drawing, Picture, Reviewing, etc. toolbars come up and don’t know how to put them away.  We ask them "why do you have this up" and they say "oh, I don’t know what that does."

  18. Sean Gerety says:

    I think that one thing that people are missing about the ribbon size is Fitts’s Law.  The ribbon interface gives those larger buttons a home.  Which makes targets easier to hit.  Congrats!

  19. ChrisC says:

    Jensen,

    Oh I doubt you could stop me from being excited about it – really enjoy the blog incidentally.

    Perhaps I didn’t come across the way I wished to.  I wasn’t so much trying to ‘bust your chops’, I just wanted to point out the difference between ‘what I do’/’how I work’ and what you were coming out with.  

    And by "I", I mean ‘a person who knows how to recover real estate and cares to do so’.

    Because there is no recovery available once I get to Office 12 (if I understand correctly).

    One last thing since I’m typing a post anyway:

    Y’all might seriously consider putting out some propagannn… uh, "marketing" stuff to address the size of the ribbon.  It does look bigger and perception (as stated above) is reality.  I’d say add it to one of the documents under "Facts sheets" on the page titled "2007 Microsoft Office System Press Materials"  (in your blog post yesterday)

    Have a nice weekend everyone!

      -Chris C.

  20. jensenh says:

    ChrisC:

    You can collapse the ribbon and use keyboard/MiniBar/conetxt menus to get almost the entire screen to work.

    The perception thing is definitely important, although I hope you’ll agree when you see the new visuals that it looks much less fat (helping with the perception issue).

  21. JonasO says:

    I asked this in a mail recently, but might as well get an answer here instead…

    Can the Ribbon be positioned vertically?

    Taking Word as the example, a standard document is positioned vertically ("portrait"). A PC monitor is wider than it is tall – more so if it is one of the more and more common widescreen monitors. What this means is a lot of unused space on the sides of a document, and the UI competing for space with the document instead of using that dead space.

    No matter how well the UI is optimised, putting it horizontally will canibalize your workspace.

    I realize there can be good usability and other reasons for having the ribbon horizontal, but the option of a vertical ribbon is imo important.

    Keeping the Windows task bar in mind (which can be positioned vertically but doesn’t work well like that), simply pivoting the ribbon is not enough – it needs to be designed for vertical positioning as well…

  22. Mike says:

    How do you guys measure something in pre-2007 versions where there are moving pieces. I guess you took the default UI in Word. Well, the point is :

    – you can reduce the size taken by pre-2007 toolbars to nothing (you can even remove the rulers, I just did a test with Word 97). You can’t do that with the ribbon.

    – even more important, with pre-2007 toolbars you don’t end up with a ribbon that behaves like a "flipping toolbars" plus "complex muti-selection item" bar that I don’t understand. Quite the contrary, when you learn where a toolbar button is in pre-2007 toolbars and the shape of the icon, you get productive because next time you need the feature, you click on the icon without bothering. With the ribbon, you first need to make sure you are showing the right flipping toolbar. How can that be more productive?

  23. Mario Goebbels says:

    I thought it was pretty clear that both versions were measured in a given window state (i.e. maximized). The Word 2003 layout would be a menu bar and two toolbars stacked vertically.

  24. Jon Peltier says:

    "And, you don’t have to spend extra UI space to put up the Picture toolbar, the Table toolbar, the Mail Merge toolbar, the Reviewing toolbar, the Word Count toolbar, the Drawing toolbar, etc., etc. All of this is built into the 135 vertical pixels already allotted to the UI."

    This means you have to hide part of the UI to get to other parts? A weakness I see in the new UI is that oft-used parts are not always available when other parts are accessed. For instance, in Excel 2003, if I am working on a chart, the chart menu hovers nearby, without displacing the rest of the menu system. In 2007, it seems that the chart-related ribbon pieces will appear in place of (not in addition to) the rest of the UI. This will result in more clicking around ribbon tabs to find the commands I need.

  25. Nick Murray says:

    Hi Jensen,

    I hope there are pictures of you and the team in the Word 2007 About box :)

    Seriously, one of my biggest gripes about earlier versions of Word (and other apps) is that often list and edit boxes are too narrow.

    For example, in Word 2003’s (style) organiser, there are two combo boxes ("Styles available in") that shows the current document and another document that you can copy styles etc to and from. This combo box is often not wide enough to show the entire filename. And there are other examples throughout Word (the "Save in" combo on the customise dialog is another).

    Speaking of the customise dialog, in Word 2003, why does invoking the Tools > Customise dialog hide any custom toolbars I have displayed? A small thing, but quite annoying!

    I hope these two issues have been examined for Word 2007!

  26. I’m sure many of you have experienced being the "one who knows about computers." In social and family…

  27. Francis says:

    Be careful when trying to economize on screen space. What may works for a mouse does NOT work for a Tablet PC.

    Small icons are hard to click with a pen/stylus (because the hand quivers.) On a tablet, you really need large icons with dead space between them. The icons should also be lockable (like the Taskbar) so that the user does not inadvertantly drag them when clicking.

    Also, the ribbon should be able to adapt on the fly to changing screen resolution/aspect ratio–something that happens often on a tablet.

    I would suggest making the Office UI intelligent–interface elements should change size/position/responsitivity depending on what interface device is being used.

    For instance, most dialog boxes are totally inappropriate for a tablet–take the Format/Paragraph dialog box in Word 2003 for instance. The arrows next to the Indentation text boxes are microscopic! And attempts to specify indents such as ‘.65"’ fail because the the decimal point or quotation mark is incorrectly recognized.

  28. Dawn Crosier says:

    Howard –

    I would have to disagree regarding eliminating the Title Bar when maximized. One of the first customizations we do is to update the title bar with the complete path of the document. This is because in a law firm, we often work on the same types of documents over the course of a day. We glance at the Title Bar to confirm which case we are working on without having to scroll to the top of the document to review the case caption.

    Dawn

  29. alb says:

    I’m impressed by the thought that went into most of the changes, and it’s nice that even these few pixels were considered, but with the trend moving towards widescreen displays, why not offer an option for the ribbon to be placed on the side?

    Or is that already an option?

    On a side note, the rounded top left corner is kinda ugly. Why not make it look like the other three? I know it’s meant to go with the logo, but it doesn’t do that very well, and even if it did, the large radius would still look bad.

  30. alb says:

    @ Sean Gerety

    The size of a button isn’t what Fitt’s law is about.

    It’s about having the button touching a boundary that the cursor can’t pass, such as the edges of the screen.

    That effectively gives it infinite height or width because for example, on a Mac, no matter how far you move the mouse upwards, the cursor will stay within the menu bar.

  31. Jeff says:

    Also, these measurements seem like comparing apples and oranges if you’re talking about more than just the toolbars.  Isn’t 2007’s default to autohide the ruler?  That, going by ChrisC’s measurements, gives 2007 a 26-pixel advantage; yet Word 2007’s total advantage is far less than that.

  32. I hate the round corners on the UI. I think they have no place in business applications. Overall I think it’s a bad new look. I probably won’t be upgrading.