Method: interactive product tours and hotspots. Instead of a static screenshot with numbered callouts, readers click hotspots to learn about each part of the interface, or follow a guided tour. It's the documentation equivalent of the blog's "product walkthrough" and "clickable diagrams".
Try it: explore the author dashboard
Click the pulsing hotspots, or press Start guided tour. During the tour, you can also use the ← → keys.
Explored: 0 / 6
📘 DocPortal
🏠 Dashboard
📁 Projects
📝 My tasks
📊 Reports
⚙ Settings
🔎 Search topics...
DV
🚀 Publish
Topics in review24
Views this week3,120
Helpful rating87%
Reader activity
My tasks
✏ Update API guide
👀 Review FAQ
🌍 Translate intro
📷 New screenshots
When to use hotspots vs a tour
| Hotspots | Guided tour |
|---|---|
| Readers explore freely, in any order | Readers follow a fixed sequence |
| Best for reference: "what is this button?" | Best for onboarding: "your first 5 minutes" |
| Works well on overview topics | Works well at the start of a learning path |
Build it from a real screenshot: place the image, then position hotspots over it with absolute positioning or an image map. Related: Interactive infographic · Walkthrough