Jensen Harris: An Office User Interface Blog : Galleries

Don't Forget To Check Your Filters

jensenh — Fri, 21 Apr 2006 17:00:00 GMT

Yesterday, a few of us spent the day until almost 10pm locked in a conference room meticulously reviewing all the tabs in the Ribbon. We've done these all-day marathon sessions a few times during the product cycle, and I find them to be extremely draining. By the end of the day, my head was just swimming with controls and labels and Ribbon scaling--and we only finished reviewing about half of the total tabs.

At this juncture, we're far enough along with the design that we're focused on trying to make sure that every detail is correct: every label as clear as it can be, every punctuation mark in the right place. We looked at the scaling of every tab at horizontal resolutions from 2400 pixels down to 200 pixels across and everything between, considering the ramifications of the scaling designs for all of the languages for which we ship a version of Office. We looked at consistency across every tab in the different apps, making sure that we're as consistent as possible in how the UI works and looks.

Going through this somewhat excruciating process reminded me of a few smaller features that I meant to write about long ago but haven't gotten around to yet.

Last fall, I wrote a series of posts introducing the gallery control in Office 2007. We use the gallery all over the place in the new UI to show visual representations of everything from simple formatting styles to the results advanced features will have on your document.

One of the unique capabilities of the gallery that I haven't shown or discussed yet is called the "gallery filter."

Simply put, when there are a large set of items in a gallery which can be well-categorized into several groups, we provide the ability to filter the list of items in the gallery directly from the gallery itself.

For instance, Word 2007 includes a new feature for inserting and formatting rich mathematical equations and symbols into a document. You start by clicking Equations on the Insert tab to add a new math region into the document.

When you insert the math region, the Equation Tools contextual tabs appear to provide the tools for designing the equation.

One of the primary components of this tab is a Symbols gallery which helps you insert mathematical symbols from a list of hundreds of the most commonly used ones. A gallery with so many items would be larger than could fit on most monitors and would be unwieldy to navigate.

To help solve this problem, the Symbols gallery uses the built-in capabilities of the gallery to split the contents into several manageable sections. You can then use the filter dropdown at the top of the gallery to navigate between the sets of symbols.

Here's how it looks:

The Symbols gallery in the Equation Tools contextual tabs.

Drop down the Symbols gallery to choose a symbol from the current category
(Click to view full picture)

Click the filter at the top of the gallery to choose a different category of symbols

The gallery changes to show the symbols for the category you picked
(Click to view full picture)

While most galleries don't require the filter, its addition to a few key galleries has greatly enhanced their usability and efficiency characteristics.

A Better Box Of Crayons

jensenh — Thu, 19 Jan 2006 18:00:00 GMT

Perhaps because I was never the kid who had the super sized 128-pack of crayons, I never developed much of an artistic eye, especially for colors. Having only the 16-pack, with nary even the free crayon sharpener is something I obviously rue to this day. (Made worse by the fact that, only a few years later, my younger brother got a 64-pack of crayons complete with built-in crayon sharpener. Sigh.)

Anyway, the point is, if anyone needs help with colors, it's me. That's why I love that Office 12 helps me make better looking documents by improving the selection of colors throughout the product.

Now, it is true that many of the core Office 12 products (including Word, Excel, and PowerPoint) support a new model for document themes, which let you change the color scheme, font scheme, and special effects scheme on a per-document basis. Much can and should be written about how all of this works in the future.

But putting that aside for the time being, every document comes with a "default" theme which contains a color scheme full of well-matched colors. The result is that, even if you don't mess with the new theme or color scheme features at all, your documents look modern and well-matched. (Of course, it doesn't hurt that all of the default object styles in the contextual tab galleries will be based on these colors as well--so when you put a chart or table in, all of the styles you can choose between will match by default.)

In general, Office programs started out by supporting 16 colors. These were the standard "Windows 16-color palette" colors, and they're formed by trying out various combinations of 0, 128, and 255 as red, blue, and green amounts. For instance, RGB(0, 0, 0) is black, RGB(255, 0, 0) is bright red, and RGB(0, 255, 255) is bright teal (a mix between full blue and full green.)

As the Office programs continued to improve, certain programs were upgraded to 32 or even 64 colors in their color picker. These were still generated based on binary mathematical principles instead of on aesthetic design principles, but at least if you allowed some of the RGB values to be 64 or 32, you could get a wider range of colors. And, of course, in recent versions of Office you could always bypass the color picker and choose from any possible color--but this was a one-off selection and did not make choosing matching colors easy unless you are a graphics designer.

The new Office color gallery has two parts: the top half contains 10 fully saturated colors (meaning as bright as possible) and then a number of less saturated variants. The colors have been selected to look good together, and many of the default styles in Office use gradients between a lighter and darker variant within a color column. The bottom half of the color picker contains 10 "standard" colors that don't change based on the color scheme. Here you have a true red, a bright yellow and green that you can use, for instance, to mark up a spreadsheet with good values green and bad values red.

The Office 12 Beta 1 Color Gallery showing the default color scheme

Just as always, whenever possible you can choose to bypass the color gallery altogether and choose from any of the 16.7 million colors supported by Office.

But using the color gallery ensures that the objects in your documents match and helps you choose colors that look a lot better than the "computer colors" brought to the foreground by old-school Office. And, it makes it a lot easier to choose colors for gradients and shadows by going up and down the column of matching tints and shades.

There's a lot more to write about the Office 12 themes and color schemes story, but this gives you a small glimpse of how the products work even if you don't explicitly use these new features.

You'll Know It When You See It

jensenh — Mon, 21 Nov 2005 18:00:00 GMT

An important element of the new user interface in Office 12 is a feature we call "Live Preview."

The basic idea behind Live Preview is simple: whenever you hover over a formatting option with your mouse cursor, Office shows you what your document would look like if you chose to apply that formatting. For example, say that you drop down the font picker in Word. As you hover over each choice in the font picker, your document updates to show you what it would look like if you chose that font.

Traditionally, formatting can be a very repetitive process. Imagine that you're trying to choose a font to use in a text box in Word. You would repeat the following steps over and over:

Select the text you want to format
Drop down the font picker
Scroll to the point in the font picker that has the font you want to try out
Click on the font you want to apply
Deselect the text so you can see what it looks like
Decide that you don't like it
Click Undo
Repeat the entire process for every font you want to try out

Live Preview makes this process considerably more efficient:

Select the text you want to format
Drop down the font picker
As you hover over each font, your document updates to show you exactly what it would look like.
You click the font you like best. You're done!

To show what this looks like, I've created a short movie. You'll need to download the free VMWare Movie Decoder (1.4 MB) in order to view it in Windows Media Player.

Download Live Preview movie to see it in action
(6.6 MB, requires free VMWare Movie Decoder)

Live Preview works for more than just fonts, of course. Most objects in Office are hooked up to Live Preview so that you can "pick before you click." This includes borders, fills, rotation, bullets and numbering, outline styles, picture fine-tuning, textures, styles, slide designs, 3D effects, animations, transitions, and a bunch of other stuff. (Sounds too!) Even features that change an entire object, such as table or shape styles, are Live Preview-enabled. Beta 1 includes a lot of Live Preview, and we are continuing to work to hook more objects up for the final release.

In-ribbon galleries were designed especially to complement Live Preview, because they don't cover up any part of your document. You can hover over the gallery, previewing each style as you mouse over it, and then use the in-ribbon scroll buttons to get to additional styles without covering up the Ribbon.

In-ribbon galleries are optimized for Live Preview

Some people will undoubtedly note that we didn't "invent" Live Preview. This is definitely true, although I don't think that makes it any less valuable. The earliest manifestation of something like "Live Preview" I ever saw was in Brderbund's Fantavision animation software which I ran on my Apple //c in the 1980's. It was pretty much the first (and only) piece of software I had which used my //c Mouse, and as such it was my introduction to point-and-click. One of its cool features was that as you hovered over its on-screen color palette, it filled the shape with that color. Clicking made it permanent. Other software designers have gone down this path as well.

I think that you'll find our implementation of Live Preview to be very complete and responsive-feeling. It has been a huge challenge for our engineering team to build Live Preview into the wide variety of Office features; each of the applications has had its own unique set of complications.

Live Preview is one of those features in which you need to get the "feel" of it just right. What's "feel?" Well, in this case, some combination of responsiveness, speed, and cancelability. You need to feel in control, and, ideally, previewing formatting should be a fun experience.

The speed at which an item can be previewed, however, is dependent largely on the speed of your computer. Changing the font size is normally extremely fast, but if you have thousands of bookmarks in your document, it might be much slower. Previewing a simple 2D chart design might be quick, but a rendering a complicated 3D chart with tons of shadows and light sources and glow effects and convex surfaces takes a bit longer.

And I think that's OK--people can understand that it might take only a short time to preview one kind of item and longer to preview a much more complicated item. What they won't put up with is anything that feels like a hang or a hiccup in the process. The act of previewing can't block the person from using the software. So, for us, working on the responsiveness is a really important part of getting the "feel" of the feature to be just right.

I think Live Preview is so important because, in my own experience, it's so rare that I know exactly what I'm looking for when I'm formatting. A few months ago I wrote about Three-Stage Formatting, which I think is a good framework within which to present formatting opportunities in software. Live Preview complements this by making trying out variations less tedious and time-consuming.

It's all in support of the design tenet "you'll know what you want when you see it."

Formatting: An Act In Three Plays

jensenh — Thu, 22 Sep 2005 10:25:00 GMT

One challenge that some people have raised against a gallery-based approach to formatting is that "all of the documents are going to look the same."

In today's episode, I'll explain why I'm not overly concerned about this and in the process share with you something we've learned about how people approach beautifying documents that I like to call "Three Stage Formatting."

A pleasure of working at a place with the resources of Microsoft is that our relatively small UI team has access to a team of researchers and usability engineers that can help us frame questions and find out the answers to them. And not just through the well-known "one way mirror usability test" either. An innovative new UI has required innovative usability and research practices as well--in a future set of articles I'll describe some of these techniques or perhaps even get a guest writer to chime in.

One of the questions the research team went off to look at was what techniques people used to format objects. They looked at Office but also at other programs with different models to try to get a sense for how people thought about formatting. Of course, a wide variety of working styles and techniques were observed. Yet, from the chaos, a pattern started to emerge. When given a range of options at different levels of detail, people tended to approach formatting in roughly three broad steps:

Apply an overall look from a set of pre-existing styles
Refine the appearance by choosing from a set of styles for a specific subset of the object
Fine-tune the look using a few advanced tweaks (using dialog box controls, typically)

This was a pattern they observed again and again. A lot of people stop after stage 1, and a lot more stop after stage 2. But very few advanced to the stage 3 without completing the first two stages. What this showed us was that most people prefer to kind of "zoom in" on the design they like, rather than starting with a crystal-clear image of exactly what they want the final product to look like.

Based on this research, we designed the Office 12 UI to embrace three-stage formatting. Office has galleries that allow you to perform stages 1 and 2, and then we provide access to the advanced UI for each object to let you tweak until your heart's content.

Here's an example of how the three stages work in practice for formatting a drawing. Assume that you've just inserted a circle into your PowerPoint deck.

Stage 0
Before you've even done anything, the circle looks great. Our default styles match the theme of the document and look great out-of-the-box. So if you're really short on time, you could leave without doing any formatting and get a much better result than in Office 2003.

Stage 1
Choose from a gallery of overall shape styles. Each of these applies a number of effects to the shape: perhaps a gradient, a drop shadow, a border, and a 3D effect to make it shiny. You have a variety of styles to choose from in Stage 1, usually around 30 to 50.

Stage 2
In this stage, you refine the design by choosing from more directed galleries. For instance, you could choose from the borders gallery to refine just the border. Or use the textures gallery to apply a texture. Or a gallery of glow effects to add a subtle glow to the shape. You're not throwing away the design from stage 1, but instead changing pieces of it to be more like the result you envision. Most of these stage 2 galleries have somewhere between 6 and 20 choices. Note that a huge variety of possible styles is possible just using stage 1 and stage 2 galleries: some 100,000s of combinations * the number of colors you could choose. This is one of the reasons why I'm not too concerned about "document homogeneity": with minimal effort, people can express their unique sense of design.

Stage 3
If you couldn't get exactly what you wanted using the galleries, most galleries contain a link directly to the advanced UI for a particular feature. If you want to adjust border thickness in 1/4 pt. increments or choose the exact angle of inclination at which the light hits a 3D object, this is the place for you. And of course if you are the rare experienced designer and want to jump directly to stage 3, you can do that as well.

We've found that applying the principles uncovered by our research team to the UI around formatting seems to be successful. People are able to quickly make beautiful objects. The three-stage approach seems familiar and natural to people at both ends of the experience continuum. And people seem to feel more free to tweak their formatting, probably because the visual nature of the galleries kind of invites you to play with them in a way that's non-intimidating.

I hope the work we've done around formatting will open up a new, diverse world of better-looking documents.

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

jensenh — Wed, 21 Sep 2005 18:07:00 GMT

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.

Visualize Whirled Peas (Galleries: Part 2 of 3)

jensenh — Tue, 20 Sep 2005 18:56:00 GMT

Yesterday, I started discussing the "gallery", which is a new control that appears throughout the Office 12 user interface. Today, I want to discuss the most obvious use of galleries in Office 12: choosing visual styles. The underlying graphics engine of Office has undergone a substantial upgrade in Office 12. If you've seen the charts and diagrams demoed online or in the PDC keynote, you've seen some of the possibilities. The quality of the graphics you can make are just dramatically better. (I find myself thinking: "is this really Office?" It's some really eye-popping stuff.) But, we knew that we'd be wasting all of these new capabilities if we didn't provide an interface to help people produce beautiful results without having to understand how many pixels they should offset a drop shadow, or where the light should precisely hit a 3D object. Hence, the gallery:

(click to enlarge)

(Please forgive the bad-looking thumbnails in the gallery in the above picture; we don't have real artwork yet so we kinda just make them up as we go. The chart is real though...)

Whenever you're doing formatting in Office 12, you are presented with a gallery of designs. These designs package up a number of discrete features into one visual style you can apply all at once. For instance, there might be a chart style that turns on a shiny surface, rounds the edges, turns on a reflection, colors the bars with a subtle gradient, adds a shadow, and configures the correct light source and intensity all at once. We pay the graphics designer so that you don't have to.

That's not to say that you can't continue to tweak the expert settings if you want to--you definitely can. And if you're a settings tweaker, you'll find a lot to like about the capabilities of the new graphics engine. But personally, I find it easier to choose a style that's 95% of the way towards what I want and then tweak it compared to being forced to start from scratch. That's the philosophy behind the use of galleries to do visual styling in Office 12, and I'll be talking more about the usability ramifications of the philosophy on Thursday.

For people like me who aren't trained in graphic design, it's pretty cool to be able to produce graphics in my documents that look like I know what I'm doing.

Tomorrow, using galleries is a less obvious way...

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

jensenh — Mon, 19 Sep 2005 20:16:00 GMT

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.)