I Am Your Density

A comment we’ve heard again and again about the Office 12 interface after people
use it or see it demoed live is: “wow, it’s so much better than I imagined just by seeing
the screenshots.”  Several people made that comment to me once again after my talk at PARC Tuesday night, and I wanted to write down some thoughts on the subject.

Fundamentally, there’s a kind of UI that is built with great screenshots in
mind.  Generally including big, shiny buttons with copious whitespace on
all sides, these interfaces look extremely simple and easy-to-use in
“back-of-the-box” marketing screenshots.  The screenshot-optimized interface is
generally low-density, with only a few controls on the screen at once.

definitely thought about this in designing boxshots for marketing materials in
past releases of Office.  The
picture we show on the back of the box is what the product looks like the first
time you run it.  But one of the problems with the current Office user
interface is that it tends to degrade over time–toolbars pop up over your
document and never go away, things get accidentally moved, Task Panes pop up
automatically, etc.  When we do site visits, we often see Office screens
that look more like the picture below than the one on the back of the box.

Back of the box vs. Real world screenshots

This is not deceptive advertising in any way, it’s just the reality that today’s
system of menus and toolbars and Task Panes tends to present more and more
complexity over time.  It’s true for today’s Office, and it’s equally true
with dozens of other full-featured software packages.

That’s because to build efficient productivity software that wears well over
time, the interface needs to be relatively high-density.  Having only five
shiny buttons on
the screen is very simple-looking, but it means that using any functionality
beyond those buttons requires at least one extra mouse click.  (Probably

Based on just
a screenshot
, the Ribbon appears fairly involved.  This is because the
density of controls, especially on the first tab which tends to be shown in
screenshots, is fairly high.  Yet, when people use the new UI or see
in action–actually interacting with the software and not just staring at it–it
doesn’t feel cluttered.  The first tab is high-density because it’s
designed for high efficiency, and you wouldn’t want most of those features an
extra click away.  Bold and Italic and Center have small, unlabeled icons
because they tend to be among the handful of features people can use without
text labels.

One of the design tenets we’ve embraced from the very beginning was that the Ribbon was going to be a
flat tax on screen real-estate.  Yes, it takes up a few more pixels vertically than
the two toolbars
from the back of the Office 2003 box, but it won’t degrade over time.  We
won’t pop up extra UI over top of the document, or from the side, to advertise
features.  Our goal is that when you boot Word 12 five years from now, it
looks as clean as it did the first day you brought it home.

We don’t worry about the screenshots; we worry about getting the product right
for everyday use.  We worry about the long-term ramifications of our
current design decisions, not how they’ll look on the back of the box.  And
if that means that some people don’t react as positively as we’d like to static
screenshots, then we need to redouble our efforts to get people to watch, read
about, and use the UI in action.

A friendly, high-density productivity interface that demonstrates respect for
your screen real-estate is one that will wear well with time.

Comments (33)

  1. Eddie says:

    I realize the term "back of the box" marketing includes more than the literal back of the box. But I can’t imagine that too many people would base a purchase of MS Office off of what they read on the back of a box at this point.. ("hmmm what’s this ‘Office’ thingie? I wonder what it can do?") Or for that matter, off any screenshot. I honestly can’t tell you what version of office I use at work… I’m pretty sure I have (Office XP whatever that means) at home. I just know I have Office and I need it. I never found a need or reason to really upgrade and taken what was easiest to get. It’s Office for goodness sake. You have to have it or something similar… but you’re better off with just getting Office.

    Now that I’m a bit older and wiser- I put usability in the mix when I purchase anything these days. That’s why I’m eager to get my grubby hands on your product. I can’t say I’ve ever been looking forward to a new Office release.. until now.

    Those that are turned off from Office based on initial screenshots/impressions… it’s not like they can hide forever? Eventually, Excel or Word 12 will find itself on some screen they are sitting in front of, and any doubts they may have had should be remedied. Of course, I’m saying that sight unseen, but I think you’ve covered your bases on this blog pretty well that <a href=http://jnd.org/dn.mss/industrial_desi.html">substantiate your claims</a>

  2. Dan McCarty says:

    "Based on just a screenshot, the Ribbon appears fairly involved."

    Hostile comment:

    I’m assuming you meant this screenshot: http://www.microsoft.com/office/images/preview/CommandTabs.jpg

    There’s something I need to get off my chest about the new ribbon design. There is very little connection between the highlighted menu item and the ribbon below it. I guess some bright coder came up with a cool star/gradient effect to show a higlighted menu, but how does it relate to the ribbon below it? There’s a hard break between the bottom of the button and the top of the ribbon.

    I know you’ve said that this isn’t the final UI, but from what we’ve seen over the last few months and betas it looks like (unfortunately) that button highlight is here to stay.

    I came up with an improved ribbon design that connects to the menu item and ties the ribbon together. Let me know if you’d like to see it and I’ll email it to you. Or you can email me: danielm at whleary dot com.

  3. Dan McCarty says:

    Have your usability tests for Office 12 focused on portrait-oriented monitors? I have a dual display set up at work; my main one is portrait and my second one is landscape. I find that in most cases it works great, with the exception being working with a landscape document on a portrait display.

    The ribbon seems well-suited to a portrait display, because the extra vertical cost is offset by the orientation of the monitor. Any thoughts on a vertically-oriented Office 12?

  4. Dan McCarty says:

    Er, that last comment was supposed to be labeled "Friendly comment:" (as opposed to the hostile one).

    Okay, I think I’ve used up my quota of comments today. 😉

  5. Bergamot says:

    It’s easier to make a usable interface attractive, than to make an attractive interface usable.

    And anyone who quotes Back to the Future in a blog post title gets a few points from me.

  6. farmerbuzz says:

    Has anything been done about automatically numbered lists? Currently its really easy to get Word confused about numbers, and its incredibly hard to figure out whats going on behind the scenes. It really is voodoo sometimes:


    At this point it would be easier for me to do the numbering myself…

  7. jensenh says:

    Dan, et al.:

    As I’ve mentioned a number of times, the current visual skin is just temporary and the final product won’t look much like it.

    The connection between the tab and the lower Ribbon is something that is very present in the real visual design. So, you’re right in criticizing the current design… but the fix will come with the real visual design. 🙂

  8. Mike says:

    Someone just saw Back to the Future, eh? 😉

  9. jensenh says:


    Your point about "back of the box" is a good one, most people don’t ever see an Office box.

    I’m kind of using that as shorthand for "marketing screenshot." The kind of screenshot that is designed to generate interest and enthusiasm for the software.

  10. jensenh says:


    Was hoping someone out there would catch the reference. Back to the Future is one of those movies that’s burned into my brain for some reason…

    "Tab? I can’t give you a tab unless you order something!" Would anyone even understand this joke today?

  11. Eddie says:


    Yeah, I gathered that much. My point was that interest is kind of already unavoidable. I know I’ve worked in many offices, organizations and the military, and all have had Office there waiting for me.. so the interest is built in.

    To be honest, I have no interest in the features that are being added to Office. The same versions have all done exactly what I’ve needed to for a long time. I’m ONLY interested in this round because for once there is appears to be a serious interest in usability and how the accessible the existing features.

    I say that knowing previous versions all had usability considered in one facet or another, but in my opinion they have fallen short. Office 12 may as well, but that is the only interest I have in it, and I’m looking forward to trying it.. and I hope it’s half of what the impression I get from this blog is.

  12. joe says:

    I agree about the "back of the box" screenshot thing – i hate using other peoples computers and using Word and Excel and seeing extraneous toolbars all over the place. The worst is when there are 2 toolbars on two different rows by themselves that each take up about 1/3 of the row, so they should be moved to the same row. And of course people have no idea what happened when they mean to click "File", but they accidentally grab the whole menu bar instead and drag it down to the bottom row!

    But, the real reason for this comment is to pose an additional question about the Back to the Future reference. To give you an indication of where I’m coming from, I was 5 when BttF 1 was released, but of course I’ve watched it many many times through the years. Unfortunately I’m not familiar enough with the cafe scene of the 50s or 80s to understand the Tab reference. I know a Tab was a popular soda (i just don’t know when it was popular – the 50s or 80s), and I also know you can get a tab at a cafe where you don’t have to pay until the end of the week.

    …. So what Marty asking for a Tab soda, or asking to start a tab because he didn’t have any money? And was the soda-jerk telling him he couldn’t give him a Tab soda unless he got something to eat, or couldn’t give him a tab unless he bought something more?

  13. PatriotB says:

    "Our goal is that when you boot Word 12 five years from now, it looks as clean as it did the first day you brought it home."

    Oh, but we won’t be booting up Word 12 five years from now — we’ll be booting up Word 14.

    (Except for those stuck-in-a-rut corporations that will still be booting up Office 97…)

  14. pli says:

    "We don’t worry about the screenshots; we worry about getting the product right for everyday use. We worry about the long-term ramifications of our current design decisions, not how they’ll look on the back of the box."

    Amen! If that represents the general attitude of Microsoft, then you guys finally get it!

    I’m not trying to sound negative, but where have the UI usability team been in the last decade? How was the Office UI allowed to evolve to its current state?

    On a more positive note, I want to congratulate you and Microsoft — it appears that with the release of Office 12, Microsoft is finally ready to showcase some true industry-leading innovation, after a long hiatus!

    Nice work!

  15. Centaur says:

    You talk about “shiny” buttons. Will there be any way to make them *not* shiny? You know, like Windows XP Classic theme. Flat, gray, quadratisch, praktisch, gut.

    I have a story to tell. In 2000, when I was just starting my career in software development, we had a large application suite project for a German company. The customers very strongly insisted on a unified UI theming with silver gradient buttons, light blue gradient toolbars, and saturated pink gradient message boxes.

    And then I saw Office 2003.

  16. ChrisC says:


    Tab (the soda) came out in the 80’s (maybe 70’s).

    With the advent of credit cards the tab was beginning to fade into obscurity in the 80’s.

    So, Marty was asking for a Tab, and the soda jerk was saying that he had no need for a tab.

    It doesn’t bother me that I’m old enough to know this; I wonder if it will bother me ten years from now? 🙂

    -Chris C.

  17. Tim says:

    Thanks, McFly!

  18. PatriotB says:

    Centaur — hear, hear.

    I’m all for the ribbon, functionally. But I strongly dislike the visual look of Office 12 right now. Yes, Jensen has said it’s "not the final skin," but that’s beside the point. Office shouldn’t be skinned; it should use the operating system-provided look and feel. Including the OS-provided title bars–the way Office 12 is now, it won’t even get Aero Glass effects automatically!

  19. jensenh says:


    I think you’ll find the final look to be very complementary to the OS (both XP and Vista.)

  20. Steve says:

    UI changes look great – but now I’ll have to forget all the intricate ways to get things done that took so long to master… Appears to be worth the price.

    TaB (the diet doft drink) was introduced in May 1963 and was sold through Coca-Cola’s subsidiary Fanta Beverage Company.

  21. MarkR says:

    It’s good to see you aiming for a clean and productive user interface but I have a couple of question about the command tabs.

    1) Will they be individually moveable (i.e. draggable along the ribbon)? As a specific example, will the Font tab in Word and Excel be moveable in this way? In its currnet position it seems likely that in many circumstances it would hide the very text you’re trying to alter.

    2) Will unwanted tabs be hideable?

    3) Will users be able to edit and create their own tabs to suit their own way of working? The Quick Access Toolbart goes some way to providing this functionality but it’s not quite the same as being able to edit one’s own tabs.

  22. MarkR says:

    In my previous message I think I may have used the wrong terminology: When I referred to command tabs I meant the panels on the ribbon itself. E.g. In Excel, the Clipboard, Font, Alignment, etc. panels.

    Currently as I understand it these cannot be moved, hidden, or edited, and it seems to me that it would be important for this to be possible for practical use.

    The one where this would seem to be particularly important would be the Font ribbon panel, as the font drop list box would tend to hide a lot of the document being worked on.

  23. MarkR says:

    An additional question about the Quick Access Toolbar and toolbars in general:-

    A lot of people have very carefully edited their toolbars so that they work exactly as necessary. It seems a shame to force them to throw this away.

    At present the Quick Access Toolbar can either be ‘small’ or ‘large’, there is only one of them, and its exact position cannot be chosen by the user. Surely it would be better to allow multiple toolbars and for them to be fully customisable (in terms of content, position, docking, etc.)? That way, users could continue to use their familiar toolbar layouts, or they could use the command tabs and ribbons, or they could use a customised combintion of the two as they require.

    The ribbons are a great idea but it makes no sense to force them on people who are used to working with well customised toolbars.

  24. GregG says:

    I think Ribbon will be great.

    1) Will there be a setting for increasing the "hot zone" of controls. One of my annoyances is the size of the area responsive to a mouse or stylus. Back in VB6 development, I frequently try to simulate this context-awareness by having a small control that simply displayed a much larger and detailed control. For example, although the combobox control exists, I had the click event and keyboard shortcut of a textbox show a listbox of choices. This allowed the entire text box area to be click-responsive, compared to a very small fixed-size expansion button. There is already a setting at the individual control level to choose among icon/image, text, and both. I think there should be a companion setting to expand the size of the pointing device input. It is especially frustrating to display hidden controls on current toolbars by clicking the small expansion chevron.

    2) Since the Ribbon’s goal is to flatten the hierarchy, what are the UI guidelines for expansion? Will a row be allowed to contain more controls than the screen can display at the same time in a single row. If yes, please at least add text or a choice of chevrons sizes. If not, will a hierarchy develop in which a new row of controls be shown (and the parent row is compressed or “bread-crumbed”) or will the Ribbon actually scroll left and right?

    I would be great if the control container “row” was resizable AND dockable. I don’t mean reducing the area of the Ribbon or compressing the size of the individual controls, that’s a separate issue. Currently Toolbars can floating or docked. When floating, the container’s height and width can be changed and its controls auto-arrange themselves. However, if that toolbar is docked, it expands to consume the full length of the axis. This is especially wasteful if there a few controls. Please tell me the container can be docked at less than full axis length. For example, if 12 controls exist, allow 1×12, 2×6, 3×4, 4×3, 6×2, and 12×1.

    3) Also, I heard somewhere that keyboard shortcuts were being eliminated or changing, at least on the Vista Start menu. Will these change in Office 12? Will "classic" functionality be an option? Since context awareness is expanding at all levels, something like using keyboard shortcuts if the Alt-key is held down? This should be mentioned to the Vista team.

    4) MS has had a troubled history of consistency across Office applications. This can be has explained by having different development teams, but is not an excuse for a lack of coordinated product line. Some have been MDI others SDI. There have been different keyboard shortcuts for the same function, i.e. switching among open documents and windows. Will the new UI unify these differences or just the appearance?

    P.S. I hope the official name uses frame, pane, or panel and not some bizarre new marketing term.

  25. joel finkle says:

    Speaking of denseness… whose fine idea was it to "nerf" custom toolbars?

    Putting them on the add-ins tab means that alternating between my toolbar and, say, Write means clicking on Tab constantly.

    And why not "stack" buttons? Having one very long toolbar with what looks like two rows of space between them is very wasteful, especially when my toolbar can toggle two more toolbars when needed (which would go nicely underneath, although they used to go at bottom).

    I realize that I can turn it all into a .dotm and add my own custom UI, but that means different versions for Word 12 versus 9-11 (2000-2003) users. That’s probably what I’ve got to do, but it’s a bad option, from a testing stance — everything will have to be tested independently.

    A "fallback" or "compatibility" mode would be nice, if it’s not too late.