Product tour
The first-use sequence of callout bubbles that points at real controls and walks someone through one useful task.
See it
What it is
A product tour is a short sequence of anchored callouts that points at parts of the interface and explains what they do. It is usually shown on first use, after a major redesign, or when someone opens a complex feature for the first time. Each step pairs one visible control with one small piece of guidance. Mobile teams call the same thing coach marks, and a whole industry sells it as a service: Appcues, Pendo, and Userpilot all ship the same overlay with analytics bolted on.
Reach for it when the interface cannot be learned safely by trying, or when a few controls need context before the first task. Keep the tour optional, trigger it near the moment of need, and make it replayable from Help. Five useful steps beat fifteen labels that narrate every icon.
The gotcha is mistaking exposure for learning. People click Next to clear the overlay, targets may not exist on smaller screens, and a spotlight can block the very UI it describes. A tour should help someone do one real task, not inventory the product, and the underlying interface must still make sense after the bubbles disappear.
Ask AI for it
Build a 5-step product tour with Shepherd.js that guides the user through one real task. Anchor each step to a visible control, title it with the user's goal, keep body copy under 25 words, and provide Back, Next, Skip tour, and Close controls throughout. Wait for each target to exist before opening its step; if it is absent at the current breakpoint or permission level, skip that step instead of pointing at empty space. Move keyboard focus into the callout, return focus to the launching control on exit, and mark progress as '2 of 5'. Store completion in localStorage with a tour version so redesigned tours can run once again, and add a Replay tour action under Help. Never block the product until the tour is completed.