Product demos & UI / Guide

Write UI callouts that add useful context

Use a callout to explain something the interface does not already make clear. Name the consequence of a choice, the reason to inspect a field or the meaning of a changed state. Remove labels that merely repeat nearby text.

By AnimroUpdated 2 min readAI-assisted · independently agent-reviewed

Who this is for: Writers and designers adding explanatory copy to product demos.

What to prepare

  • Exact interface labels
  • The viewer question for each scene
  • Verified action and confirmation states
  • Caption layout

Assign a purpose to each callout

A callout can identify the next action, explain why it matters or interpret the observed result. Asking it to do all three in a long sentence usually competes with the interface. Decide what the viewer needs at that exact moment.

Read the native label first. A callout saying “Save button” beside a button already labeled Save adds little. “Save to apply the owner change” explains the consequence if that matches the verified workflow.

Illustrative callout rewrite exercise

The fictional example follows request R-083 through assignment. These proposed annotations belong to the video, not the application UI.

  • Decorative: “Powerful control.” Replace with action: “Choose the next reviewer.” Place it while the owner menu is open.
  • Redundant: “Status.” Replace with reason: “Check whether review is still pending.” Keep the actual status label visible.
  • Vague result: “Success!” Replace with observable result: “Example reviewer is now assigned.” Use only after the confirmed saved state.
  • Overclaim: “Never lose a request.” Replace with bounded explanation: “This queue shows requests awaiting review.” Preserve the active filter.
  • Unnecessary: “Request R-083” directly over an already readable identifier. Remove it and give the identifier space.

Time the callout to its evidence

Introduce an action label before activation, a reason label during inspection and a result label after confirmation. A success message appearing while the system is still processing can imply that completion occurred earlier than it did.

Anchor the callout near the relevant region without covering the value it explains. If a pointer crosses several controls, simplify the layout. A viewer should not need to solve an annotation puzzle to understand a one-field change.

Keep the wording inside the shown scope

Use the same terminology as the product. If the interface says Reviewer, switching to Approver may imply a different role. If the example concerns one request, avoid wording about all requests unless the visible scope supports it.

For a short silent film, a few precise labels may carry the story. For a narrated training video, use callouts for key distinctions rather than reproducing every spoken sentence. Review with captions present so both text layers remain readable.

Review checklist

  • Every callout adds information beyond native labels.
  • Result wording appears only after confirmed evidence.
  • Terminology matches the product.
  • Annotations do not cover the controls or values they explain.
Explore product demos & ui ↗