Enter the Ribbon


One of the core components of the new user experience is something we call the “Ribbon.” The Ribbon is a strip across the top of the window that exposes what the program can do. Here’s an example of what a Ribbon looks like:


(click to enlarge)

(Note: If you have only seen screenshots of the new UI, you’re missing out on seeing what the product can really do. Watch Julie’s video of the new UI on Channel 9 to see more of the full picture.)

One of the concepts behind the Ribbon is that it’s the one and only place to look for functionality in the product. If you want to look through Word 2003 to find an unfamiliar command, you need to look through 3 levels of hierarchical menus, open up 31 toolbars and peruse about 20 Task Panes. It’s hard to formulate a “hunting” strategy to find the thing you’re looking for because there’s no logical path through all of the UI.

Office “12” consolidates all of the entry points into one place: the Ribbon. So if you’re trying to find a feature and don’t know where it is, the scope of your search is drastically reduced. Click on the leftmost tab, and click across the tabs until you reach the end. That it. It’s either there or it’s not–there are no other “rocks” to look under, no other places we’ve hidden functionality. We’ve found in early tests that people find it easier to discover how to do new things in the Ribbon, and they’re more apt to explore the UI looking for better ways to get things done.

The Ribbon supports 2D layout of controls, meaning that the kind of command presentation can look sometimes like a toolbar, sometimes like a menu, but other times more like a dialog box, Task Pane, or even a web page. The Ribbon gives us, as UI designers, a great deal more flexibility to communicate in our design things like relative relationships between different features. Key functionality can have large buttons, while supporting functions have smaller, grouped controls. As you can see in the pictures below, there are a lot of different layouts possible.


(click to enlarge)

Something we’ve known from usability tests for several years now is that most people don’t click on an unlabeled 16×16 icon. Sure, Bold and Italic and Center and a few others get a lot of clicks, but the curve falls off after the first 8 or so. As a result, we try to label every command in the Ribbon. We are also upgrading the overall iconography of the product (something that’s not reflected in the screenshots you’re seeing), but even a big, beautiful icon can’t help you find a command as well as that icon + the word “Margins.”

Each Ribbon “tab” contains a set of “chunks.” (You can tell marketing hasn’t spiffed up our codenames yet!) A chunk is a set of related commands within a tab. Not only does this help group commands to make them easier to scan, but it allows us to not have to repeat the same words over and over in the command names. For instance, in a “Border” chunk, we can have Color, Weight, and Style commands without having to repeat “Border” in front of each of them.

One of the neat things about the Ribbon is that it can be closed. For times when you want the maximum concentration on your document, you can collapse the ribbon to just a single line. Buttons you have added to the Quick Access Toolbar (the area at the top where the Save button is) stay around, as well as access to the Floatie (watch the video or stay tuned!) and context menus. So, sometimes when I’m just trying to get ideas down on the page, I collapse the ribbon and use my whole screen for typing. Then, when I’m beautifying and laying out my document for others to see, I expand the Ribbon and use the full functionality of Word to get the output I expect.

I had another fun day at PDC today. The highlight of the morning was having a developer from the UK tell me that “RibbonX (the extensibility model for the new UI) was 10x more straightforward than the current system.” Rock on. We’ve gotten a lot of thoughtful feedback from developers this week about how to continue to improve the RibbonX system, but hearing that we’re on the right track with the declarative, XML-based approach is great to hear. The highlight of the afternoon was a casual sitdown with Paul Thurrott, who missed seeing my presentation on Tuesday. I gave him the same walkthrough and he had a lot of thoughtful and useful feedback for us as well.

Comments (70)

  1. mabster says:

    Hi Jensen,

    Will we get to see a Ribbon .NET control any time soon? Perhaps even one that we can use in .NET 2.0?

  2. jensenh says:

    No information to share on a potential .NET control, but this has been a common query here at PDC as well and that’s something we’ll definitely be thinking about.

  3. radicalmente says:

    A parte l’infelice analogia nel titolo,
    ecco un bell’articolo che spiega i perchè e i percome del Ribbon,…

  4. Max Palmer says:

    Hi Jensen,

    Like others I like the new ‘Ribbon’ concept and believe it to be a big improvement on the never ending cascade of menus. I would also echo the request for a .NET control to be made available if possible.

    Also great to see a blog on UI design – one of the areas I am passionate about (so much so your blog has just been set to my homepage!). I had a great time at my first PDC. My only regret was not leaving the keynote to take account of the discount on the JasJar! Mental note – don’t be so polite, naive and loyal in future – arrrgh!

  5. 韩冰 says:

    Looking forward to office 12

  6. Adam Young says:

    Will the ribbon be user-customisable? I mean, in the same way that currently you can select which commands appear on a particular toolbar?

  7. Kyle says:

    I’ve only recently been following my passion into HCI and UI design, and I have to say, as someone who recently just switched to OS X, Office 12 is the first thing to get me excited about a Microsoft product in a long time. Wondering how/if this will transfer over to the Mac version of Office? As a recent convert, I find the Mac Office (visual)interface to be a big improvement over the Windows version, while I miss the keystrokes on my PC.

    Great blog, too! Love to see and hear the Microsoft User Experience designers speaking out.

  8. Tweak says:

    Inspired by the new Ribbon interface design that is being developed for MS Office 12 [1], I wanted to see what you get in Opera, when doing away with the normal top-menu, panels and toolbars. Without sacrificing access to all …

  9. Today, just thinking aloud…
    A minor design conundrum we face is as follows: based
    on the data we collect,…

  10. As I’ve mentioned before,
    Task Panes made their first appearance on the scene in March 2001, in Office…

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

    Outlook 98.  During…

  12. A great deal of the time spent in an Office development schedule after Beta 1
    is put towards addressing…

  13. As some one who cares about User Experience, I have been following Jensen Harris blog for some time now, but I actually wanted to use Office 2007 to do real work before commenting on UX.

    I have been  …

  14.   I installed the Vista Ultimate Beta 2 and Office 2007 Beta 2 bits on my Motion Computing M1400…

  15. Another misconception that I read is regarding the new Ribbon interface: some people apparently are expecting…

  16. Mi area de trabajo ha pasado de ser Windows XP SP2 a Windows Vista Beta 2 con Office System 2007 Beta…

  17. Take Microsoft Office 2007 for an online test drive. You need IE 6 or higher and a Citrix plugin that will automatically be installed. I had seen photos of the new ribbon user interface but wasn’t sure that I liked it. After using it,

  18. Bonski's Box says:

    Microsoft revamped it’s Office UI with the new Ribbon style , which is essentially a cool looking toolbar

  19. As anyone who starts using Office 2007 likely knows, one of the more dramatic changes is the elimination of traditional menus and toolbars. These have been replaced with what Office calls the Ribbon. The short explanation of this new user…

  20. Windows Vista and Microsoft Office 2007 launched on Tuesday morning, providing computer giant Microsoft with a much-needed revamp for two product lines accounting for a majority of the company’s revenue. Windows Vista is Microsoft’s first consumer operating

  21. Mac Mojo says:

    Software evolves. Let’s talk about the evolution of the user experience for Office 2008 for Mac.

  22. Dating says:

    One of the core components of the new user experience is something we call the "Ribbon." The Ribbon is a strip across the top of the window that exposes what the program can do. Here’s an example of what a Ribbon looks like: (click to enlarge)

  23. Why business software just sucks in general

  24. Why business software just sucks in general