Types of Previews | Developing User Interfaces for Microsoft Windows

While there are many kinds of possible previews, most previews fall into the following general categories:

Iconic previews A preview using a fixed bitmap that abstractly shows the results of a selection. This bitmap never changes, regardless of other selections or the specific user data.

Abstract previews A preview using a variable bitmap that abstractly shows the results of a selection. This bitmap changes to show the results of this selection and perhaps its combination with other selections. This bitmap does not reflect the specific user data.

Sample previews A preview of sample data that accurately shows the results of a selection. The sample data can be fixed or can reflect specific user data.

Approximate replica previews A preview of the specific user data that gives an approximate representation of the results of a selection. This technique is used when creating an exact replica would be too time-consuming or would take up too much space.

Exact replica previews A preview of the specific user data that gives an exact representation of the results of a selection.

The order of these preview types roughly corresponds to both their accuracy and the difficulty of their implementation. Generally, the more accurate a preview is, the more difficult it is to implement. The type to use depends upon how much accuracy you need to effectively indicate the results of a selection. I recommend using the simplest preview type that does the job. There's nothing wrong with the more abstract preview types—they can be quite effective. When the user needs visual feedback to make an informed decision, a simple preview is better than no preview at all.

TIP
The type of preview to use depends upon how much accuracy you need to effectively indicate the results of a selection. Use the simplest preview type that does the job.

Iconic Previews

An iconic preview uses a fixed bitmap that abstractly shows the results of a selection. This bitmap never changes, regardless of other selections or the specific user data. For example, several of the icons used on the Formatting toolbar in Microsoft Office are, in effect, a preview of their results.

Another typical example is a tool palette, such as the Tool Box in Microsoft Paint.

In this case, the icons clearly show a preview of what you can do with the tool.

You can also use icons in a dialog box to show the results of the various options, as in the Microsoft IntelliPoint Mouse Control Panel applet.

click to view at full size.

Abstract Previews

An abstract preview uses a variable bitmap that abstractly shows the results of a selection. The bitmap changes to show the results of the selection and perhaps its combination with other selections. The bitmap does not reflect the specific user data. A good example is the Microsoft Plus! 98 Desktop Themes Control Panel applet.

click to view at full size.

This dialog box shows a realistic abstraction of the desktop using the currently selected theme. This approach to showing color and font selections is also used in the Appearance tab of the Display Control Panel applet.

Microsoft Word has several dialog boxes that display a preview of the user's selections. The Table Of Contents tab of the Index And Tables property sheet is a typical example. Note that the preview is determined by the combination of all the settings on the tab.

click to view at full size.

Another example from Word is the Borders And Shading property sheet, shown below. Again, the preview is determined by the combination of all the settings on the tab. In this case, the preview is also interactive since you can click the individual borders to turn them on and off. Here each Setting selection is in effect a radio button that has a preview. Note how much more effective this preview technique is than the standard radio button graphic. In this case, the Shadow setting is selected, although it can be difficult to tell in the black-and-white screen shot.

click to view at full size.

Finally, I find the Visual C++ AppWizard uses especially effective abstract previews. Just looking at changes in the preview makes it easy to figure out the significance of the various selections and reduces the need for reading online help or other documentation.

click to view at full size.

Sample Previews

A sample preview uses sample data that accurately shows the results of a selection. The sample data can be fixed or can reflect specific user data. For example, the Font property sheet from Word displays a preview of the combination of all the settings on the tab. However, unlike an abstract preview, this preview shows actual user text using the selected format rather than an abstract representation.

The Style combo box on Word's Formatting toolbar is a classic example of a sample preview. It shows the name of each style using that style, along with its point size, justification, and type on the right-hand side of the list. Interestingly, the Font combo box does not have a preview in Microsoft Word 97, which it badly needs. Happily, this feature has been added to Microsoft Office 2000.

One last example of a sample preview, also from Word, is the WordArt Gallery. This preview shows sample text using several effects. Note how much easier it is to select an effect by its preview than it would be by a text description of the effect.

Approximate Replica Previews

An approximate replica preview uses the specific user data to give an approximate representation of the results of a selection. This technique is used when creating an exact replica would be too time-consuming or would take up too much space. This type of preview is a good choice when saving time or space is more important than accuracy.

Thumbnails are a classic example of this type of preview, as with the Microsoft Clip Gallery. (But don't use these owner-draw tabs as a model of good user interface design. Yuck!)

The Screen Saver tab in the Display Control Panel applet is an interesting example, since a small-scale version of the screen saver actually plays in the preview window. This technique is very effective and shows that the best way to preview animation is to display the animation in the preview.

TIP
Preview animations with animation.

For one last example of an approximate replica preview, consider the preview used for many of the special effects in the Microsoft Photo Editor shown below. Since it can take a fair amount of time to process some special effects, this preview processes only a small section of the image, which is selected by moving the black square in the full preview on the left-hand side. An alternative technique used in other special effects programs is to perform the special effect on a thumbnail. This processing takes much less time, but it is also a less accurate preview of the results.

Exact Replica Previews

An exact replica preview uses the specific user data to give an exact representation of the results of a selection. This type of preview is often used when previewing an entire document. For example, both Microsoft Outlook and Outlook Express allow the user to preview a message just by selecting an item in the message list.

Of course, a print preview is the classic example of an exact replica preview. The print preview is used to determine how the document will look when printed without having to print it. This is an excellent feature that saves a lot of time and paper. Users typically use the print preview to check the individual page layouts and the page breaks. This kind of usage makes accuracy essential for the preview to have any value.

A simple variation of the print preview is the Style Gallery selection dialog box used in Word, which allows the user to select a style template. Having an accurate preview makes it easier to make the right selection.

The old saying "a picture is worth a thousand words" isn't always true in user interface design, as anyone faced with a couple dozen indecipherable toolbar icons can attest. However, previews are one case in which visual communication is much more effective than textual descriptions. Previews are an excellent way to show the results of a selection. They are a relatively safe feature to use, since not many things can go wrong. Just make sure that the previews are reasonably fast, that they have an appropriate level of accuracy, and that they make sense. Whenever possible, don't explain a feature—show it with a preview.