Annotate a screenshot so the explanation is faster than the confusion

Decide what the screenshot must prove

A bug report may need to identify the control that failed and the result that appeared. A tutorial may need to show an ordered path. Product feedback may need to compare the intended and actual state. Write that purpose in one sentence before drawing.

Crop away unrelated browser chrome or empty space when it does not establish useful context. Keep enough surrounding interface for the viewer to recognise the page and orientation.

Use a small annotation system

1. Mark the primary targetUse one strong arrow, outline or spotlight for the most important area.
2. Add order only when order mattersNumbered markers are effective for procedures; they are unnecessary for a single observation.
3. Write labels as actions or findingsPrefer “Select Export” or “Error appears here” over long explanatory paragraphs inside the image.
4. Check the finished screenshot at sharing sizeThin lines and small labels can disappear in chat, issue trackers and documents.

Annotation is not always redaction

A translucent box, an arrow placed over text or a reversible project layer does not necessarily remove sensitive pixels. When hiding an email address, access token, account number or face, use a real blur or pixelation tool, export the result and inspect the exported pixels at full size before sharing.

• Use consistent colourOne annotation colour creates a clearer path than several decorative colours.
• Preserve contrastChoose a stroke that remains visible over both bright and dark interface areas.
• Keep the source editableSave the project when the interface may change or reviewers may request revisions.
• Add text outside the image tooIn documentation and bug reports, include a sentence or alt text so the meaning is not available only through colour and arrows.

Example: a three-step settings change

Crop the screenshot to the settings panel, place markers 1–3 beside the menu, option and save button, then add a short label only where the option name is ambiguous. The surrounding document can explain why the setting matters; the image should make the path immediately visible.