Live Preview

Problem summary

The user wants to check how changes in form fields effect and end result as quickly as possible.

Example

Usage

Use when you want to provide the user with a real-time preview of what he or she is creating Use when it is hard for the user to comprehend how the final output will, be without having a preview to reference Do not use when the input is straight forward and the resulting output does not depend on a specific layout

Solution

Update a live preview of what modifying a form will result in throughout the entire interaction with the form. Instead of waiting for the user to submit the form, the changes are shown immediately in a preview. Each user event of significance results in a browser-side processing.

Rationale

The result is increased interactivity. The user does not need to wait for page reload on a form submit to find out whether data was inputted correctly into the form. The feedback is immediate.

More examples images of the Live Preview pattern

When you add comments to an article at www.interaction-design.org, you can view a live preview of the final comment unfolding before your eyes.

This pattern was last updated on February 07, 2008

Related information

Contribute!

Are we missing a pattern?
Suggest one!

3 comments

Jasper Kennis 20 Mar 22:55

One of the best forms of feedback Ã¡nd feed forward there is. It takes away the doubt about the result of what your doing.

PrabhakaranG 24 Jun 06:11

Hi Anders Toxboe, you have done a wonderful job here. I like the way itâ€™s presented with the examples & references that you have provided. I have come across some websites, where they publish as if they have founded it, but in this case, you seem to be very honest & intelligent.

Just a clarification, have you ever designed this pattern using JS or something else. I wish you should keep investigating & put your thoughts how we can do this better. By this way you can showcase your creativity to the world.

Wish you all the best.

Warm Regards PrabhakaranG

Anders Toxboe 24 Jun 13:52

PrabhakaranG: Thank you for the nice words.

Yes, I have implemented this pattern before using javascript. It’s pretty simple -> add an onchange event listener to an < input > field and use the current value (this.value) to update the contents of another element.