You’ll Know It When You See It

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

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
  • 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

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

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

Comments (18)

  1. Stephen McLaren says:

    I enjoyed the video of Live Preview loads… one of the many changes that are going to make Office 12 rock!

    I’m usually a little bit of a sceptic when it comes to new software, but with the blogging process and all the cool new and improved features I starting to think that I want to buy Office 12 in release week!

  2. ChrisC says:

    First, thanks for the video; I`ll be showing it to my sis-in-law to explain why I told her she needs a gig of memory instead of 256MB in her new notebook (which she`ll use for 5yrs; she`s having buyers remorse).

    Second, uh… you are saying that "Live Preview" changes the whole document, not just what is on the screen?

    > Changing the font size is normally extremely fast, but if you have

    >thousands of bookmarks in your document, it might be much slower.

    If you`re changing more that just the visible area I’m curious why you would take that performance hit.

    The user`s ROI for the wait would be terrible – the user can only see that one screen (moving to a different part of the document would prob mean you are no longer hovering over that font name/size, right?) why render the whole thing?

    Am I missing something here? You’re talking about just Word, right? Perhaps only when there is a TOC or Index in the visible part of the screen? (how else would 1,000’s of bookmarks be relevant?) Or maybe a user viewing page 100+ and you think you have to update the page number before rendering the page?

  3. anon says:

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

    Apply; Undo; Apply; Undo; Apply; Undo; Done.

  4. Centaur says:

    Now, thereโ€™s just one more step. Make it so that when the user clicks to apply the font, the font is applied to the *style* of the selected text, not the text itself.

  5. Kawigi says:


    And preserve the undo/redo stack the way it was before.

    Of course, while office in general is mostly pretty good about this, what if the action isn’t trivially undoable? But I also think that in general, there is a better way to do it for any given feature.


    While that might be a good idea in *principle*, I think most people might see Word changing formatting on other text in their document and find it obtrusive, and end up spending more time fighting with Word than they already do.

  6. Matt says:

    Looks great; can you disable it?

  7. jensenh says:


    We were concerned about this as well (people thinking they’ve applied the formatting.) A lot of testing showed that most of those fears were unfounded, although we did have to change a few of the semantics.


    A layout engine like Word is very complicated, for better or for worse. One of the downsides of this for Word and Excel is that certain kinds of documents require repagination in order to see how the document would end up. (A document with a lot of bookmarks is one example.) Sure, maybe these features could have been architected differently, but they didn’t anticpate that 10 years later someone was going to build Live Preview on top of them.

  8. jensenh says:


    If you want to disable it, you can. You should give it a try first though. ๐Ÿ™‚

  9. Chris Parker says:

    Excellent. KWord, OpenOffice, and WordPerfect all have this and I really like it in all of those programs.

  10. PatriotB says:

    A new use for IOleUndoManager ๐Ÿ™‚

  11. ChrisC says:

    Ah, existing code; *that* I certainly understand.


    One thing I’ve wondered about, but never enough to test the theory is the following:

    Does the layout engine work more efficiently if you add hard page breaks to a doc?

    i.e. if I make a change and I’m (pages) below a hard page break will it renumber the whole thing or find a preceeding hard page break and render/renumber from there?

    You might not know, but if you do and it does, please spill ๐Ÿ™‚ (it seems to only help sometimes)

    PS – one of these days I promis I’ll post a ‘thanks’ without asking another question immediatly after

  12. The video certainly makes this philosophy abundantly clear, thanks! Personally, I think it’s a great idea. I do have reservations, however. Cancelability, as you mentioned, is very important. Am I going to have to worry when previewing a large formatting operation (by which the entire document might be affected) that every last piece of the previewed changes are actually reverted should I choose not to apply any of the options?

    To put it another way is the following an axiom of the preview implementation?

    Doc + Preview – Preview = Doc

  13. David says:

    Hi Jensen,

    Although this is not related specifically to your Live Preview article, one of your statements in this article jogged a request I have wanted in many programs for years now:

    "In-ribbon galleries were designed especially to complement Live Preview, because they don’t cover up any part of your document."

    Have or will there be any changes to the find and replace dialog to adopt a similar approach to not cover the document? Although the dialog moves out of the way if the item being searched for is under the dialog, the constant repositioning of the dialog has been quite distracting for me. Originally seeing a find and replace bar in Lotus’ Word Pro back in 1996, I thought this idea made a lot of sense because it would not cover the document area (Inexplicably, text formatting options were moved to a floating, non-modal dialog, generating the same problems that a find and replace dialog had). I have most recently seen the return of this concept with Firefox’s find feature implemented as a bar across the bottom of the window.

    I’m not exactly sure how this would be implemented (could it be a contextual tab in the ribbon in the same way you click on a chart, or would searching possibly warrant its own tab along side the other major tabs?), however I would appreciate moving this dialog to a region that did not overlap the current document window (I personally have not been very fond of floating toolbars or palettes and usually dock all floating elements).



    ps. Thanks for taking the blog about the Office UI – I certainly appreciate reading your insights into the new UI.

  14. jensenh says:


    Your suggestion is a good one! In fact we had a good prototype working in Word, but we didn’t have quite enough resources to get it done for Office 12.

  15. Nas says:

    has anyone noticed the bar with the minimize and X and maximize? It looks so weird to me. It is giving me the mac OS goosebumps.

    Also, i am trying to right now understand how I am supposed to get used to this thing. everything is different now.

    May be office should have done this a little bit slower and taken a few steps at time.

  16. Gabe says:

    How will this interact with Terminal Services? I would hate to not be able to use Office 12 because it takes 10 seconds to redraw the screen over my dialup connection every time I move over a gallery item.

  17. Stu Smith says:

    Will this apply to hovering over the minibar too? Or was that found to be a little too much changing for small movements of the mouse?

  18. I spend a lot of time here writing about the new Office 12 UI. And why
    not–it’s the project I work…