Overview
How might we teach AI features through practice in the real product instead of a documentation wall?
When to use
- Figma, Notion, and Copilot flows where coach marks ask people to click a real control, not read a help article.
- Features like Accept, Tools, or Attach that stay invisible until someone uses them once.
- Enterprise rollouts where a short guided click path improves adoption without blocking experts permanently.
- Products where each step validates a live UI action, not a fake sandbox that diverges from production.
When to skip
- Returning experts for whom coach marks are noise, offer skip and never-show-again.
- Tasks too dangerous to practice in production without a sandbox.
- Products where a 10-second empty-state starter is enough and a multi-step tour over-teaches.
States
Design the click-through practice loop in context, not only a blocking modal tour.
- 01
Triggered
First visit or help entry starts the tutorial. Skip and restore-from-help stay available.
- 02
Guided
A coach mark highlights the target control. Copy says what to click and why.
- 03
Practicing
The person uses the real control (Accept, open Tools, Attach). The UI is live, not mocked.
- 04
Validated
The action succeeds and the step advances. Brief confirmation, not a congratulations modal.
- 05
Advanced
The next control lights up. Progress count updates; prior steps stay complete.
- 06
Complete
All steps finish. The tour dismisses and can replay from help without resetting product state.
Key UX elements
The parts that must be present for learn-by-doing to stick.
Step
Teach one control per step.
Accept a suggestion, open Tools, attach a file: one clickable skill at a time beats a feature dump.
Hint
Anchor guidance to the target control.
Coach copy sits beside the button or menu being used. Generic center-screen text gets ignored.
Practice
Advance only after the real action.
Require the highlighted click in production UI. Do not let Next skip past an unused control.
Progress
Show X of Y complete.
A step counter sets expectation length without a blocking full-screen wizard.
Skip
Never trap experts in a tour.
Skip on step one and never-show-again belong on every step. Blocking modals train people to rage-quit.
Restore
Reopen from help when someone forgets.
Completed tours should be replayable from settings or help without resetting the account.
Rules
Blocking modal tours that cannot be skipped or restored later.
Tutorials that demo features the user’s plan does not include.
Steps that break when the UI ships and selectors drift.
Congratulate-complete without leaving the user able to repeat the task alone.
Evidence
| Product | Implementation |
|---|---|
| Figma | Interactive product tours and practice files for core tools. |
| Notion | Guided templates and checklists that teach blocks by use. |
| Adobe Creative Cloud | In-app learn panels and hands-on lessons beside the canvas. |
| GitHub Copilot | Onboarding tips and example flows for accept/edit completions. |