On this page
Keep the control, the action and the result visible. A beautiful crop that hides one of those three stops being a useful demonstration.
Prepare a clean starting state
Choose one task and set up sample data that makes its result obvious. A list with similar placeholder names is hard to explain; a small set of clearly different items makes a sort or filter easier to see. Use invented sample data rather than real customer records.
Close notifications and unrelated tabs. Check the visible account name, email address, file paths and browser suggestions. Record a short rehearsal and inspect it before capturing the final take.
Choose the frame before recording
For a vertical edit, a narrow product panel can work better than an entire desktop. Resize the window or select the relevant region while keeping enough surrounding context to understand the control. Avoid enlarging a small recording later and expecting it to become sharper.
If the action spans several areas, use two clear shots instead of a constant pan. A stable view of the input followed by a stable result often reads better than chasing the pointer.
| Screen task | Useful framing | Common problem |
|---|---|---|
| Search | Query field and results together | Cropping away the query |
| Sort a list | Control plus several distinct rows | Rows too small to distinguish |
| Edit an item | The field being changed and saved state | Cursor obscures the text |
| Export a file | Export action and confirmation | Showing only a progress indicator |
Move once and let the result settle
Make pointer movement intentional. Go to the control, activate it, then stop moving. Leave a pause after the result so you have usable frames to hold. A restless pointer competes with the caption and makes the interface feel busy.
Trim dead time, but preserve steps that explain the result. If you remove a long processing delay, do not add wording that claims the operation happened instantly. Your edit can be concise without changing the underlying behavior.
Worked example: recording an overdue filter
Here is a proposed recording for a task-list app whose filter shows only overdue tasks. It is illustrative, but the order works for most single-action demos.
Watch both takes at phone size and keep the one where the result is easier to read, not the one with the smoother pointer.
- Seed six tasks with short, clearly different names. Make three overdue so the dates show the difference.
- Resize the window so the filter control and the list fit in one narrow frame.
- Start recording and hold still for about two seconds. That gives you a clean frame to cut in on.
- Move straight to the filter, select it and take your hand off the mouse.
- Hold on the filtered list for a few seconds, then stop recording.
- Record a second take at a slightly slower pace before changing anything else.
Check the edit at its actual viewing size
Put the recording on the intended vertical canvas and view it at phone size. The label you can read on a laptop may disappear in a feed. If that happens, crop closer to the action, reduce the amount shown or record a simpler view.
A face overlay is optional. If it covers the result or shrinks the interface too far, cut from the reaction to a full product shot instead. Add only the text that helps someone follow the action.
- Can a viewer identify the starting state?
- Is the control used in the recording visible?
- Can the changed state be understood without pausing?
- Are private details absent from every frame?
- Does the last shot stay long enough to read?
Mistakes that make a recording hard to follow
Most unusable recordings fail for ordinary reasons. Check for these before you take the clip into an edit.
| Mistake | What the viewer sees | Better approach |
|---|---|---|
| Typing live | Typos, corrections and a long wait | Type short, prepared text or start with it entered |
| Scrolling to find the control | Motion with no purpose | Start the take with the control already in view |
| Recording a scaled-down window | Soft, small text after cropping | Record at the display’s normal scale |
| Decorative cursor effects | A highlight that hides the control | Turn effects off unless they clarify the click |
| Stopping on the click | No time to read the result | Hold on the changed state before stopping |
Questions & answers
Should I speed up the recording?
Speed up waiting only where it does not distort the explanation. Keep the meaningful interaction and result readable.
Do I need a phone recording for a Reel?
No. A desktop feature can be shown in a vertical edit if the important area remains legible. Choose the framing around the action.
Should I record on a real phone or a simulator?
Either can work. A real device shows true touch behavior and timing; a simulator or desktop window can make clean sample data easier to set up. Choose whichever shows the action most clearly, and keep the result honest.
Should touches or clicks be visible?
Show them when the viewer needs to know where the action happened, such as a small icon. Hide them when the control is obvious and the indicator only adds movement.
Find the opening for your next edit.
See the public samples, then unlock the library when you’re ready to work with the originals.
Explore the library