Product Page Sample Viewer: Mark What the Demonstration Includes and What Is Only Annotation

Why labelling matters

A sample viewer on a product page lets a visitor try a small piece of what they might buy. Often the viewer also carries callouts, arrows and captions added by the seller to explain what is going on. If those annotations look like part of the sample, visitors may assume the product includes things it does not. This article proposes a labelling approach. It is an example workflow, not an observed result, and the sample below is hypothetical.

Inputs

Imagine a shop selling a downloadable planner template. Its page has a viewer showing one demonstration page. Before designing labels, list:

Content that is in the purchased product, such as the page layout and the editable fields.
Content that exists only in the demonstration, such as sample entries typed into the fields.
Content that exists only on the page, such as callouts, highlights and captions.
Content that is mentioned but not included, such as a second page only described in text.

Write each item in one of those four buckets before touching the design.

The labelling scheme

Use a short legend near the viewer with three visual treatments:

Included: shown plainly, with a label such as In your purchase.
Example only: sample entries shown with a label such as Sample entries, not included.
Explanation: callouts drawn in a clearly different style, such as outlined bubbles, with a note that they are explanations added to this page.

Apply the same three treatments everywhere on the page, including images and text. Avoid using one style for two meanings.

Decision branches

If an element is in the product, label it Included, even if it is also annotated.
If an element appears only to demonstrate how the product looks when filled in, label it Example only.
If you are unsure whether an element is in the final product, do not show it in the viewer until you confirm. Uncertainty should be resolved before publication, not in the legend.
If a callout might be mistaken for part of the product, move it outside the sample area or add an explicit label.
If the viewer lets people switch the annotations off, keep the legend visible in both states.

Stop conditions

Do not publish when:

Any element shown has no bucket.
A callout sits inside the sample area with no label.
The legend uses a treatment that also appears elsewhere with another meaning.
The text around the viewer promises something the viewer labels as example only.

Worked example

The planner viewer shows a weekly page. The grid and the heading fields are in the purchase, so they carry the Included treatment. The typed entries, such as a sample shopping list, are marked Example only. Three outlined bubbles say things like Tap here to edit the title. They are marked Explanation. The product text beneath says the template contains one weekly layout, and the viewer shows exactly that one. A second layout mentioned in the description is not shown in the viewer at all.

Acceptance test

Ask two people unfamiliar with the product to look at the page for one minute, then answer from memory:

Which parts of the viewer would you receive after buying?
Which parts are just sample entries?
Which parts are explanation added by the seller?

The proposal passes when both people answer all three correctly for at least three specific elements each. If either person lists an annotation or sample entry as included, adjust the labels and repeat with different people. Also check that the product text and the viewer agree on what is included, line by line.

Conclusion

A sample viewer persuades best when it is honest about its own contents. Sort every visible element into included, example only or explanation, label them consistently, and test with fresh eyes before publishing. The result is fewer misunderstandings and a page that says what the product actually delivers.