Scaling Up, Scaling Down

A question that has been asked a lot is: "How does the Ribbon scale down?"

Anytime you see the Ribbon demoed live, you'll see it at 1024x768 resolution.  Why?  Simply because that's the native resolution of most projectors.  If you saw my presentation at PDC, you know that even 1024x768 can be fuzzy on a projector, depending on the length and quality of the cables and splitter involved.

As a result, we tend to put screenshots up in 1024x768 as well.  It tends to be a nice resolution shrunk down to thumbnail size and, because it's the most common resolution people have today, it lets them envision what the UI would look like on their monitor.

The reality, of course, is that Office is used on everything from a squished-up narrow window on the left side of the screen to a maximized 2048x1600 200 DPI screen and everything in-between.

1024x768 is the most common resolution for people using Office 2003, however we're seeing constant growth of the 1280x1024 and beyond segment.  We're almost to the point where half of the Office 2003 monitors are running resolutions higher than 1024x768, and I'm hopeful that in another two years 1280x1024 will be the majority.  800x600 usage continues to decrease every month (even worldwide), and we're currently seeing less than 15% of our Office 2003 customers using that resolution.

In the past, when designing user interfaces at Microsoft, we've always picked a target resolution (say, 1024x768) and then figured out how to make the UI scale down below that resolution.  Usually, that scaling is achieved by means of "overflow" mechanisms, such as scroll bars.

As a result, certain UI components that were designed for 640x480 (such as the top-level menu structure) look comically small on a 1400x1050 laptop.  No thought was put into how the UI could get richer if you had more space.

The Ribbon was designed to scale up and scale down.  It has no "target" resolution per se, but instead sizes itself to fit.  As you give it more space, it takes advantage of that space to label commands, give you more choices, and eliminate extra clicks.  As you shrink it down, the Ribbon packs more information into less space and eventually goes away altogether.

Each "chunk" in the Ribbon can have multiple layouts.  These layouts are different ways of communicating the same commands using variable amounts of space.  The larger chunks attempt to label all commands and present bigger buttons for more important commands.  The smaller chunks sometimes have no labels at all and require tooltips to see what commands do (similar to toolbars today.)

Chunks can also turn into "popup" chunks, in which the entire chunk turns into a singe button.  When the button is clicked, a full-size version of the chunk contents pop down, like a menu.  This is the most compact version of any chunk and it only used at small widths (because it adds extra clicks.)

(Click to view full picture)

Here's a movie I made so that you can download to see scaling in action.  The tab pictured is not really a true example of any tab in the product--I've changed the scaling to illustrate the different kinds of scaling possibilities all in one tab.

(Click to view movie - Windows Media Format, 1.6 MB)

We've tried a lot of different kinds of scaling for the Ribbon--this is one of those items we've been working on in the usability labs pretty much straight for two years now.  We want to be predictable, and we want people to be able to move between different monitor sizes and be successful.  At the same time, we wanted to keep the Ribbon as efficient as possible to use at all sizes--this ruled out just adding scroll arrows to either side.

Each of the chunk sizes is designed by hand, and the order in which the chunks collapse into different versions is also designed by us and not by the computer.  There's no attempt to "auto-scale" the UI.  At 800x600 it will look the same on everyone's computer.

Ribbon tabs that include in-ribbon galleries scale up very well, because they can contain any number of discrete items.

In order to satisfy our usability criteria for Ribbon scaling, we ended up defining the following rules:

• No commands ever appear or disappear between chunk sizes
• Multiple commands cannot be rolled up into a menu at smaller sizes
• Keep labels on commands as long as possible unless the icons themselves are well-known
• Popup chunks show the same layout people would have seen in the Ribbon itself

These rules came directly out of watching people use the product in the labs over the last few years.  Other rules we thought would be important (such as always collapsing from right to left) turned out to not matter at all.

Scaling a tab takes a lot of design effort to get right, and we spend a lot of time on the craft.  Some have wondered why we don't just have a computer algorithm that decides all the layouts (or, even better, auto-optimizes them.)

The answer: I think the rigorous thought into the design is part of what helps make the Office 12 UI work--it's designed by humans for humans.  That's a philosophy I strongly believe in, and I think it will be reflected in the quality of the final designs.

Comments

• Anonymous
  October 18, 2005
  When the window is closed, the items become "popup" chunks in a right-to-left order. I think I remember you stating before that the leftmost element in the ribbon is a dead zone of sorts, where the least used element resides. Doesn't this ordering behavior give undue prominence to the least used ribbon element (in this case Themes)? Wouldn't you want to collapse Page Setup last instead? I suppose doing so would be unexpected to the user.

• Anonymous
  October 18, 2005
  How flexible will the "show/hide ribbon" option be (I assume that one will exist)?
  
  My preference would be for a hidden ribbon that I could invoke with a single key press, like Alt or F10 that currently takes me to the menu bar.
  
  My current setup in Excel has the menu bar and a single toolbar that I've customised so it has all the buttons and indicators I need. The ribbon looks like it will take up about 2.5x that (5 rows instead of 2 - menu, header, and 3 rows of stuff). Two and a half times is A LOT.

• Anonymous
  October 18, 2005
  The comment has been removed

• Anonymous
  October 18, 2005
  Do you find that most people run Office applications maximized? The problem I've always had with those websites that say, "best viewed at 1024x768 or better" is that even though my screen might be set to that resolution, I never maximize my browser window. (Similarly, I never maximize my Office windows... I always at least keep my IM window visible on the edges.) I have no clue if I'm typical or not.
  
  Second question: Would you prefer that people run Office maximized or not? It seems to me that when Word is maximized you completely lose all advantages of drag&drop because you can't drag outside the window, and Windows doesn't (yet, hopefully) have anything like OS X's Expose feature.

• Anonymous
  October 18, 2005
  Jensen,
  
  Most of the icons in the screen shots you've been posting look very professional. Are you seriously claiming that these aren't the final shipping icons and that Microsoft have gone to the trouble and expense of creating lots of great icons that will never ship?

• Anonymous
  October 18, 2005
  I would imagine that most "get your primary job done" apps would be run maximized. I and every dev I've worked with runs VC maximized.
  I have a 19x12 monitor at home, can't wait to see how much stuff gets stuck in the ribbon in that res. :)

• Anonymous
  October 18, 2005
  James, you can definitely drag-and-drop with maximized Windows. You simply start your drag and point your mouse at the taskbar icon for your "destination" application, and let it hover there for a bit. Windows will activate that application and let you finish the drag.
  

• Anonymous
  October 18, 2005
  James, in case you don't like the drag'n'drop method David has pointed out, mind that Alt+Tab works fine when you "hold something in your mouse", so you just catch, start to drag, Alt+Tab to where you want, and drop it there.
  
  I believe that most people maximize their windows. Why not use the whole screen? Make your IM contact list appear/disapper when you press some key combination (Ctrl+Alt+` for me) and as of other windows - just Alt+Tab to them!
  
  Just can't imagine how a primary window can be not maximized... It's like... Putting a bed-sheet on half of your bed maybe? Or, watching everything on TV in Picture-in-picture mode? :-)
  
  How different the people are!

• Anonymous
  October 18, 2005
  The comment has been removed

• Anonymous
  October 18, 2005
  Hi Jensen, great blog. Really appreciate your posts here.
  
  I have a question about UI customization. Having this intelligent behavior built into the ribbon seems to make it difficult to provide a full UI customization mechanism (where the user can re-arrange, insert and delete items where-ever they want).
  
  From one of the initial videos, it seems like just the one remaining toolbar on the left hand side is now customizable.
  
  I'd be interested if you could mention anything about the tradeoffs involving UI customization, since the old command bar mechanism was so highly customizable.
  
  Has there been any controversy about losing that level of customization?
  

• Anonymous
  October 18, 2005
  "I believe that most people maximize their windows. Why not use the whole screen?"
  
  For some tasks I like to keep content from multiple programs in view at all times. For some applications such as Outlook (and this may be true of IM for other people), I like to keep an eye on my inbox but don't want to be interrupted by a pop-up dialog. These situations necessitate running applications non-maximized.
  
  Actually, I do usually run most apps maximized on a single monitor of my dual 800 x 600 monitors. And no, I don't see going to a higher resolution, as 800 x 600 is the optimum resolution for my eyes at an ergonomic physical monitor size for dual monitors.

• Anonymous
  October 18, 2005
  How will large fonts interact with the ribbon bar? Lower resolutions remain popular with many people "because the text is bigger". In theory they can just turn on large fonts or set the arbitrary font scaling, but in practice lots of software ignores, icons and other user interface elements become to small, and the like. Windows menus generally responded well to larger fonts, but toolbars with their (typically) bitmap graphics didn't. So, how will Office 12's Ribbon cope?

• Anonymous
  October 18, 2005
  >> James, you can definitely drag-and-drop with maximized Windows. You simply start your drag and point your mouse at the taskbar icon for your "destination" application, and let it hover there for a bit. Windows will activate that application and let you finish the drag.
  
  I know about that, but the problem is that 99% of the time I'm dragging to the desktop. (I'm a Mac user except when I'm at work, and I use the "store everything as a clipping on the desktop" organization scheme.) So while you can drag from application to another application using the task bar, as far as I'm aware, you can't drag to the desktop.
  
  >> Just can't imagine how a primary window can be not maximized... It's like... Putting a bed-sheet on half of your bed maybe? Or, watching everything on TV in Picture-in-picture mode? :-)
  
  I like to be able to glance to my buddy list and see who's on. Your right that I could set up some kind of key combination, but it's just easier to position the windows so I can see both at the same time. In any case, when you're working in Word maximized, a good portion of the screen is just blank page anyway.
  
  Also, like you read above, I'm primarily a Mac user, and MacOS doesn't really have the concept of "maximize" the same way Windows does... I'm sure things are a lot different from people coming from a (historically) DOS background. I never used DOS, I started on MacOS, so having multiple windows open at all times is natural for me.

• Anonymous
  October 18, 2005
  (My second comment seems to not have made it. Apologies if this is a duplicate.)
  
  "In theory they can just turn on large fonts or set the arbitrary font scaling, but in practice lots of software ignores, icons and other user interface elements become to small, and the like."
  
  Exactly. I'd like to run 800 x 600 as 1600 x 1200 instead, but with 4 times the sharpness for the same exact content, rather than 4 times the content. But I know of no software which will let me do that.

• Anonymous
  October 18, 2005
  Lots of interesting discussion here. We do see a lot more maximized use than I would have thought before I really looked into it.
  
  On the icon question. We're constantly getting new icons created, it's nearly a two year product to swap in 1000s of new icons and it gets done week by week.
  
  So, yes what you're seeing in these pictures are mostly finished icons. The visual look of the product is not the real look, but you will see a number of finalized icons in beta 1. You will also see a lot of them that have not been done and even a lot of missing icons.
  
  The only target we really have is to get all the icons in before we release to manufacturing.

• Anonymous
  October 18, 2005
  The comment has been removed

• Anonymous
  October 19, 2005
  The comment has been removed

• Anonymous
  October 19, 2005
  Gruh, typos. I meant, of course, Apple has added that prototype feature to MacOS X. I doubt Apple cares whether Windows has it or not. ;)

• Anonymous
  October 19, 2005
  On the maximizing front - I don't. Once I passed 800x600 and went to 1024x768, I stopped maximizing Word (my primary tool). Sometimes with Excel I still do, but most of the sheets I work with don't require it. Ppt is usually maximized, but that's because it defaults that way, and I'm not normally in it long enough to care - unless I'm focused on creating a presentation, in which case I'm focused only on that. Otherwise, my job requires far too much multitasking, and I'm usually referring to other sources when I'm working in an Office app. I don't maximize Access normally either, even for most DB creation/maintenance tasks.
  
  I also wholeheartedly second James' wish for Vista to have a zoom feature, though this probably isn't the right place to hope for it. :)

• Anonymous
  October 19, 2005
  > I know about that, but the problem is that 99% of the time I'm dragging to the desktop.
  
  You could start drag and press "[WIN] + D" or " + M" on keybord then just drop to desktop. First will hide and restore back all windows, second is just one way - to minimize all.

• Anonymous
  October 19, 2005
  The comment has been removed

• Anonymous
  October 20, 2005
  "Scaling a tab takes a lot of design effort to get right, and we spend a lot of time on the craft. Some have wondered why we don't just have a computer algorithm that decides all the layouts (or, even better, auto-optimizes them)"
  
  How do you intend to do localizations of the UI? Spend a lot of time again for each language?

• Anonymous
  October 20, 2005
  I don't understand why you would want the information on the screen to get bigger as you increase the resolution. For me, the only reason I keep getting bigger screens is that i want to be able to fit more on it - having application increase in size defeats the entire purpose.

• Anonymous
  October 20, 2005
  "I don't understand why you would want the information on the screen to get bigger as you increase the resolution."
  
  Reduce eyestrain.

• Anonymous
  October 24, 2005
  The comment has been removed

• Anonymous
  February 14, 2006
  
  My first experience in Office was working as an intern program manager on
  Outlook 98.  During...

• Anonymous
  March 17, 2006
  Speculate all you want; the proof is in the pudding.

• Anonymous
  August 03, 2008
  PingBack from http://cael.freevideonewsnetwork.info/runninghigherthennativeresolution.html

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

• Anonymous
  January 20, 2009
  PingBack from http://www.hilpers.com/711690-farbliche-darstellung-von-2007-aendern