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 1024×768 resolution.  Why?  Simply because that’s the native resolution of most projectors.  If you saw my presentation at PDC, you know that even 1024×768 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 1024×768 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 2048×1600 200 DPI screen and everything in-between.

1024×768 is the most common resolution for people using Office 2003, however we’re seeing constant growth of the 1280×1024 and beyond segment.  We’re almost to the point where half of the Office 2003 monitors are running resolutions higher than 1024×768, and I’m hopeful that in another two years 1280×1024 will be the majority.  800×600 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, 1024×768) 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 640×480 (such as the top-level menu structure) look comically small on a 1400×1050 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 800×600 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 (30)

  1. Jay Ef says:

    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.

  2. Helen says:

    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.

  3. Lamont Cranston says:

    Will the user be able to define a maximum size limit for the icons? There’s no such thing as "too small" (much less "comically small") if the controls themselves are the normal MS-product size (by contrast WinAmp at high res is a mess, because those controls are already smallish at 800×600). It seems like you’ve got icons that work well at 800×600, and you’re gratuitously expanding them for people with larger resolutions, just because you can.

    I don’t see how making the same picture bigger will help the user comprehend it better. That’s like speaking loudly and slowly to somebody who doesn’t understand the language. Well, I guess they’d be a lifesaver for people with poor eyesight, or new computer users who aren’t very good with the mouse yet. But it’s painful for long-time users if they can’t take the training wheels off when they choose to.

    Long text labels are great when you’re learning, but once I know an interface, I’d rather get rid of them entirely. Again, it’s a "training wheels" thing.

  4. James Schend says:

    Do you find that most people run Office applications maximized? The problem I’ve always had with those websites that say, "best viewed at 1024×768 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.

  5. John Topley says:

    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?

  6. Mike Dunn says:

    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 19×12 monitor at home, can’t wait to see how much stuff gets stuck in the ribbon in that res. 🙂

  7. David Harrison says:

    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.

  8. Ilya Birman says:

    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!

  9. Kawigi says:

    Jay Ef – The order isn’t really enforced that way, the tab he showed just happened to scale to popup chunks in that order. I suspect that the reason Themes isn’t scaled to a popup chunk is that it would make next to no difference in the act of scaling (it wouldn’t get much smaller anyways, so why bother?)

    Helen – I think Ctrl+F1 toggles the ribbon. If it’s collapsed and you hit alt to use keytips (described recently) and hit the keytip for a tab, it expands again to show that tab.

    Lamont – Actually, I think the reason behind making certain buttons (and therefore icons) bigger is less related to helping people who can’t see well or who are less computer-savvy, and a lot more related to the fact that the variation in size helps people find things more easily (see http://blogs.msdn.com/jensenh/archive/2005/09/29/475296.aspx ), as well as Fitt’s Law (Google for it). Of course, let’s not ignore that sometimes Microsoft wants to "advertize" certain features a little more.

    On the subject of maximizing windows – most people I’ve seen use Office apps maximize the windows. I don’t, but my experience with Office 12 is primarily on high-resolution monitors, so not-maximized is the same thing as maximized for some people anyways. All-in-all, I’ve seen some ribbon tabs that scale beautifully to small resolutions and some that make great use of wide resolutions – but few that do both that well 😉

  10. Michael G says:

    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?

  11. Charles says:

    "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.

  12. Alan De Smet says:

    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?

  13. James Schend says:

    >> 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.

  14. Charles says:

    (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.

  15. jensenh says:

    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.

  16. TC says:

    The whole topic applies "in spades" to typical data entry apps. How do you make your app usable, and not too cluttered, at 800×600, without all the controls (textboxes etc.) becoming ludicrously small as the resolution increases? Maximizing the app does not help here. AFAIK, there is no good, general purpose solution to this yet. Does anyone know one?

  17. James Schend says:

    Apple has added a ‘zoom’ (prototype) feature to windows that allow you to magnify any window to give the effect Charles is looking for. I don’t know how close this feature is to being complete, but I’d expect it in either 10.5 or 10.6. So if the text labels in (say) Word are too teeny, you can hit some widget on the titlebar of the window to ‘zoom in’ and magnify everything. Now if only Apple had some way to magnify that micro-teeny cursor without making it a pixellated mess…

    I don’t know if Vista has anything like it in the planning, but it would be nice. Especially because laptop screens are getting higher (120+) DPI every year, and laptops are outselling desktops now.

  18. James Schend says:

    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. 😉

  19. Step says:

    On the maximizing front – I don’t. Once I passed 800×600 and went to 1024×768, 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. 🙂

  20. Nekto2 says:

    > 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.

  21. Charles says:

    "Apple has added a ‘zoom’ (prototype) feature to windows that allow you to magnify any window to give the effect Charles is looking for. I don’t know how close this feature is to being complete, but I’d expect it in either 10.5 or 10.6. So if the text labels in (say) Word are too teeny, you can hit some widget on the titlebar of the window to ‘zoom in’ and magnify everything."

    No, I am not looking for any effect that would require me to scroll my desktop or have parts of it appear disproportionate to other parts. What I meant that rather than running 800 x 600 at 96 dpi, I would want 1600 x 1200 at 192 dpi. Fonts would display at 16 pt instead of 8 pt, 20 pt instead of 10 pt, etc. Icons would be 32 x 32 instead of 16 x 16. There would be exactly the same amount of information on the visible screen–something 5 inches high at 800 x 600 would also be 5 inches high at 1600 x 1200–but it would look much sharper.

  22. Somebody says:

    "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?

  23. jojjp says:

    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.

  24. Charles says:

    "I don’t understand why you would want the information on the screen to get bigger as you increase the resolution."

    Reduce eyestrain.

  25. Richard says:

    > Just can’t imagine how a primary window can be not maximized…

    At 1600×1200 in word, most of the space would be wasted outside the page margins. Even if it weren’t that’s too long a line to comfortably follow with the eye.

    (About the only things I run maximised are those were the extra width is usefully used: Visio, Project and Visual Studio (where it is the tool windows making use of the horizontal space.)

  26. My first experience in Office was working as an intern program manager on

    Outlook 98.  During…

  27. Speculate all you want; the proof is in the pudding.