Coach marks from the Kombai gallery: an invoice editor's first step, a routing app's map spotlight and a team chat's channel tour.
What are coach marks?
Coach marks are short tips laid over the interface the first time someone reaches a screen or a new feature. Each one points at a single control, says what it does in a line or two and stays until it is dismissed. Several in a row make a product tour.
- Each mark points at one control, with an arrow, a ring or a dimmed backdrop around it.
- Marks wait to be dismissed, and multi-step tours show a step count and a way to skip.
Coach marks show up across guided tour, home and feature info screens.
When to use a coach marks
- First runA new workspace or screen where the first action isn't obvious.
- A new featureSomething that just shipped in a place people already know.
- Hidden gesturesSwipes, long presses and shortcuts that nothing on screen shows.
When not to use one
- A confusing screenIf every control needs a tip, fix the design first.
- Help people need laterTips vanish once dismissed. Put lasting help in labels or docs.
- Every visitA tour people already saw trains them to close tips unread.
Anatomy of a coach marks
This one works. Step through the tour, or tab to Next and press Enter. Escape ends it.
- First step
- Last step
- Keyboard focus
- Dismissed
- SpotlightRings the control it explains
- PointerAims the callout at it
- CalloutA title and one short line
- Step countWhere people are in the tour
- ActionsSkip, Back, Next or Done
- StatesFirst step, last step, focus
Coach marks variants
We sorted every coach mark design in the Kombai gallery and found six patterns. Browse all 50 web and 30 mobile designs.
1. Anchored tooltips
The default. A small card with an arrow aimed at one control, a short title and a Next or Got it button.
2. Spotlights
Everything dims except the control being explained, which sits in a ring or a cutout, so the eye goes straight to it.
3. Welcome and what's-new dialogs
A centered card with an illustration that welcomes people or introduces a feature, often with a button that starts the tour.
4. Gesture hints
A hand, an arrow or a short label that shows a swipe or a long press, for gestures that nothing on screen reveals.
5. Several marks at once
Two or more labels pinned to different controls at the same time, read together like an annotated screenshot.
6. Inline hint cards
A dismissible card placed in the layout instead of floating above it, explaining the section it sits in.
Where coach marks show up
First run in an empty workspace
A tip on the empty screen points at the one control that fills it, like starting a timer or adding a first clip.
New feature announcements
A mark or a short dialog badged New introduces a feature that just shipped, in a screen people already know.
Shopping and checkout
Tips point at store navigation, cheaper pickup and payment schedules at the moment people decide.
Coach marks vs similar components
Build notes
- Build a coach mark with buttons as a non-modal dialog: role="dialog", labelled by its title.
- Move focus into the mark when it opens, and let Escape end the tour.
- Never let a mark cover the control that has keyboard focus (WCAG 2.4.11).
- Show the step count and a Skip button on every step of a tour.
- Once someone skips or finishes a tour, don't show it again. Offer a replay in help.
- Swap pulsing rings and gesture animations for a still hint under prefers-reduced-motion.
FAQ
What's the difference between coach marks and a product tour?
A product tour is a sequence of coach marks, sometimes opened by a welcome dialog, that walks through several features in order. A single coach mark points at one control and can show up on its own, like the first time someone sees a feature that just shipped.
Are coach marks the same as tooltips?
No. A tooltip appears when people hover over or focus a control, describes it in a few words and holds nothing to click. A coach mark appears on its own, stays until it is dismissed and usually has buttons, so it's built as a non-modal dialog instead.
How long should a product tour be?
As short as the first task needs. Apple's guidelines suggest a set of tips shown in context over one long flow, because people learn better when they can focus on one action before the next piece of information.
Should people be able to skip coach marks?
Yes. Put Skip on every step, and once someone skips, don't show the tour again on the next visit. Keep a way to replay it, like a Take the tour link in help or settings.
Related terms
All glossary terms · Browse 50 web and 30 mobile coach marks designs