Wesner Moise

Ribbon UI

 

Patrick Smacchia, developer of NDepend, asked me how he could improve the user interface of his product. I referred to my experience with the three main component suites that I use in NStatic and am satisfied with: These are DevComponent’s DotNetBar, Actipro Software’s SyntaxEditor, and Developer Express’s DXExperience; they are all outstanding. I really care as much about form as function, and they all deliver both.

NDepend’s user interface was somewhat unorthodox, and I felt that he could make a better impression with a standard user interface, which apparently he is moving to in version 2.4. Patrick just put up a post on “UI Matters: Menus and Toolbars vs Office 2007 Ribbons.”

He raised the question of whether the Ribbon user interface was more appropriate that the traditional “command-bar” user interface used in Visual Studio and repeated a remark from Bob Powell, a UI guy.

“If developers are your users, the closer your UI to Visual Studio, the better.”

NStatic, being a developer tool, Patrick suggested, should resemble Visual Studio rather than Office. He also mentioned that if one I integrated my product into VS the user experience impact would be minimal.

I have actually thought about the proximity of the user interface to Visual Studio as can be seen in my prior post on Toolbar Icons in 2004.

I do believe that an application has to match the Office user interface to be respected. First, most users are familiar with Microsoft applications. Users expect other applications to use the same shortcuts and operate the same way. They tend to be more receptive to an application that feels natural than to one that requires learning a new interaction model. Second, users are most likely to pay for a product that appears similar to another product that they have already paid for. Users often judge the quality of products through non-merit-based, surface-level heuristics, such as the conformance to a well-known, well-respected standard like the Office user interface.

While I have examined any data, met with any users, or conducted any usability studies, I thought the Ribbon interface was the best path for me to take.

Much of the VS UI functionality has been retained: I switched my text editor to Actipro Software because of its higher fidelity to Visual Studio. The window docking behavior is preserved and many of Visual Studio’s task panes have equivalents in the new NStatic application. I am determined to reproduce many of the shortcuts and behavior as much as possible, so that learning costs are minimal. As many VS developers also use Office, learning the ribbon is not likely to be a problem.

The Ribbon UI, while apparently a dramatic improvement, can be seen as a logical evolution of the work on combined menus/toolbars (aka, “command bars”) that Office group started in Office 97 and continued forward ever since. I was never a fan of the original command bar work (which merged menus/toolbars and flatten the look to make them more web-like) and emphasized rarely used features like detachable menus, custom toolbars, and vertical/bottom placement. The command bar interface always felt dated and sub par compared with what can be seen on the web and other applications.

The new ribbon is more discoverable, properly designed by actual industrial designers, makes better use of the space, and has a lot more useful properties such as hosting controls. It’s also visually arresting and many readers have called the NStatic interface, stunningly beautiful—a compliment that I would not expect with the traditional command bar interface. Office 2007 is slick, and Office sales seem to reflect that.

The ribbon fits in with my strategy much better: My goals including building a number of applications, some of which are non-development, off of the same code base, and minimizing unnecessary differences between applications. I may attempt to release a ribbon-based notepad. One disadvantage with the ribbon, though, is that it requires more commands to fill up the user interface.

 

Please enable JavaScript to view the comments powered by Disqus.

Promo Section Heading

You can use this section to promote your side projects etc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

image