How to Place Captions Without Covering Important UI

The demonstration finally reaches its useful moment. A cursor clicks the button the audience came to find. At exactly that moment, two lines of captions appear over the button. The video is captioned, the words are correct, and the essential instruction is hidden.

This happens because captions are often added after the screen recording and layout have been approved. By then, the lower part of the frame already contains a toolbar, a result notification, and perhaps a decorative heading. The caption layer has nowhere reasonable to go.

Video captions need to be planned as a participant in the product-demo composition. Their job is to preserve audible information. They must coexist with the visual evidence that makes the demonstration useful. Moving them away from one collision is only the beginning; the real task is making the whole sequence readable as it changes.

Separate Captions From Other Text

A caption represents speech or relevant audible information. An annotation identifies something in the picture. A scene heading tells the viewer what the current section is about. Interface text belongs to the product itself. These roles overlap visually but should not become interchangeable.

Imagine a fictional analytics tutorial. The narrator says, “Choose a monthly comparison.” A caption records that sentence. An annotation beside the control might say “Comparison period.” The interface itself contains the option “Previous month.” Showing all three at equal prominence is unnecessary, yet removing the caption because a heading exists would also remove part of the spoken explanation.

Rewrite the editorial layer first. Keep the spoken caption, let the actual interface label establish the selected value, and retain an annotation only if it resolves a real ambiguity. This reduces competition without asking the caption track to do a different job.

Use consistent visual distinctions. The caption can sit in a predictable reading zone, while a small annotation remains attached to its target. Avoid making captions look like clickable interface controls. Viewers should not have to infer which words belong to the product and which were added by the editor.

An Established Example From Netflix

Netflix’s general timed-text guidance requires avoiding overlap with on-screen text. Its forced-narrative documentation shows actual examples of translated text positioned above existing labels, rather than covering those labels. It also describes subtitle repositioning when playback controls appear. The principle extends beyond film: available caption space is a relationship between text, picture, and player state. Netflix: Understanding Forced Narrative Subtitles

In the left example, the lower English location and date remain visible while Spanish text occupies the top. In a product tutorial, make the same decision around the control and result the viewer needs to inspect.

Notice that the example preserves two kinds of information. It does not solve translation by erasing the original label, and it does not solve composition by making the translation too small. Product captions deserve the same willingness to rearrange the surrounding picture when necessary.

Map What the Viewer Needs to See Over Time

A single safe-area rectangle cannot describe a product demo. The important control may begin at the top, move into an open menu, and produce a notification near the bottom. The region that must remain clear changes with the task.

Create a short event list before finalizing caption placement. For each event, identify the action target, the resulting state, and any text needed to interpret that state. You do not need a frame-by-frame spreadsheet for a simple clip. You need to notice the moments where the caption’s predictable region conflicts with the demonstration.

In the analytics example, the comparison dropdown may occupy the upper right, while the result appears in a lower chart legend. A bottom caption is harmless during selection and harmful during interpretation. That suggests a composition change or a deliberate caption position change at a natural boundary.

Do not chase the cursor with the captions. Constant repositioning makes the reading location unpredictable and can create new collisions halfway through a sentence. Prefer a few stable zones associated with coherent sections of the tutorial.

Reframe the Product Before Shrinking the Caption

When captions cover an important control, reducing the font is tempting. It preserves the screenshot and seems to solve the collision. But it trades an obvious overlap for a less obvious reading problem, especially on smaller displays.

Try moving or scaling the product crop within the composition. A modest amount of space below the recording can provide a stable caption region. A tighter crop can enlarge the relevant interface while allowing enough room for captions elsewhere. These changes often improve both layers at once.

Avoid placing an entire desktop window above a large caption band if that makes every label tiny. The aim is not to reserve space at any cost. It is to allocate space according to the scene’s informational priorities. A product recording can be partial if the missing area is unrelated to the demonstrated action.

If the scene genuinely needs the whole interface, consider a separate introductory overview followed by a close-up. Establish where the control lives, then move closer for the action. Viewers gain orientation without having to inspect an entire desktop beneath two lines of speech.

Let Sentence Boundaries Guide Position Changes

A caption that jumps from bottom to top halfway through a sentence forces the viewer to search for its continuation. Position changes are easier to follow when they coincide with a new caption event, scene, or task phase.

Break the narration at a meaningful point. “Choose a monthly comparison” can occupy the selection phase. “The chart now compares the same period last month” belongs to the result phase. Their separation creates a reasonable opportunity to move the caption zone if the result needs the lower part of the frame.

Line breaks also matter. Netflix’s general guide recommends breaking captions along linguistic units rather than separating tightly related words. The broad lesson for product video is straightforward: do not let an arbitrary text-box width split a product name, a number from its unit, or a negative word from the statement it qualifies. Netflix: Timed Text General Requirements

Preserve readable phrases within the destination’s caption limits. A visually symmetrical line break can still split a product name or detach a unit from its number.

Choose Open or Closed Captions for the Actual Player

Not every caption format or hosting platform preserves styling and placement information. A caption editor may let you position text in a preview, while the final player uses its own rules. Test the delivery pipeline before building a design around behavior it cannot retain.

Wistia, for example, documents that uploaded WebVTT files are converted to SRT and that styling or positioning instructions are not supported in that conversion. That is a concrete reason to verify platform behavior rather than relying on the expressive possibilities of the source format. Wistia: Transcripts and Captions

If your destination controls placement, reserve a suitable region in the video itself. If you need precise editorial labels, keep those as separate visual annotations rather than assuming a caption track will behave like a designed title layer.

Open captions are embedded in the picture and remain visible; closed captions are a separate track that the viewer can turn on or off in a supporting player. Choosing between open and closed captions affects both placement and maintenance. Burning captions in gives you more control over their exact position, but the viewer cannot hide them, and a translation or correction requires another video export. A separate caption track can change independently, but its positioning depends on the destination player. Keep the clean master and caption files so the delivery choice can change without reconstructing the demonstration.

Check With Playback Controls Visible

Product footage often uses the lower edge for status bars, file tabs, or completion messages. The player may use the same area for its timeline and controls. Adding captions creates a third claimant to the same space.

Review the actual player while paused, playing, and near the end. Move the pointer over it to reveal controls where that behavior applies. On a phone, check the controls produced by a tap. A clean screenshot taken after the controls disappear is not enough to establish that the demonstration remains readable during normal use.

Do not assume that because captions move automatically, they move to a safe place. A player may lift them above its timeline and place them directly over your product notification. The file and the player each behave reasonably in isolation, yet their combination fails.

If an important result only appears for a moment, keep it clear of the likely control region or show a stable result afterward. This also helps viewers who pause because they are following the tutorial in another window. Pausing should make the instruction easier to inspect.

Reserve the Space a Paused Result Needs

Look closely at the paused Netflix example. The caption sits just above the progress bar and control row. The player has consumed a substantial strip of the lower picture; the available reading zone has moved upward with it.

A product tutorial often puts its most useful confirmation in exactly that strip. Export completion, copied-link notices, and saved-state messages commonly appear near an edge. If a viewer pauses to inspect the result, the controls can arrive at the same moment and force captions into the notification.

Plan around the result’s occupied area before recording. Open the destination player’s controls, identify where captions sit, and compare that region with the product state you need to show. If they conflict, move the recording within the composition or choose a closer crop that places the result higher. Merely lifting the caption may cover the next important interface row.

Keep the final state visible after any transient notification leaves. For an export, show the resulting file or the relevant completed item as well as the short-lived toast. Someone following the tutorial in another window can then return to a stable result. That is more dependable than requiring them to catch a notification during the narrow interval before the controls appear.

When the action and result occupy different corners, treat them as two deliberate views. Establish the action first, then give the result a clear frame with a stable caption zone. The audience should not need to choose between reading the explanation and verifying completion.

A Revision Example: Exporting a Report

Suppose the footage shows a report editor, an Export button at the lower right, and a download confirmation in the same corner. The narration explains the export format while the click occurs. Bottom captions cover both the button and the confirmation.

The first revision should reduce avoidable conflict. Move the explanation of the format slightly earlier, while the format selector is visible. Crop closer to that selector. Then show the export action with a shorter spoken sentence and a caption placed in a region that stays clear of the control.

After the click, hold a view where the actual resulting file or confirmation is readable. Do not add a giant decorative “Success” label over the interface if it obscures the real evidence. If a separate title is useful, give it a different location and hierarchy.

Now inspect the longest caption in the section, not just the average one. One extra line may reintroduce the collision. The same is true after translation. A placement solution that only works for the shortest English sentence is not yet a stable composition.

Include the Longest Plausible Caption in the Layout Review

A common review mistake is choosing a neat example sentence for the mockup. The real transcript later contains a product name, a technical phrase, and a qualification that adds another line. The approved placement was never tested against the material it had to carry.

Use actual transcript events when evaluating the layout. Include the longest event, a short event, and an event that coincides with the most important result. If several languages are planned, include representative reviewed translations rather than artificial strings made of repeated letters. Real words produce real line breaks and reveal where the typography struggles.

Check contrast across the moving background too. A caption that is clear over a dark navigation rail may disappear when a white menu opens behind it. A restrained background treatment can stabilize contrast, but it also occupies visual space. Test that occupied space against the interface instead of judging the text in isolation. The correct treatment is the one that stays readable while preserving the evidence beneath it.

Review Captions as Part of the Task

A spelling review and a collision review are different. A perfectly transcribed sentence can cover the wrong thing. A visually elegant caption can contain an incorrect amount or product name. Both need attention.

First, compare the caption text with the audio and approved terminology. Then watch the captioned video at its expected display size. Identify every moment when the viewer needs to read the interface and the caption simultaneously. Pause there and inspect the combined frame.

Finally, ask someone to perform or describe the demonstrated task using the video. If they miss the control, find out whether it was hidden, too small, introduced too quickly, or named differently in the caption. Those causes require different changes.

Keep observations specific. “The caption covered Export during the click” is actionable. “Captions feel awkward” leaves the next editor guessing. A short set of exact moments is usually more valuable than a long list of general styling preferences.

Make Room Early in the Next Recording

The best fix often happens before recording. Position the window so the important controls do not hug the frame edge. Hide irrelevant panels when the product allows it. Use realistic data that keeps the relevant result compact and legible without misrepresenting the workflow.

Plan a few seconds of stable footage around key actions. This gives the edit room to align captions naturally instead of forcing text across a transition. Capture the complete result before stopping the recording, including any necessary confirmation or generated file.

A captioned product demonstration should allow the audience to read the explanation and inspect the evidence. Neither layer should have to win a fight for the same pixels. When placement, timing, crop, and delivery are considered together, captions become part of how the tutorial teaches, and the most important UI remains available at the moment people need it.