Menus

Some types of conceptual groups

Grouping like items together is a way to make scanning a list of items easier. For example, similar menu options are usually grouped together:

Conceptual_group_photoshop_6
Example from Photoshop Elements

On the web it's common to see links organized into named groupings:

Conceptual_grouping_web
Example from B & H Photo

The ribbon in Office 2007 puts functions into named groups, but the labels for those groups actually appears below the items rather than above. (Click to see full-sized image)

Conceptual_group_ribbon

I would guess this placement is because the ribbon is located above the working area. So as your eyes move from the working area to the ribbon, you are essentally scanning in reverse (bottom to top), which could warrant the bottom-placement of the categories.

Ribbons

The ribbon in Office 2007 is clearly influenced by tab-based global navigation used in web sites -- complete with the concept of "Home."

Bn_navigation_3

From: Barnes & Noble

Excel_ribbon_2

From: Excel 2007

Not surprisingly, the idea of a ribbon (essentially, a horizontally-oriented menu) is now showing up in web applications. Smartsheet, a web-based  collaborative spreadsheet, uses a ribbon-like approach for its menu of commands.

Smartsheet_ribbon_2

From: Smartsheet

I think we will see more merging of conventions between desktop and the web as the distinction between these two environments becomes less and less relevant.

My Photo

About

  • Blink Interactive is a Seattle-based user experience consulting firm. Our design library is an informal collection of design examples with commentary.

Search

Widget

  • Get this widget from Widgetbox