A Disappearing Act

Yesterday, I discussed the way the Ribbon scales to different window sizes. 
I’ve also
that you can collapse the Ribbon by double-clicking the selected
tab or by pressing Ctrl+F1.  One piece of the design I haven’t yet written about
but you might
have noticed if you watched yesterday’s movie
is what happens to Office windows
below about 250 pixels wide.

It’s an idea we kind of stole
: when you size the window below a certain threshold, the whole
Ribbon disappears, leaving you with just your document.  If you’ve used
OneNote, you know that once you resize down below a certain threshold, most of
the frame and commands disappear, leaving you with a clean little box to take
notes in.  We’ve taken the idea now and expanded it to all new UI apps.

The logic goes like this.  Below a certain minimum size, no amount of
downward scaling makes the UI truly usable.  (This is the case for previous
versions of Office as well.)  So, a good assumption seems to be that you’re
not actually trying to use the commands anymore at that size, but instead you
want the content of the document in a skinny window.  Maybe you want to
have it up alongside another document that you’re editing.  Maybe you’re
doing copy and paste from one document to another.  Or drag and drop. 
But it’s unlikely that you’re trying to insert a caption or debug formulas in a
window that narrow.

When you size the window back over the threshold, the Ribbon reappears, ready to
follow your orders.

If you want to see what it looks like in action, check out the
movie I posted
yesterday (1.6 MB, Windows Media Format).

It’s a small touch, but I think it adds a bit of polish to a scenario in which
the UI has the potential to put its worst foot forward.

Comments (13)

  1. Tommy says:

    Seems sensible. But why not make the window stay always on top? If you shrink a window to that size you probably want it to stay visible at all times.

  2. BonzoESC says:

    "But why not make the window stay always on top? If you shrink a window to that size you probably want it to stay visible at all times."

    That’s not true at all. Having a window that demands to be on top as its default behavior is pretty arrogant.

  3. Jack Mathews says:

    Jensen, these blog entries are fantastic. You’re now the 2nd msdn blog that I make sure to check every day.

  4. anon says:

    What’s the other, Jack?

  5. Centaur says:

    250px, wow! On some platforms, 240px is all you have πŸ™‚

    Guess the Ribbon won’t make it into Windows Mobile.

  6. Kawigi says:

    My opinion is that Windows Mobile is barely an appropriate platform for toolbars, let alone the ribbon (I guess I’m more of the opinion that minimalistic user interface is superior on that platform, where your interaction with it is necessarily simplified).

  7. Step says:

    I noticed that during the movie. Thanks for explaining. It makes a lot of sense, and though I don’t use Office in that manner very often, it will be appreciated when I do.

  8. David Harrison says:

    Jensen, what if the behaviour you describe were coupled with a option that would cause the ribbon to show up docked to the outside of the application window when the mouse is moved to the top border of the window? This would be similar to the way that Media Player’s menu can automatically hide and become visible as needed. Of course, the ribbon would be wider than the window, but since it would be coming and going as needed, it wouldn’t get in the way .

    This would allow the ribbon to still be useful when working with small sizes without needing to have it permanently present. I think this would have to be an optional feature, of course.

  9. Jeffrey says:

    Interesting stuff. I really appreciate hearing about the logic behind the new UI.

    We have a number of specialized applications that add items to the Office menu structure. How will that work in the world of the ribbon? What kinds of code changes should we anticipate?

  10. Jack Mathews says:

    >> What’s the other, Jack? <<

    Raymond’s, of course. πŸ™‚

  11. Joe says:

    Wow, the Ribbon is sounding better and better every day. I have noticed that several developers are interested in using a Ribbon control in their apps (I’m in that list). Could you possibly post some more technical specs (font styles and sizes, gradient colors, sizes, etc)?


  12. Kawigi says:

    Sounds like you’re asking about stuff that might not be final anyways πŸ˜‰