Formatting: An Act In Three Plays

  • Article

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:

  1. Apply an overall look from a set of pre-existing styles
  2. Refine the appearance by choosing from a set of styles for a specific subset of the object
  3. 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.