{ "_description": "Generated from data/ — edit the sources, not this file. The agent access guide explains the evidence boundary of every field.", "schemaVersion": "1.0.0", "kind": "entry", "locale": "en", "id": "coach-marks", "name": { "zh": "蒙层引导", "en": "Coach Marks" }, "page": "https://designvocabulary.com/en/entries/coach-marks/", "self": "https://designvocabulary.com/en/entries/coach-marks.json", "alternates": { "zh-CN": "https://designvocabulary.com/zh/entries/coach-marks.json", "en": "https://designvocabulary.com/en/entries/coach-marks.json" }, "site": { "catalogSchemaVersion": "0.1.0", "entries": 158, "index": "https://designvocabulary.com/en/entries/index.json", "query": "https://designvocabulary.com/api/query?lang=en", "guide": "https://designvocabulary.com/en/agents/", "llms": "https://designvocabulary.com/llms.txt" }, "provenance": { "sourceBacked": [ "entry.definition" ], "editorial": [ "entry.boundary", "entry.signature", "entry.when", "entry.when_not", "entry.tradeoff", "entry.comparison", "entry.rules", "entry.relations", "entry.implementationNote", "entry.behavior" ], "scope": "Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.", "editorialStatus": "drafted", "specimenData": "fictional", "specimenNote": "Original fictional specimens. Definitions cite sources; usage advice and recipes are editorial.", "sources": [ { "id": "coachmarks-nng-overlay", "url": "https://www.nngroup.com/articles/mobile-instructional-overlay/", "title": "Nielsen Norman Group · Instructional Overlays and Coach Marks for Mobile Apps (Aurora Harley, 2014-02-16)", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://www.nngroup.com/articles/mobile-instructional-overlay/" } }, { "id": "coachmarks-nng-tutorials-contextual", "url": "https://www.nngroup.com/articles/onboarding-tutorials/", "title": "Nielsen Norman Group · Onboarding Tutorials vs. Contextual Help (Page Laubheimer, 2023-02-12)", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://www.nngroup.com/articles/onboarding-tutorials/" } } ], "lists": [], "ordered": false, "listDisclaimer": "Seat numbers are editorial positions, not scores, rankings, or popularity measurements. A list that is not filled is left as it is." }, "entry": { "id": "coach-marks", "type": "interaction", "name": { "zh": "蒙层引导", "en": "Coach Marks" }, "aliases": [ "Instructional Overlay", "Coach Mark", "UI Hint Overlay", "新手蒙层", "功能指引" ], "granularity": "component", "intents": [ "discover-capabilities", "inform" ], "tags": [ "onboarding", "overlay", "hint", "first use", "feature discovery" ], "definition": "A semi-transparent layer laid over the real interface that cuts out and highlights one control or area and explains its purpose in a sentence or two with an arrow; the user dismisses the layer before going back to work in the interface.", "boundary": "A coach mark is an annotation laid over the real interface, pointing at the very control the user is looking at. It is not progressive disclosure: progressive disclosure tucks secondary content away and expands it when needed, changing how much the interface itself shows, whereas a coach mark hides and expands nothing — it only annotates a control that is already there. Nor is it an onboarding tour: a tour is a sequence of explanatory screens or steps played in order, usually all at once on first launch; a single coach mark explains one interaction, ideally just as the user is about to need it. Chain several coach marks into one continuous run and it has become a tour, with all a tour’s problems. It also differs from a tooltip, which the user triggers by hovering or focusing and which does not cover the rest of the interface.", "signature": [ "A semi-transparent layer covers the interface, cutting out or highlighting only the target control", "A short text with an arrow or circle points directly at a real element of the interface", "The layer itself is not interactive; the interface returns only after it is dismissed" ], "when": [ "A gesture or control position is not obvious, and first-time users are likely to miss it", "The interface gains an important new feature that needs pointing out without changing the layout", "It can be triggered just as the user is about to use the feature, rather than played all at once at launch" ], "when_not": [ "The interface can only be understood with explanations, so the design should change rather than gain annotations", "Many things must be explained at once, and the overlays turn into a long chain of steps", "It reappears every time the screen opens, or cannot be found again once dismissed", "The annotation looks so much like a real button that users try to tap the annotation itself" ], "tradeoff": "A coach mark can draw attention to one specific control without changing the layout; the cost is that it interrupts the user and asks them to remember the instructions before acting, and most people close it as fast as they can. The more it explains at once, the less is remembered and the more complicated the interface appears.", "comparison": { "focus": "Pointing out one non-obvious interaction on the real interface", "mechanism": "A semi-transparent layer highlights the target control with a short annotation", "cost": "Interrupts, relies on memory, and is often dismissed unread" }, "sources": [ { "id": "coachmarks-nng-overlay", "title": "Nielsen Norman Group · Instructional Overlays and Coach Marks for Mobile Apps (Aurora Harley, 2014-02-16)", "url": "https://www.nngroup.com/articles/mobile-instructional-overlay/", "claim": "The article describes a coach mark as a UI hint, often shown on first launch, that explains part of the interface as a transparent overlay. It notes that users rarely read instructions, that showing too many hints at once strains memory, that chained hints make users dismiss them faster and make the app seem complicated, and that hints can be mistaken for interactive elements. It recommends that each tip explain a single interaction, that hints appear one at a time at the right moment, that visuals carry the message with minimal text, and that hints look visually distinct from the real interface. This entry’s definition, conditions of use and rules are paraphrased from it.", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://www.nngroup.com/articles/mobile-instructional-overlay/", "status": "unconfirmed", "checkedAt": "2026-10-20T07:58:33.535Z", "error": "save-request-failed" } }, { "id": "coachmarks-nng-tutorials-contextual", "title": "Nielsen Norman Group · Onboarding Tutorials vs. Contextual Help (Page Laubheimer, 2023-02-12)", "url": "https://www.nngroup.com/articles/onboarding-tutorials/", "claim": "The article distinguishes “push revelations” delivered at times the system chooses, such as onboarding tutorials, from contextual help (“pull revelations”) that appears when the user needs it. It argues that tutorials are often skipped and hard to recall when needed, stresses that help must be easy to dismiss and easy to find again, and recommends progressive disclosure and avoiding multistep instructions users must memorise. This entry uses it to distinguish a single coach mark from an onboarding tour and to advise showing it at the point of use and keeping it recoverable after dismissal.", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://www.nngroup.com/articles/onboarding-tutorials/", "status": "unconfirmed", "checkedAt": "2026-10-20T07:58:35.638Z", "error": "save-request-failed" } } ], "relations": [ { "target": "progressive-disclosure", "kind": "alternative", "condition": "The interface has features users do not need yet but will later", "reason": "Progressive disclosure changes how much the interface itself shows by collapsing and expanding, while a coach mark leaves the interface unchanged and annotates it; when the former lets a feature surface naturally, an extra layer of explanation is usually unnecessary.", "basis": "editorial" }, { "target": "empty-state", "kind": "alternative", "condition": "The user enters a page for the first time and it has no content yet", "reason": "The empty state is itself the place to explain what the page is for and offer a first action; there is no need to cover it with an overlay saying the same thing.", "basis": "editorial" }, { "target": "cognitive-load", "kind": "informs", "condition": "Several features are to be introduced at once", "reason": "Users must remember the instructions before they act, and the more hints there are the harder that becomes, so explain one thing at a time.", "basis": "editorial" }, { "target": "nagging", "kind": "misused_as", "condition": "The overlay keeps returning after the user closes it, or is used to promote features unrelated to the current task", "reason": "An annotation meant to explain an interaction becomes nagging once it turns into a repeatedly interrupting promotion.", "basis": "editorial" } ], "rules": [ { "when": "Several interactions need introducing", "instruction": "Use one overlay for one thing at a time, shown just as the user is about to need it; do not chain them into a sequence that plays straight through.", "strength": "recommend", "basis": "editorial" }, { "when": "The overlay appears", "instruction": "Provide an obvious way to close it, do not repeat it automatically once closed, and keep a way to view it again from the help entry point.", "strength": "recommend", "basis": "editorial" }, { "when": "Designing how the annotation looks", "instruction": "Make the annotation visibly different in style from real controls, so users do not tap the explanation as if it were a button.", "strength": "recommend", "basis": "editorial" } ], "behavior": { "states": [ "hidden", "shown", "dismissed" ], "a11y": [ "When the overlay appears, focus moves to its text; when it closes, focus returns to the highlighted control", "The explanation is read by screen readers, and the close button works from the keyboard and responds to Esc", "The text names the control it refers to instead of relying only on the arrow and the cut-out position" ], "motion": "A simple fade in and out is enough; respect the system’s reduced-motion setting" }, "demo": null, "version": "0.1.0", "editorialStatus": "drafted", "requirements": [], "demoCapabilities": [], "implementationNote": "This entry has no runnable specimen; the illustration is an editorial sketch of an overlay cutting out one control with a short annotation, not a verified implementation. Before applying it to a product, test where focus goes after closing, the way to view it again, and whether the annotation is mistaken for something tappable.", "image": { "src": "/images/coach-marks.webp", "alt": "A fictional FIELDNOTES phone screen sketch: the whole interface is covered by a semi-transparent dark overlay except for one round button in the lower right, cut out and lit; a hand-drawn curved arrow points to it, ending in a few grey placeholder text bars and a close mark." }, "searchTerms": [ "新手引导", "蒙层", "提示", "首次使用", "功能发现" ] } }