Who this is for: Designers combining interface demonstrations with explanatory captions.
What to prepare
- Exact caption text
- Protected control and result regions
- Complete camera and cursor plan
- Intended display sizes
Mark protected interface regions
Identify the control being activated, the object identifier, confirmation text and any scope labels. These regions must remain readable when captions appear. Add the cursor path to the map so it does not travel behind a caption block.
Work with the actual caption copy, including longer lines. A placeholder such as “Caption here” will not reveal collisions. Keep product callouts and captions distinct: one points to interface meaning, while the other conveys the spoken explanation.
Layout A: interface above a dedicated caption band
In this illustrative composition, a fictional request panel occupies the upper portion of the frame and a dedicated lower band carries “Choose the reviewer, then save the request.” The panel crop retains R-121, the Owner control and Save.
This layout is useful when the interface can be reduced modestly without losing text. Its tradeoff is a smaller screen area. If the Owner label becomes unreadable, move to a detail crop rather than shrinking the whole application further.
Layout B: side-by-side explanation and detail
For a dense desktop screen, place a close-up of the request panel on one side and a short explanatory text area on the other. Keep a small orientation label above the panel, such as “Request R-121.” The caption text stays outside the product image.
This preserves larger controls but sacrifices the full navigation view. Establish the wider screen first and return to it afterward. In a narrow composition, stack the explanation and detail vertically instead of squeezing both columns into tiny widths.
Review every caption interval against the action
Check the moment when a menu opens, a toast appears or the camera moves. A caption that fits the starting screen can cover the resulting confirmation. Reframe or reposition before accepting the sequence; do not rely on the viewer catching a brief glimpse between captions.
If the film includes a long explanation, shorten the spoken sentence or split the idea across appropriate holds. Do not remove essential caption meaning merely to preserve an ornamental composition. Inspect the final result at the intended display size, including the longest caption and the most crowded product state.
The proposed layouts are design choices, not a claim of accessibility compliance. Any platform-specific caption or accessibility requirement needs its own current requirements review.
Review checklist
- Captions never cover the current action or confirmation.
- The longest caption is checked in the densest state.
- Callouts and captions have distinct roles.
- Narrow versions are recomposed rather than blindly cropped.