Product tour

A sequence of contextual hints that guide a user’s attention to the key parts of an interface.

Also called: product tour, tour, walkthrough, guided tour, onboarding, interface tour, step by step hints, coach marks, intro tour, tutorial, first-time tutorial, spotlight

What it is for

It introduces new users to what an app can do, or shows what’s new after an update. It often dims the background around the highlighted element and has controls such as “Next”, “Back” and “Skip”.

Where you see it

• Complex SaaS products — a step-by-step walkthrough on first login
• App updates — a tour of new features
• CRMs and banks — a first look around your account

What it is called in code

• product tour
• onboarding
• coach marks

See also

• Tooltip — A small text bubble that appears when you hover over or focus on an element.
• Modal window — A window that appears over the page. Until you close it, you can’t do anything else on the page.
• Stepper — A progress indicator that breaks a long process, like filling in a long form, into a sequence of steps.