This component informs the user of a new feature, nudges a user to use a feature or guides the user through a multistep process.
Usage Guidelines
Coach marks should be used sparingly in the application to avoid coach mark chains. Information presented in a coach mark should be short and sweet, focusing on one key function.
Features
A coach mark appears pointing to the targeted UI element on the page. It displays a title, description and either a dismissal link or ‘X’ icon. Once the coach mark is dismissed, it will not show again.
The basic coach mark with a link to dismiss.
Coach mark with the close icon.
The coach mark is used to inform and instruct the user. It can either appear automatically, such as when a user visits a page for the first time or a new feature is added, or in response to user action, like activating an info icon.
The info coach mark should only be used to clarify the meaning of a section of the page. Prefer to use information text if the target is a form input. One reason to break this guideline is if the amount of information would be unwieldy below the input, as in the example here.
Be careful not to use the coach mark to provide help content that would be better served by the Contextual Help component.
Write the copy in accordance with accessibility guideline #18 by refering to the semantic names of the UI rather than visual appearance. For example, “Click Start” vs “Click the Blue Button”.
Either the link or close icon should always be present, but the coach mark may also be dismissed when the user interacts with the targeted part of the UI. This is mostly useful for introducing new features or prompting users to take a specific action.
An example of using a Coach Mark when there’s too much information to put under the input.
Single Instance Coach Mark
Coach Marks