Formatting: An Act In Three Plays

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.

Comments

• Anonymous
  September 22, 2005
  Thanks, I'm really looking forward to using this. That is how I work, also.
  Another thing people often do is just reuse another document that looks close to what they want, and replace the text and shuffle around the pictures. Will it still be as easy to just change the style on one item, say the circle, by selecting something else from a gallery? Will the user be able to tell what advanced settings the original document creator used on whatever objects?
  Anotherwords, after the initial creation, are you guys also seeing people be able to easily edit someone else's creation to get what they want?
  
  Great stuff, keep it coming! I'm sure it's hard to sum up all your efforts in a few paragraphs at a time. :)

• Anonymous
  September 22, 2005
  Another excellent and informative blog post. I look forward to reading the usability posts you alluded to.

• Anonymous
  September 22, 2005
  Step:
  
  You're right, starting from a pre-existing document is very common. You will still be able to use both the galleries and the advanced commands to style individual objects within a document.

• Anonymous
  September 22, 2005
  Jensen, thanks for clarifying.
  
  Will it be obvious what formatting was already applied? Say I select a circle that I earlier applieda pecific style from the gallery, then a 4.25 point border to - when I select the circle will the gallery item used be highlighted, or will it default to the first item as if it was a blank doc? How about the border?

• Anonymous
  September 22, 2005
  Oops...typing one-handed while feeding the baby is not a recipe for spelling success. :)

• Anonymous
  September 22, 2005
  The comment has been removed

• Anonymous
  September 22, 2005
  Thanks - Format Painter? I'll have to look that up. Sounds like I could use that. :)

• Anonymous
  September 26, 2005
  Good to hear that you found out how people format in the real world.
  
  Have you verified with some of those same people that this new 3 stage formatting really fits the way they work?

• Anonymous
  October 11, 2005
  Alas, too many people do formatting by hand. They type a paragraph and format it as Arial 24pt Bold Centered. They type another paragraph and format it Times New Roman 12pt Justified. Instead, they should have used the Heading 1 and Body Text styles, customizing them as needed.
  
  What can be done to discourage people from using presentational formatting and help them embrace semantic formatting? Maybe the Font, Font size, Bold and similar UI elements should apply to the style of the currently selected item, rather than to the item itself?

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

• Anonymous
  May 29, 2009
  PingBack from http://paidsurveyshub.info/story.php?title=jensen-harris-an-office-user-interface-blog-formatting-an-act-in