R05Get them doing the thing
Pro

Hands-on sample

Let the visitor complete a small, safe version of the core action inside the page, then explain the full product behind it.

Back to page recipes

Section sequence

6sections, in the order the visitor meets them. Bar height is the section's weight in the page.

  1. OrientSample framing
  2. ActLive sample
  3. DemonstrateInput and output pair
  4. OrientBoundary note
  5. ProveReset and safety
  6. ConvertContinue in the product

How the page argues

  1. 1

    Frame the sample in one line: what it does and what it will not do.

  2. 2

    Let the visitor act, with no account and no dummy 'play' button that only animates.

  3. 3

    Show input and output as a pair, so cause and effect are unmistakable.

  4. 4

    State the boundary honestly, so the sample's limits do not read as the product's limits.

  5. 5

    Offer a reset, so experimenting has no cost.

  6. 6

    Route from the sample into the real product with the sample's state carried over.

What each section has to be

OrientSample framing
One sentence naming the action the visitor is about to perform and its scope.
ActLive sample
A genuinely interactive instance of the core action, working without authentication.
DemonstrateInput and output pair
What went in and what came out, visible together, so the mechanism is legible.
OrientBoundary note
What the sample deliberately omits — scale, data, integrations — stated before the visitor discovers it.
ProveReset and safety
A reset control and a plain statement that nothing entered here is stored or sent.
ConvertContinue in the product
The route into the real thing, carrying the sample's state so the work is not repeated.

Is this the right sequence?

Who it is for

Evaluators who trust their own hands more than a feature list, and who will not book a demo to find out.

Products it suits

Products whose core action can be experienced safely in one bounded interaction with no consequences.

Not for

High-cost or regulated workflows with no sandbox, where a toy version would misrepresent the real thing.

Evidence strategy

Which proof modes carry the page, in the order they land.

  1. Primary: direct experience — the visitor performs the core action themselves.
  2. Secondary: the input/output pair, which makes the mechanism understandable, not just impressive.
  3. Tertiary: the stated boundary, which buys credibility for everything claimed above it.

CTA plan

What the page asks for, what it offers instead, and where.

Primary
Try it here
Secondary
Continue with this in the full product
Placement
Sample in the first or second screen; continuation directly under the output; no CTA interrupts the interaction.

Responsive behavior

What the sequence has to do when the viewport stops cooperating.

  • The sample keeps full interactivity on touch: tap targets over 44px, no hover-only affordances.
  • Input and output stack vertically with the output scrolled into view automatically after the action.
  • On small screens the boundary note collapses to one line with a disclosure for the rest.

Anti-patterns

The failure modes that make this sequence stop working.

  • A 'demo' that is a video with a play button, which is a recording, not a sample.
  • A sample so reduced that it proves nothing about the real product.
  • Capturing the sample input as a lead without saying so.
  • Hiding the boundary until after the visitor hits it.

Build spec

Pro

What an agent needs in order to build Hands-on sample: what each section must contain, the copy rule that keeps it honest, the slots to resolve from your product, and the order to build in.

Checking access to the build spec

Agent tags

The vocabulary an agent matches this recipe on.

  • interactive-sample
  • input-output-pair
  • no-auth-trial
  • reset-state
  • safe-boundary