How Long Should a Demo Video Be? Steps, Not Seconds
A demo video should be as long as the task takes when nobody hesitates: for most web app flows that is four to eight steps, which renders to twenty to forty seconds. Length in seconds is the wrong unit to plan with, because a viewer does not experience seconds; they experience clicks they could have made themselves. Plan the step count first and the duration follows.
Why steps instead of seconds?
A step is one thing happening on screen: a click, a typed value, a page settling. Each step costs the viewer the same attention whether it took the AI half a second or two. If you plan in steps, you plan in attention.
Three rules of thumb:
- One outcome per video. If the flow has two outcomes (create a project, then invite a teammate), that is two videos. Viewers remember one thing.
- Cut the navigation. Start on the page where the flow begins. Getting there is not part of the task.
- End on the result. The last step should show the new thing existing: the row in the list, the chart, the confirmation. Add one short “wait for it” step so the result is on screen for a beat.
How many steps for each channel?
| Where the video goes | Steps | Rendered length | Why |
|---|---|---|---|
| Landing page hero | 3 to 5 | 15 to 25 s | It loops; nobody watches a hero twice |
| Product Hunt gallery | 5 to 8 | 25 to 45 s | Visitors are evaluating, not browsing |
| Changelog entry | 2 to 4 | 10 to 20 s | One feature, one click |
| Onboarding email | 3 to 5 | 15 to 25 s | The email makes one promise |
| Help article | 4 to 10 | 20 to 60 s | Completeness beats pace |
| Story or short | 3 to 5 | 10 to 20 s | Vertical, muted, thumb on screen |
Klevo’s free plan allows 25 steps and 60 seconds per video, and Pro allows 60 steps and 3 minutes, which is enough for the longest help-article demo you should ever make. If a flow needs more than that, it is a tutorial, not a demo; split it.
What makes a demo feel long?
Not the step count, usually. Three things stretch a demo:
- Dead time between steps. Loading spinners, settling animations, the pause while the recorder decides what to do. Klevo trims idle gaps automatically and keeps a short hold after each step so the result registers.
- Typing. A twelve-character name is fine; a paragraph is not. Pre-fill long text in the test account and type only the one field that matters.
- Zoom on every step. Zooms add emphasis by being rare. Mark the one or two clicks that matter; the snappy style zooms on every click and is best kept for very short clips.
How do you write the steps?
Write the flow the way you would tell a colleague, one line per step, and the AI will perform it that way:
Record a demo with Klevo of inviting a teammate on https://staging.acme.app/team: click Invite, type ana@example.com, pick the Editor role, send. Zoom on Send. Desktop, 16:9, browser frame.
That is four steps and renders to roughly twenty seconds. The captions the AI writes (“Invite a teammate”, “Pick a role”, “Sent”) carry the explanation, so the video does not need to be slower to be understood. Captions that explain a flow covers what a caption should say.
When is longer right?
Help articles and internal training are the exception. There the viewer wants every click, in order, and will scrub back. Use the minimal style (no zoom, no cards), keep captions literal, and let it run to ten steps. If it still is not enough, the article needs two videos with a heading between them.
When is shorter right?
Social feeds. A 1:1 or 4:5 clip in a feed plays muted and small, often for three seconds before the scroll. Put the key click first: open the demo on the screen where the magic happens, not on the dashboard. Three steps, one zoom, done. Which format and frame for each channel has the sizes.
Can you re-cut without re-recording?
Because Klevo keeps the steps as a script, you can render a long help-article version and a short feed version from the same recording: ask for the full script as 16:9 minimal, then ask for a 1:1 snappy render with only the first three steps. When the UI changes, both render again on the current app. Demo videos that never go stale explains the script.
FAQ
Is thirty seconds too long for a landing page? Only if it is one long take. Five steps with captions at thirty seconds reads fine; a single scrolling screen for thirty seconds does not.
Should the demo show the login? No. Save a test login so the recording starts on the first real page. Recording an app behind a login shows how.
How many steps before I should split a video? Past ten for a help article and past six anywhere else, split it.
Does the intro card count? No. It is under two seconds and sits outside the step count; skip it with the minimal style if the clip is embedded under a heading that already names the task.