Live Preview
The Design Need:
It can be difficult for users to visualise the end result after content has been edited.
Design Examples:
Design Solution:
Show a preview of how the changes made to content by the user will look. This helps users reach the desired end result more easily.
Offer a preview that shows the changes made in real time. If you offer live preview you should ensure that you:
- Attract sufficient attention to the changes made. If the changes a user is making are easily overlooked, you could highlight the changed elements in the preview
- Allow the user to close the preview without making any changes to the original.
When to use:
It is best not to use live preview if the changes are very straightforward and do not involve any layout options. Live preview is especially interesting when layout is edited, but also in forms and when printing. You should use live preview if:
- The changes made are difficult to reverse after saving
- Users will find it hard to understand the final outcome of their actions without a preview
- There are multiple options and the user would like to see the effect of these before deciding what to do/choose.
Why use this solution (rationale):
Users often have difficulty grasping the implications of their changes, especially when layout is edited. Offering a preview without the need to refresh the page or save the changes helps users keep on top of what they are doing.
More info elsewhere:
- Live preview design pattern on www.ui-patterns.com
- Preview design pattern on http://quince.infragistics.com/
