Interactive product demos

Types of Interactive Product Demos

The formats differ along three axes at once. Fidelity is how closely the demo resembles the running product. Effort is what it costs to build and keep current. Freedom is how much the viewer gets to decide. Guided screenshot walkthroughs are cheap and rigid, DOM replicas are faithful and fragile, branching paths are expensive and the only ones that answer "what if I do something else", and sandbox tasks give the most freedom and the least control over the story.

Written by Matt R., Founder of ArcletUpdated

Three axes, not a ranking

There is no best format, which is inconvenient for anyone who wants a recommendation in one line. There are three properties, and every format is a different position on all three at once.

Fidelity is how closely the experience resembles the running product. High fidelity means the viewer believes what they are seeing. Low fidelity means they are getting the idea rather than the article.

Effort is the build plus the maintenance. Maintenance is the axis people forget, and it is the one that decides whether a demo still exists in a year.

Freedom is how much the viewer chooses. Low freedom means one live control per screen and a predictable story. High freedom means the viewer can go somewhere you did not plan, which is more convincing and much harder to keep correct.

These pull against each other. Raising freedom raises effort. Raising fidelity usually raises maintenance, because a faithful replica breaks whenever the original moves.

Everything below assumes you have settled that an interactive product demo is the right kind of asset at all. If you have not read how interactive product demos work, the underlying parts are explained there and this page will make more sense afterwards.

What the format mix looks like in practice

Arclet analyzed 600 public interactive product demos, and visual format was measurable for 270 of them. Within that measured subset, 123 used video, 98 used a mix of image and video, and 49 used image-only screens. The other 330 demos in the cohort did not expose format reliably, and that gap stays a gap rather than a guess: unmeasurable is not the same finding as image-only or video-only.

Read the numbers as what they measure, not more. The finding is not that video appears in 123 of all public demos. It is that video appeared in 123 of the 270 records where format could be identified at all. The full breakdown, including how the review handled unknown format, is in interactive product demo examples: what 600 public demos reveal.

Guided screenshot walkthrough

A sequence of captured images with an instruction layer on top. The viewer clicks to advance, and the click usually lands on the control the caption is discussing.

Fidelity is moderate: the screens are real, but nothing behaves. Effort is the lowest of the four. Freedom is minimal by design.

This format is underrated, mostly because it is unglamorous. It survives product changes better than anything else on this page, because a stale screenshot still communicates while a broken replica does not. When the workflow is short and the goal is comprehension rather than conviction, it is frequently the right answer and the cheapest one.

It is a poor choice when the point you are making is that the product feels good to use. Images cannot carry that.

DOM replica

A capture of the page structure rather than a picture of it. Text stays sharp, copy can be edited after recording, and controls can be made to respond in ways that feel close to the real thing.

Fidelity is high. Freedom can be moderate to high. Effort is where it gets interesting: the initial build is not much worse than a walkthrough, and the maintenance is considerably worse, because the replica is coupled to markup that the product team changes without telling you.

Choose this when the interface is the argument, and when someone owns keeping it current. Avoid it for a product under heavy UI churn, where you will spend more time repairing the demo than anyone spends watching it.

Branching path

A demo with real forks, where a viewer choosing differently reaches a genuinely different screen rather than being nudged back.

Fidelity is high, and freedom is high in the specific way that matters: the viewer gets to test whether the product does what they, personally, need. That is the closest a demo comes to answering an individual's question.

Effort is high and, importantly, it multiplies rather than adds. Two branch points can mean four end states to capture, review and maintain. Every branch also inherits the staleness of everything else.

This format earns its cost when your audience is genuinely segmented and the segments care about different things. It is wasteful when everyone is asking the same question, which is worth checking before you commit to the format rather than after.

Sandbox-style task

A constrained replica where the viewer is given a task and left to complete it more or less however they like.

Freedom is the highest available. Fidelity is high. Effort is high and the risk is different from the other three: you lose control of the narrative. Some viewers find the thing you wanted them to see. Others wander and conclude the product is confusing, which may even be accurate.

Use it when self-directed discovery is the point, when the audience is technical enough to enjoy poking at things, and when you can afford to let some viewers get lost.

Choosing

Scroll to see every column.

Choosing comparison
Format Fidelity Build effort Maintenance Viewer freedom
Guided screenshot walkthrough Moderate Low Low Low
DOM replica High Moderate High Moderate
Branching path High High High and multiplying High
Sandbox-style task High High High Highest

Three rules that hold up in practice.

Start one step cheaper than you think you need. The gap between a walkthrough and a branching path is mostly felt by the person who built it. Viewers notice a demo that is out of date long before they notice one that is simple.

Match freedom to how varied your audience actually is. Branching is worth it when people arrive with genuinely different questions. If everyone wants the same answer, freedom is cost with no return.

Budget maintenance before you pick. If nobody owns re-recording, choose the format that degrades most gracefully, which is the walkthrough.

A quick calibration exercise: open the demo examples library, pick three, and decide which of the four formats each one is. Then ask whether it needed to be that one. The answer is frequently no, and spotting that in someone else's work is much easier than spotting it in your own.

If you are still deciding between an interactive format and a narrated one rather than between the four here, that comparison is on interactive demos versus video demos.

Interactive evidence

See it running

This is the freedom axis made concrete. The viewer picks a role, then sees a workspace tailored to it, so the path through the demo depends on a choice rather than a script. Compare that with the guided walkthrough stills beside it, where the next click is decided in advance. It does not prove that more freedom is better. It only shows what the extra freedom costs to build, since every role that can be chosen is a state somebody had to capture.

Loading the demo