Results-Oriented Design (Galleries: Part 3 of 3)

Over the last few days, I’ve explained some of the major capabilities of the gallery control in Office 12 and shown how we use it to make formatting objects easy.  Today, I want to write about how we use galleries in Office 12 to make the entire product–not just applying visual styles–easier to use.

Office has this fantastic templates web site where people download millions of resumes, form letters, newsletters, greeting cards, and all kinds of different starter documents.  One of the things we did early in the design of the new UI was to download a number of our most popular templates (as well as look at templates from other products) and try to learn why they were popular.  One of the most obvious things that jumped out at us was that most of the templates used the product in more depth than the average person.  For example, many templates rely heavily on text boxes and pictures that have the text wrap around them in order to get a polished effect.  Yet, in the usability lab, we found many people unable to perform this seemingly straightforward and common task.

It turns out that moving a picture to the upper-right corner of a page and having text wrap around it is a pretty involved task.  Not because the commands or concepts involved are themselves too complicated, but because you need to know how to synthesize a set of unrelated commands and settings together in order to get the desired result.

To do it right involves some combination of:

  • Select the Picture
  • Change Text Wrapping to Tight
  • Enable “Align Relative to Page”
  • Align Right
  • Align Top
  • In the Format Picture dialog, click “Lock Anchor”

Again, it’s not that any of these actions are too hard to do in themselves, it’s that it takes a pretty detailed understanding of Word to realize that you need to find and use these commands together to get the result you want.

In Office 12, we use the term “Results-Oriented Design” to reflect a subtle but powerful evolution in our thinking about how software should work.  Instead of presenting many different small commands as the primary interface to functionality, we believe in presenting the likely result the user is looking for first, and then exposing the individual advanced commands secondarily.  The key to this approach is the “pick and click” mentality of the gallery applied to richer features.

Let’s take the picture example again.  Word 12 introduces a Position gallery in the Picture Tools tab:

(click to enlarge)

As you can see, we’ve taken the most commonly sought-after results and presented them in a gallery.  Clicking the desired result applies all of the right features behind the scenes without needing to understand all of the settings that are being applied.  And once the picture is in place, you’re free to nudge it over, shrink it, crop it, or even tweak the underlying advanced properties.  Tell us which result is the closest to what you’re looking for and we’ll get it close enough that you can easily tweak the rest to get it exactly right.

We’ve also applied this concept to the UI in order to improve efficiency.  Although changing margins in Word is a common operation, people do tend to set the same margins over and over.  For instance, I always set my margins to 1″ on each side.  Other people use 1″ on the left and 4″ on the right for comments as a standard.  I’m sure you have your own favorites.  Here’s a Margins gallery that shows a more results-oriented approach to quickly setting your margins:

(click to enlarge)

(Of course we remember your custom settings so that you can quickly apply them again and again.)

Here’s another example from charting.  Getting the layout you intend for a chart today can be a challenge.  You have go in and out of the Format Chart dialog with different elements of the chart selected to set combinations of controls to get the result you intend.  I saw a member of the chart team do a presentation where she showed that some of the most common chart layouts that used to take 50 clicks now take only 1 click, thanks to a gallery of chart layout results:

(click to enlarge)

So, when you hear the term “Results-Oriented Design”, it’s really just an overly fancy term for a simple concept: Present the functionality in your program at a slightly higher level.  Think about the results people are trying to achieve and present the interface as those results first, and the commands and settings that enable those results as a secondary option.

I like to think of it this way: figure out 25 things people want to do with your app and phrase them as questions: “How do I do X?”  If your UI enables you to answer those questions in a single sentence rather than a 5-item bulleted list, you’re on the right track.

Comments (10)

  1. anon says:

    I am not sure to completely agree on the chart template thing. It cannot be one click, unless it’s a trivial one and the person does not care the overall look of the chart. If the person does not care, then I’m sorry but you can take Excel right now click on the chart button and then click Finish. Where is the click count improvement?

    Secondly, because the chart engine is bound by the chart area, and the template will be applied into it, it will result in many cases in an ugly chart because there are too many labels on the axis, or of the title overlaps the plot area and/or the legend and so on. What Excel does then? prompt the user? Nope. What Excel does is shrink chart elements so that they fit together. While the solution could be to start resizing the chart area so that chart elements are given enough space to show.

    Another comment is on the "desired result" thing. What prevents you from showing real previews rather than bitmaps? Isn’t real preview what Excel does today in the chart wizard? I am pretty sure you kept the chart wizard, but if the new UI is meant to replace it then it’s a loss.

  2. Step says:

    I’m going to second anon’s comments, and add my own take. I’ve been thrilled by your posts so far, but this one didn’t seem to answer much for me. For example, the picture/text thing. Doesn’t Office already have this? Of course, I can’t get it to work properly, or at all half the time. The new interface looks like it will be easier to get to, and hopefully make the feature work, but it seems that was already the promise which is now being fulfilled. Not that I’m complaining about that, mind you.

    I guess what I don’t understand is how all the "invisible" stuff is being addressed, if at all. One of the largest sources of frustration that I’ve seen over the last 5 years, is in dealing with things like tabs, spaces, indents, chart and picture placement. I’m talking specifically Word right now, b/c those are the clearest examples of what I mean.

    So even though we can now pick a result that looks like what we want, roughly, how do we tweak it? Is it still a huge fight? B/c if it’s close but we can’t get it closer, then it’s really not much better than before. I can already do that now (get it close but not perfect) with relatively little effort. It’s the little invisible alignment type things that drive me, and the several people I’ve worked with in two different environments, nuts.

    Does that make sense? I’m sure you must’ve seen the same issues in your usability testing. It’s very similar to one of your first posts, talking about not automating and trying to guess what the user’s doing. I’ve kind of mixed that in with having the "advanced" or "tweaking" adjustments needing to be easier to use / more apparent what effects they’re causing.

  3. jensenh says:

    I probably wasn’t clear enough in my writing. One of the key pieces is that you can get the last 10% easily. Once the picture is positioned close to where you want it, moving, aligning, cropping can be done freely because the underlying properties (such as text wrapping) have been set.

    Tomorrow, I will talk againg about the relationship between a gallery-based approach and an advanced, command-based approach. Both are valid ways to work in Office 12, and I try to explain the relationship tomorrow.

    I suspect I’m not doing a totally clear job of explaining a very rich UI in a few paragraphs of text and a couple of screenshots. I’ll keep working on it.

    Thanks for the comments.

  4. zz says:


    Perhaps you can do a screencast ala ?

    Sometimes these static pictures do not convey the power of what trying to demostrate. I know there is already Channel 9 demo, but to it was not very in-depth. Perhaps you can do better.

  5. jensenh says:

    A webcast would probably be helpful and, I bet as we get further down the line that’s something we can do.

    For those who do want more information, the PDC DVD set has every breakout session from PDC (including my in-depth overview and also Savraj Dhanjal’s session on the extensibility of the new UI). It’s expensive at $499 but, if money’s no object or you can get your company to buy it for you (or you know someone in your company who went to PDC and thus is getting the DVD for free that you can borrow), that might be one way to go.

    You can buy the DVD set at:

  6. Leanne Owen-Keenan says:

    Hi Jensen

    Fascintating stuff so far – got to your blog via Chris Pratley. Nice to be able to feel that it’s not just usability sessions that might have input to stuff software houses are doing, so well done there!!

    So far I like the concept and apparent implementation of the ribbon. As an ex-trainer of MS Office products I can see it will be easier to get newbies/novices up to more than the usual 80/20 rule (80% of users only use 20% of the features).

    Having said that, could somebody over there please, please, please recognise that it’s more than the American market that want to use the in-built templates and galleries and so on but they are just not suitable for "our" market. I’m a Kiwi living in Britain so I’ve seen how two white western-based cultures use their office software. As yet I haven’t come across one company that can, e.g., use the standard layout for legal numbering. Obviously we can all set up our own but couldn’t the usability labs take input from other countries’ users too and at least have some built in templates/galleries suitable for them?

    Sorry, not really intended as a moan but it seemed a good place to make a comment, especially with all the good stuff that looks like it’s on its way with this new version.

  7. A few posts ago when I described the work we did in the area of “great looking documents”, I mentioned…