Partager via

Enter the Ribbon

  • Article

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 16x16 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