μεταcole

The Ribbon interface

Posted in all posts, IA, interaction, usability, UX by coleman yee on April 4, 2008

I’ve been using Microsoft Office 2008 for Mac for a few months and so far I’ve been quite happy with it. (Disclosure: I was given a copy by Microsoft.) One of the major changes in the interface is the introduction of the “Ribbon“. The Ribbon interface is a non-threatening and elegant way of organizing and presenting a lot of functions in a relatively small area.

The Ribbon first appeared in Microsoft Office 2007 (for Windows), but they managed to clutter it. The one in Microsoft Office 2008 for Mac is a lot more friendly.

(Update: Nadyne Mielke has informed me that the “Ribbon” in Office 2008 for Mac is called the “Elements Gallery”. I’ll still call it the “Ribbon” as it’s a lot more vivid.)

Before activation, the Ribbon occupies a thin strip, just enough for the labels (see circled).

Ribbon collapsed

Once an item is selected (see below), the Ribbon expands downwards, resembling the usual tabbed interface.

Ribbon expanded

The key difference from the usual tabbed interface is that the Ribbon can expand and collapse. It’s a small innovation, but it makes a load of difference.

At first glance, the Ribbon looks quite simple. That’s why it’s elegant – it looks simple and it’s simple to use, but there’s actually a lot of functionality there.

1. Labels and instructions

This lets you know what to expect.

The ribbon interface

When the mouse is on an item (circled below), the label text changes accordingly.

Option described

2. Filters to narrow down your search

All items view

The default “All” gives 15 pages of items in the above case. You can always narrow down your search (below).
Filtered items

Unfortunately, when there are too many filters, it overflows into a menu (below). Not so elegant anymore, but not a big problem those overflow items aren’t accessed often.

More filters

3. Additional options

For some items, there is an additional level of options.

Additional options

The Ribbon is deceptively simple. To get to the first item in the above diagram, you need at most 3 clicks: Document Elements > Header > Item 1

This is what we’re looking at in a hierarchical view:

  • Document Elements
    • Cover Pages
    • Table of Contents
    • Header
      • Item 1
      • Item 2
      • Item 3
      • (Next page)
    • Footer
    • Bibliographies
  • Quick Tables
  • Charts
  • SmartArt Graphics
  • WordArt

I mentioned that you need at most 3 clicks to get to Item 1 in the previous image. Well, the good thing about the Ribbon is the next time you need Item 1, 2 or 3, you might need only 2, or even 1 click. Think about it.

Besides reducing the overall number of clicks, the Ribbon interface presents a number of advantages over a drop-down menu interface:

The Ribbon needs less hand-eye coordination. If your mouse strays when using the drop-down menu, you’ll have to start over.

It allows for additional options which comes as a result of the space it occupies when expanded.

The Ribbon allows for bigger icons which comes with more space again.

The Ribbon is more inviting with the bigger icons and more space.

In other words, the Ribbon provides a better user experience for most users.

Microsoft is known for feature-packed (or bloated) software, not user-friendly software. But the Ribbon has shown that they’re still capable of useful innovations every now and then.

For more information, check out Enter the Ribbon by Jenson Harris, explaining some of the thinking behind the Ribbon. Jenson is the Group Program Manager of the Microsoft Office User Experience Team.

(Update: Check out evolution at work by Nadyne Mielke who’s a  user experience researcher in the Macintosh Business Unit – the guys behind Office for Mac.)

5 Responses

Subscribe to comments with RSS.

  1. John said, on April 4, 2008 at 9:52 am

    Coleman,

    I like the interface of Word 08 a lot; but I curse the program too much to keep using it. It’s buggy bad with inserting graphics into the document.

  2. coleman yee said, on April 4, 2008 at 10:41 am

    I haven’t had that problem. But it’s annoying using spaces with Office 08, but that could be a Leopard issue so I didn’t want to bring it up.

  3. Nadyne Mielke said, on April 11, 2008 at 8:33 am

    One minor point: Ribbon is the name of the new user experience in Office 2007 for Windows. In Office 2008 for Mac, we went a different route. We’re calling this different route the “Elements Gallery”.

    If you’d like to learn more about how it came into being, I wrote a post about it on the MacBU team blog a few months ago:
    http://blogs.msdn.com/macmojo/archive/2007/09/18/evolution-at-work.aspx

  4. coleman yee said, on April 11, 2008 at 10:51 am

    Nadyne, I still prefer calling it “Ribbon” as it sticks a lot better than the rather bland “Elements Gallery”.

    Thanks for the link and the info!

  5. Web Ribbon « μεταcole said, on April 12, 2008 at 12:46 am

    […] Comments (RSS) « The Ribbon interface […]


Leave a reply to coleman yee Cancel reply