Every use of the ribbon I have seen so far single panel 'canvas' programs, where grouped functionality is in the ribbon.

I have been doing some analysis on some back end software which my company develops and they have proposed using a ribbon, but each option is acting as navigation as it is changing the central panel content, not functionality.

Is using a ribbon in this manner an intuitive and usable method for navigation? I am concerned because it is not following convention.

  • To clarify, could you explain why this is considered a Ribbon rather than a more conventional horizontal navigation? (as you say it will act as navigation). Is there a particular visual treatment or trait of the proposal that concerns you? e.g. Is it the grouping? – Jay Jun 26 '12 at 10:50
  • @jay Has the hallmarks of a Ribbon, such as grouping and large icons. Lots of influence from the Word ribbon – Wander Jun 26 '12 at 15:49
  • Thanks. Then I think the example in my answer below should help. – Jay Jun 26 '12 at 15:52

The simple answer is no, because, as others have said, it is not what a ribbon is expected to be used for. Therefore it breaks the ribbon model, and that - as a rule - makes it bad UX.

Some form of menu structure is the more common form of navigation system. However you make them look - the choices can be graphical if that works - they should look and feel like a menu - that is a place where you select a new something to go to.

Remember, breaking conventions makes things harder to use intuitively. If the suggestions are for a ribbon because that is a familiar idiom, them you lose any benefit from this by having something familiar work in a different way.

It is rather like having doors with the standard grab handles on them, but that you have to push upwards to open. It may seem cool, and the door still looks like a door, but it is wrong in every way possible.

| improve this answer | |
  • +1 Agree. False affordance or using something familiar in unfamiliar ways magnifies frustration. – Jay Jun 26 '12 at 15:18
  • Menus are for commands. Navigation is done through tabs, links, and maps. – dnbrv Jun 26 '12 at 16:10
  • Horizontal menu-type things. Like at the top of SE pages. Yes these are links, but menu was the closest I could find. I mean a set of links across the top or side. – Schroedingers Cat Jun 26 '12 at 17:23

Microsoft has developed the ribbon to replace numerous toolbars used in its software. There're very comprehensive guidelines on how to design one for any other application so that the experience stays consistent. The key principle is organizing commands into tabs and groups by workflow tasks & functionality respectively. Thus, using it for navigation sounds like a violation of those principles.

That being said, it's absolutely possible to use tabbed navigation in desktop applications. Moreover, it's possible to combine ribbons with tabbed navigation, like Excel does:

enter image description here

| improve this answer | |

From what I understand, if it is functioning as a navigation then it strictly isn't a ribbon (as this is Microsoft's way of organising commands into tabbed functional groups).

If it is functioning as a navigation then I initially imagined a Mega dropdown.

Mega dropdown example

However Mint.com takes a slightly different approach that is worth a look. The 'Ways to save' tab has a list of actions split by type (in this sense like a ribbon). It is effective because it demonstrates the navigation hierarchy and provides icons as cues. The small arrow under Credit Cards hints that this option is selected. Also this indicates that selecting another option should update the screen.

This approach does not rely on the secondary options being revealed and hidden as with the mega dropdown approach and therefore could be closer to what you need (Depending on your specific scenario).

Mint Ribbon-like menu

To summarise: I wouldn't recommend using the Ribbon as this is not what it was designed for. However you can take inspiration from some of it's better traits to organise and present large amount of options (see mint example).

| improve this answer | |
  • Mint doesn't have a ribbon - those are very obvious tabs (notice the styling on the content border under Credit Cards on the screenshot). – dnbrv Jun 26 '12 at 16:11
  • @dnbrv Maybe I should have been more clear there. I am not saying Mint uses a ribbon. We established that a true ribbon isn't for nav. I am saying the approach Mint have used for the tabbed nav might be appropriate. It employs some of the Ribbon traits in a nav context (persistent secondary level, organised within tabs, grouped options, use of icon etc). – Jay Jun 27 '12 at 8:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.