Ribbon

Problem

People need help finding, discovering, and using capabilities of software applications.

Solution

Surface the capabilities of your application through a tabbed ribbon using task-based grouping and informative and illustrative visualizations.

Context

• You have many capabilities to expose—the ribbon can be overkill in simpler situations.
• You can organize your capabilities into meaningful, task-based groupings, preferably based on empirical usage and usability testing.
• You have the resources to create meaningful visualizations for icons of different sizes and illustrations for galleries.
• You are willing to license the approach from Microsoft (http://msdn.microsoft.com/en-us/office/aa973809.aspx). Essentially, you can’t use it to compete directly with Microsoft Office. It is free and royalty-free.

Rationale

Technically, there’s more to the “ribbon” than the ribbon. Microsoft calls the whole kit and caboodle the Microsoft Office Fluent user interface, which is broken down as follows, but the main innovation in the interface (and the most notable part) is the ribbon; it’s what people remember and talk about and is why this pattern is called Ribbon and not Office Fluent UI.

The impetus behind the creation of the ribbon was an effort to make the Office products easier to learn and use. In the beginning, Office first had a simple menu as most apps have. Then they introduced their toolbars, then action panes. It got to where for some users much of the screen was taken up with these various, competing affordances, and the menus themselves were too deep and complex with many hidden dialogs. They tried “intelligently” hiding menu commands to simplify the menus, but that was not received well as it didn’t expand the hidden items in reliable places, and they more often than not did not hide the right things at the right times.

The ribbon eliminates the toolbars and the usual menus and drastically reduces the need for dialogs and action panes. It categorizes the hundreds of capabilities according to related task (e.g., inserting, layout, references, data, etc.), and provides further task-related grouping within those task-based tabs. It uses visual affordances (such as icons and previews) along with galleries and live previews in the document itself to help people more quickly find and determine appropriate commands. It hides commands that only make sense in particular contexts into contextual tabs that show only when applicable; it uses the Home tab for the most common commands (based on their extensive usage tracking data), and it uses Drop Down Button controls to show the most common commands in command groups while retaining easy access to others. Finally, it uses varying visual sizes for commands to provide further visual prioritization.

All of these things—task-based tabs, contextual tabs, visuals and previews, and research-based visual prioritization—all contribute to a much more user and goal-centric approach to surfacing the capabilities in applications that use the ribbon. If the organization in the ribbon matches the way people work, it is a no-brainer that it will be an effective tool, but it can also be a terrible choice that can make a once-fairly-usable application much harder to use if the organization does not match working styles, so use with care.

In addition, the ribbon can be a good choice to conserve space, especially if you have many toolbars or other Command Area and Button Groups implementations. It can hide all but the tab titles for minimal intrusion, but even expanded, it can end up taking less space than a menu bar and several toolbars and/or action pane (as exemplified here: http://blogs.msdn.com/jensenh/archive/2005/09/15/467956.aspx).

Implementation

By far, the most critical step in implementing the ribbon is to carefully organize the capabilities of your application. It is doubtful you will have the usage tracking and testing resources at your command that Microsoft had, but you should do your best to get some real usage data and if you can’t get that, do as much usability testing that you can of potential organizations. If you’re not sure where to start, using the card sorting technique with some potential users can be a great jumping off point.

You need to think about at least two levels of grouping—the tab and the command groups within the tab. Once you have those two levels, try prototyping different layouts—paper/whiteboard is fine and probably better than jumping straight into the technology implementation. If you have commands that act on the same object or perform similar functions, consider if Drop Down Button applies.

Where possible, identify visualizations to help distinguish between commands, and consider creating galleries for commands that have varying and distinguishable visual outcomes on the same object—this helps people to predict the right choice without having to try and undo. Usability-test your low-fidelity prototypes before investing in making the related artwork for the various visualizations; you can try different combinations of icons and sizing to find an appropriate layout.

Once you find a ribbon layout that tests well, then you can design the artwork for the various visualizations and make it a reality in software. Since it is a very complex control, you should strongly consider using one provided by a third party like Infragistics or your platform vendor if one is available from them and meets your needs.

Here are some more specific guidelines:

• Only put each command in one place in the ribbon and make sure every command can be found via the ribbon, the application menu, or the quick access toolbar.
• You should not let users customize the tabs. Since commands are only available through the ribbon and they are laid out very carefully using, potentially, customized dynamic layout updates, it could really break the interface to let it be customized, leaving people confused and lost; however, the quick access toolbar can be used for customization to let them organize the commands they use most often that way.
• Put labels on every command; there are studies that indicate people won’t click on unlabeled 16x16 icons unless they’re very familiar (such as cut, copy, paste).
• The standard tabs (non-contextual) should only have commands that apply to more than one context; if they are limited to a particular context—prefer contextual tabs.
• You need to think about how to scale the ribbon when its container is resized. Guidelines for scaling the ribbon are:
• Don’t add or remove commands—they should always be available in the same group.
• Don’t change the grouping by, e.g., rolling commands into menus that aren’t already part of a drop-down; instead, make a group button (at the smallest sizes) that pops out the group in the same format that it is in when not collapsed.
• Keep the labels visible as long as possible unless it is a very well-known icon.
• Lastly, you’ll need to license the Office UI Interface and follow the Office UI guidelines. The license is very open and free, but the guidelines are strict. Infragistics controls can help you ensure that you follow the guidelines.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Ribbon pattern can be implemented using combination of the following ASP.NET controls: WebTab, WebDropDown, WebDataMenu,WebPanel, WebToolbar. Check out the samples browser to see it in action.

Windows Forms

You can use the NetAdvantage for Windows Forms WinToolbarsManager to implement this feature. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called IG Paint with Ribbon to see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF xamRibbon. If you download the NetAdvantage for Win Client bundle, you can find a section in the xamFeatureBrowser dedicated to the xamRibbon control.

Sources

Jensen Harris, An Office User Interface Blog

Microsoft MSDN, Microsoft Office Fluent User Interface, http://office.microsoft.com/en-us/products/HA101679411033.aspx

Microsoft MSDN, Information about licensing the Office UI

Tags

Commands, Navigation.