October 15th, 2008

Ribbon control in the Vista UX Guidelines

I have already written about the Ribbon control reaching beyond Office into the core applications that are scheduled to be shipped in the next Windows version. This is gaining even more traction with the inclusion of Ribbon in the official MSDN Windows Vista User Experience (UX) Guidelines. It had been also known as Command Bar and Fluent Interface in the different UI Design Guidelines, but it appears that the name “ribbon” is back.

The current preliminary documentation does not only provide the answers to “how”. One of the more important aspects is answering the “when” and “what not to do”. The introductory section delves into the different questions that must be considered before using ribbon in your application. And while the subsequent sections are mainly focusing on the different UI elements of ribbon, they also provide the “correct” and “incorrect” usages of these elements. Here are three examples of incorrect usages from the document:

This is a mockup design of “ribbonized” calculator that clearly has nothing to gain from putting the controls into a ribbon. Following the usual physical layout of the calculator buttons allows users to quickly discover the functionality; there is enough space to arrange all controls so that they can be accessed with a single click; the number of commands is relatively low (in tens); finally, there is no “content area” for the calculator – the result is just a wide single line text box.

Here, the application menu button is added to a window with a menubar. The UX Guidelines are strictly against combining the application menu button with a menubar or a toolbar. In this case, the application menu button aims to replace the “File” menu, but all the other menus are still there.

Here, all the buttons in the ribbon are menu buttons displayed at full size. According to the current guidelines, you might as well use the menu bar and save the vertical space.

The “Program Command Patterns” document delves even deeper into making the decision on presenting the UI commands, discussing when it is appropriate to forgo the ribbon interface and use the more traditional elements such as menu bars, toolbars and direct command controls.