Live Preview

From Interaction-Patterns.org

Contents 1 Hover Invitation 1.1 Quick Summary 1.2 Visual Examples 1.3 Examples found on the World Wide Web 1.4 Use When 1.5 Possible Solution 1.6 Rationale 1.7 The pattern is being used to 1.8 Source

[edit] Hover Invitation

[edit] Quick Summary

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

[edit] Visual Examples

Found at www.interaction-design.org

[edit] Examples found on the World Wide Web

• There is a live preview function when you add a comment: http://www.interaction-design.org

[edit] Use When

• 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

[edit] Possible 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.

[edit] 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.

[edit] The pattern is being used to

• Immediate Feedback
• Help
• Authorize
• Edit
• Enter
• Filter
• Undo

[edit] Source

• http://ui-patterns.com/pattern/LivePreview