A visual earns its place when it shows something words can't: where to click, how parts connect, how a process flows. Otherwise it's decoration that goes out of date.
Which visual do you need?
Pick the situation to see the best format.
🖱 "Where is that button?"
Annotated screenshot. Crop to the relevant area, highlight the one element that matters, and keep callouts short.
🔄 "What happens next?"
Flowchart or process diagram. Best for decisions, workflows, and sequences with branches.
🧩 "How do the parts fit?"
Architecture or concept diagram. Show components and relationships; skip visual detail that doesn't carry meaning.
🎬 "Show me how it's done"
Short video or animation (under 2 minutes). For multi-step UI actions that are hard to follow as text. Add a transcript.
📊 "How do these compare?"
Table or chart. Tables for exact values; charts for trends and proportions.
Rules for visuals
| Do | Avoid |
|---|---|
| Place the visual right next to the text it supports | A gallery of images at the end of the page |
| Add alt text that describes the purpose | "image1.png" or empty alt text |
| Crop screenshots to the relevant area | Full-screen captures with tiny details |
| Keep the same visual style across topics | Mixed arrow styles, colors, and fonts |
| Make sure text alone is still complete | Steps that exist only inside an image |
| Use only media you have rights to | Images copied from the web |
Tip: reduce screenshot maintenance
Every screenshot is a maintenance cost — the UI changes, and the image goes stale. Use screenshots only where they genuinely help, reuse the same image in several topics instead of duplicating it, and keep source files so you can update quickly.
âž¡ Next: Write once, reuse everywhere