Bagikan melalui


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

  • Anonymous
    February 17, 2006
    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

  • Anonymous
    February 17, 2006
    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.

  • Anonymous
    February 17, 2006
    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!

  • Anonymous
    February 17, 2006
    I'm the owner of a ultra-mini-tiny-small notebook (the discontinued JVC 7310) which only gives me 1024x600 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.

  • Anonymous
    February 17, 2006
    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?

  • Anonymous
    February 17, 2006
    Heiko:

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

  • Anonymous
    February 17, 2006
    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.

  • Anonymous
    February 17, 2006
    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.

  • Anonymous
    February 17, 2006
    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.

  • Anonymous
    February 17, 2006
    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.

  • Anonymous
    February 17, 2006
    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? :)

  • Anonymous
    February 17, 2006
    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.

  • Anonymous
    February 17, 2006
    The comment has been removed

  • Anonymous
    February 17, 2006
    The comment has been removed

  • Anonymous
    February 17, 2006
    The comment has been removed

  • Anonymous
    February 17, 2006
    Just did Word 2000, and it's actually 143 vertical pixels.  I'll update the post.

  • Anonymous
    February 17, 2006
    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."

  • Anonymous
    February 17, 2006
    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!

  • Anonymous
    February 17, 2006
    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.

  • Anonymous
    February 17, 2006
    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).

  • Anonymous
    February 17, 2006
    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...

  • Anonymous
    February 18, 2006

    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?

  • Anonymous
    February 18, 2006
    The comment has been removed

  • Anonymous
    February 18, 2006
    "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.

  • Anonymous
    February 19, 2006
    The comment has been removed

  • Anonymous
    March 02, 2006
    I'm sure many of you have experienced being the "one who knows about computers." In social and family...

  • Anonymous
    March 03, 2006
    The comment has been removed

  • Anonymous
    March 08, 2006
    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

  • Anonymous
    March 12, 2006
    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.

  • Anonymous
    March 12, 2006
    The comment has been removed

  • Anonymous
    March 14, 2006
    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.

  • Anonymous
    April 13, 2006
    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.

  • Anonymous
    August 25, 2006
    PingBack from http://microsoft.blognewschannel.com/index.php/archives/2006/08/25/microsoft-caves-on-ribbon-complaints/

  • Anonymous
    October 27, 2008
    PingBack from http://mstechnews.info/2008/10/the-office-2007-ui-bible/

  • Anonymous
    June 08, 2009
    PingBack from http://quickdietsite.info/story.php?id=8471

  • Anonymous
    June 09, 2009
    PingBack from http://greenteafatburner.info/story.php?id=2872

  • Anonymous
    June 09, 2009
    PingBack from http://hairgrowthproducts.info/story.php?id=2234

  • Anonymous
    June 18, 2009
    PingBack from http://barstoolsite.info/story.php?id=2388