--- title: "Coach marks UI: anatomy, variants and examples | Kombai" description: "Coach marks are short tips pinned to parts of the interface that show people where things are the first time they see a screen." canonical_url: https://kombai.com/glossary/coach-marks/ author: "The Kombai Team" --- # Coach marks Coach marks are short tips pinned to parts of the interface that show people where things are the first time they see a screen. - Also called: product tour, onboarding tips - Platforms: Web, Mobile - In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/coach-marks/), [30 mobile designs](https://kombai.com/gallery/mobile/coach-marks/) - [Zedoary](https://kombai.com/gallery/inspirations/coach-marks-web-40/) (Web) - [Cidermoor](https://kombai.com/gallery/inspirations/coach-marks-ios-28/) (Mobile) - [Prusik](https://kombai.com/gallery/inspirations/coach-marks-web-37/) (Web) ## 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. ## When to use coach marks - **First run.** A new workspace or screen where the first action isn't obvious. - **A new feature.** Something that just shipped in a place people already know. - **Hidden gestures.** Swipes, long presses and shortcuts that nothing on screen shows. ## When not to use one - **A confusing screen.** If every control needs a tip, fix the design first. - **Help people need later.** Tips vanish once dismissed. Put lasting help in labels or docs. - **Every visit.** A tour people already saw trains them to close tips unread. ## Anatomy 1. **Spotlight**: Rings the control it explains 2. **Pointer**: Aims the callout at it 3. **Callout**: A title and one short line 4. **Step count**: Where people are in the tour 5. **Actions**: Skip, Back, Next or Done 6. **States**: First step, last step, focus ## Variants We sorted every coach mark design in the Kombai gallery and found six patterns. ### 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. - [Mullion](https://kombai.com/gallery/inspirations/coach-marks-web-2/) (Web) - [Driftford](https://kombai.com/gallery/inspirations/coach-marks-ios-14/) (Mobile) - [Autolyse](https://kombai.com/gallery/inspirations/coach-marks-web-48/) (Web) ### 2. Spotlights Everything dims except the control being explained, which sits in a ring or a cutout, so the eye goes straight to it. - [Chapter 1](https://kombai.com/gallery/inspirations/coach-marks-web-28/) (Web) - [Indigofold](https://kombai.com/gallery/inspirations/coach-marks-ios-19/) (Mobile) - [Workspace overview](https://kombai.com/gallery/inspirations/coach-marks-web-18/) (Web) ### 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. - [House style](https://kombai.com/gallery/inspirations/coach-marks-web-30/) (Web) - [Roadmaps Timeline](https://kombai.com/gallery/inspirations/coach-marks-web-19/) (Web) - [Pippinlane](https://kombai.com/gallery/inspirations/coach-marks-ios-26/) (Mobile) ### 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. - [Quincewell](https://kombai.com/gallery/inspirations/coach-marks-ios-30/) (Mobile) - [Sablepoint](https://kombai.com/gallery/inspirations/coach-marks-ios-3/) (Mobile) - [Lintelmark](https://kombai.com/gallery/inspirations/coach-marks-ios-7/) (Mobile) ### 5. Several marks at once Two or more labels pinned to different controls at the same time, read together like an annotated screenshot. - [Skepwell](https://kombai.com/gallery/inspirations/coach-marks-ios-21/) (Mobile) - [Planner](https://kombai.com/gallery/inspirations/coach-marks-web-20/) (Web) - [Voussoir](https://kombai.com/gallery/inspirations/coach-marks-web-4/) (Web) ### 6. Inline hint cards A dismissible card placed in the layout instead of floating above it, explaining the section it sits in. - [Woadmark](https://kombai.com/gallery/inspirations/coach-marks-ios-16/) (Mobile) - [Upcoming](https://kombai.com/gallery/inspirations/coach-marks-web-7/) (Web) - [Pomarie](https://kombai.com/gallery/inspirations/coach-marks-ios-27/) (Mobile) ## 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. - [Apiarch](https://kombai.com/gallery/inspirations/coach-marks-ios-25/) (Mobile) - [Sinople](https://kombai.com/gallery/inspirations/coach-marks-web-43/) (Web) - [Escapement](https://kombai.com/gallery/inspirations/coach-marks-web-9/) (Web) ### New feature announcements A mark or a short dialog badged New introduces a feature that just shipped, in a screen people already know. - [Creance](https://kombai.com/gallery/inspirations/coach-marks-web-32/) (Web) - [Meanderly](https://kombai.com/gallery/inspirations/coach-marks-ios-12/) (Mobile) - [Alveary](https://kombai.com/gallery/inspirations/coach-marks-web-45/) (Web) ### Shopping and checkout Tips point at store navigation, cheaper pickup and payment schedules at the moment people decide. - [Fordwick Market](https://kombai.com/gallery/inspirations/coach-marks-ios-11/) (Mobile) - [Bowline](https://kombai.com/gallery/inspirations/coach-marks-web-38/) (Web) - [Duneferry](https://kombai.com/gallery/inspirations/coach-marks-ios-4/) (Mobile) ## Coach marks vs similar components | | [Coach marks](https://kombai.com/glossary/coach-marks/) | [Popover](https://kombai.com/glossary/popover/) | [Dialog](https://kombai.com/glossary/dialog/) | [Toast notification](https://kombai.com/glossary/toast-notification/) | |---|---|---|---|---| | Appears | On first use or a new feature | When people click its trigger | On an action or an event | After something happens | | Points at | One control on the screen | The control that opened it | Nothing, it sits centered | Nothing, it sits at an edge | | Best for | Teaching where things are | Extra detail and quick edits | Decisions that need an answer | Confirming what just happened | ## 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 - [Popover](https://kombai.com/glossary/popover/) - [Dialog](https://kombai.com/glossary/dialog/) - [Empty state](https://kombai.com/glossary/empty-state/) - [Announcement banner](https://kombai.com/glossary/announcement-banner/) ## References - [WAI-ARIA Authoring Practices: Dialog (modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) - [WAI-ARIA Authoring Practices: Tooltip pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) - [WCAG 2.2: Understanding focus not obscured (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html) - [Apple Human Interface Guidelines: Onboarding](https://developer.apple.com/design/human-interface-guidelines/onboarding)