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