Preview

Problem

People like to know what they are getting into and avoid rework whenever possible.

Solution

Show a preview of the consequences of an action before people commit to it.

Context

• The action(s) in question has consequences that are hard or impossible to reverse (such as printing out a document).
• There are multiple options that people would like to quickly look through before committing to one.

Rationale

Previews work on a couple levels. First, they simply help people avoid mistakes or at least reduce the cost of mistakes. It could be ordering something; it could be printing something; it could be changing the structure of a document, moving an object around on screen, clicking to navigate somewhere—whatever it is, a preview helps people know in advance that the action they are about to take will have the consequences that they desire.

Also, similar to Undo, this pattern increases a sense of mastery and overall satisfaction by emboldening people to try new things without fear of consequences. Over time, they discover more and more about what they can do and become more productive, happy users.

Implementation

Implementation is pretty much like it sounds—you show people a preview of what the end result will be. If you can, and it makes sense, show the preview inline—the more immediate, direct feedback you can provide, the better. This works well in situations where the changes are immediate and local (such as the formatting in a document).

If it is a multi-step process or some kind of order, i.e., a formal request for some other party to take action, then usually the preview will be of the end result. If it is multi-step, show the amalgamated combination of the multiple steps. Depending on the context, it may be sufficient to summarize the salient points to add in review and confirmation (as in an order summary), but if part of what needs confirming is the actual recipient’s view of the item, display it exactly as it will appear (such as in a print preview). And if it is a confirmation type preview, be sure to provide a way to commit to the outcome being previewed or a way to cancel and/or edit.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Preview pattern is implemented in AppStylist for ASP.NET that allows a designer to preview a style change for a control before generating style sets for applications. Check out the samples browser to see it in action.

Windows Forms

You can use the NetAdvantage for Windows Forms WinPrinting controls to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called WinSchedule Printing Sample to see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF Reporting’s Print Dialog feature. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamShowcase called xamSalesManagerto see it in action.

 

Sources

Jennifer Tidwell, Designing Interfaces

Tags

Format, Commands, Selection, Navigation, Builders and Editors, Alignment, Drill-Down, Page Layout, Rating, Browse, Customization.