I'm In Louvre! (Galleries: Part 1 of 3)

  • Article

As I mentioned last week, the Office 12 Ribbon was designed to host a variety of control types.  Most of these control types have been around as common controls in Windows for over a decade: push buttons, checkboxes, radio buttons, edit controls, combo boxes, etc.

In addition to these, we designed a new control type for the Office 12 user interface that was conceived from the start in partnership with the Ribbon.  This control is called the "gallery" and it's debatably the single most important concept in the Office 12 UI.  It is the Ribbon and the gallery together through which the user interface presents the power of Office in a way that more people can take advantage it.

(OK, I can't believe I'm seeing Donald Trump on TV in overalls singing the "Green Acres" theme song during the Emmy Awards show. This has got to be the new low point for American television. Awards shows have officially jumped the shark. Ugh. I digress...)

Anyway, at its heart, the gallery is a simple concept: a control designed to present a choice to the user visually.  The most familiar-looking flavor of gallery looks somewhat like a menu with better graphics; it's called a "dropdown gallery."


(click to enlarge)

In addition to the menu-like representation, the gallery control also supports a very useful grid layout:


(click to enlarge)

All of the gallery layouts support the same basic capabilities: the ability to display arbitrarily-sized graphics; the ability to have a label and/or sub-label; the ability to have a zoom-in effect on hover; the ability to group and filter within the gallery; and the ability to support live previews.

The most special flavor of the gallery is what we call the "in-ribbon gallery."  Just like it sounds, an in-ribbon gallery places the content of the gallery itself within a chunk in the Ribbon.  While the control still supports the filtering and zooming capabilities of the dropdown flavor, content destined to be in-ribbon does have certain limitations (such as a maximum height for artwork bounded by the height of the Ribbon.)  Here's an example from PowerPoint:


(click to enlarge)

The gallery gives us a lot of flexibility to represent functionality visually, and we've tried to take full advantage of that capability.  Our internal builds of Office 12 already sport several hundred galleries throughout the product.

Over the next two days, I'm going to write about two ways we use galleries to help people create beautiful documents and to get expert-like results without actually being an expert.

(Confession: I've never been to the Louvre, but I'd love to go. I did read "The Da Vinci Code" though; I don't suppose that counts.)

Comments

  • Anonymous
    September 19, 2005
    One of the problems we run into more and more is that we are reaching Excel's memory limits (see for more info http://support.microsoft.com/?kbid=313275)

    So my question is...How do all of the these new graphical goodies figure into the memory usage equation and is Excel getting the ability to use more available system memory?

  • Anonymous
    September 19, 2005
    Headtoadie:

    Not sure on that specific issue, I've sent a query off to the Excel team.

    In terms of the overall memory requirements of the new UI, our goal is that it doesn't adversely affect performance.

  • Anonymous
    September 19, 2005
    I've just watched the Channel 9 Office preview video and I'm excited about the new UI. I think there are a great many ideas in there that will aid the 'discoverability' of features. Anything that means I can use unfamiliar tools more efficiently is a good thing. I look forward to having a play when beta time comes around :)

    A related question - do you know (or can you find out) what the Office 12 UI font(s) is/are (i.e. the one in the Ribbons, on the tabs, on the title bar)? Is it Longhorn only or can I mock up some of my own Office-style UIs in Windows XP once I find this out?

    Thanks for the informative blog. Keep it up!

    Dave

    P.S. I've been to the Louvre. I spent a day there, but it was barely enough to catch the 'highlights'. It's vast and well worth a visit. Nearby Notre Dame is stunning too.

  • Anonymous
    September 20, 2005
    Great work to you and everyone in your group! I'm really excited both for the release of Office 12 and the inevitable changes the new Office 12 UI will encourage in other applications.

    Suggestions for visiting the Louvre:
    1. Wear good shoes
    2. Wear an iPod with noise blocking headphones (tour groups can be loud and bothersome)
    3. Go in the early morning, before the crowds and before you're already tired of walking
    4. Leave helpful or glowing comments in the feedback book, in French, and a museum curator will reply by postal mail (makes a nice souvenir)
    5. Don't try to see everything in one day

  • Anonymous
    October 02, 2005
    Hi.

    Nice UI screenshots. I'm not sure you're allowed to, but could you do some videos of the UI (with a tool like http://www.debugmode.com/wink) ?

    --

    Beeing a great fan of the Louvre, I'd suggest you to take several days to enjoy it because it's really big and some rooms are not open every day.

    And if you're into museums, be sure to take another day to visit "Le musée Guymet" (my prefered museum after the Louvre), still in Paris (http://www.museeguimet.fr, there's an english version of the site).

  • Anonymous
    October 07, 2005
    I've just discovered your blog, it's very interesting. Regarding the gallery control, why couldn't you use an ordinary list view control? Gallery looks pretty much the same to me (the new list view from the common controls library v6 offers this view modes, IMHO).

  • Anonymous
    March 27, 2006

    This is the fifth part in my weekly series of entries in which I outline some
    of the reasons we decided...

  • Anonymous
    April 04, 2006
    This is the fifth part in my eight-part series of entries in which I outline some of the reasons we decided...

  • Anonymous
    October 27, 2008
    PingBack from http://mstechnews.info/2008/10/the-office-2007-ui-bible/

  • Anonymous
    May 31, 2009
    PingBack from http://woodtvstand.info/story.php?id=1286

  • Anonymous
    June 01, 2009
    PingBack from http://uniformstores.info/story.php?id=3624

  • Anonymous
    June 01, 2009
    PingBack from http://uniformstores.info/story.php?id=17613

  • Anonymous
    June 12, 2009
    PingBack from http://toenailfungusite.info/story.php?id=7957