Use a coach indicator to show the source
Unlike popovers, the UI component that a coach mark is referring to does not need to take a down state. Use the placement of the coach mark paired with the coach indicator on top of the component to show the source.
Use a consistent width
Choose a width for coach marks that is spacious enough to accommodate all of their content. In a tour that includes several coach marks, keep the width consistent across each one.
Coach marks should appear on hover when showing supplementary context or hints
Like tooltips, coach marks can also be triggered on hover or keyboard focus on a specific component. When a coach mark is triggered this way, it can only be to show contextual help or information promoting feature discovery. Coach marks that are triggered on hover or keyboard focus shouldn't be used to communicate information that is crucial to completing a task or flow.
Use proper styling of the "Previous" button
The "Previous" button should always be a quiet secondary button.
Only use "Skip tour" and "Restart tour" in the more actions menu
The "Skip tour" and "Restart tour" options should only be available within the more actions menu.
Write concise, descriptive titles
Titles help with way finding and setting context for what a user is learning about. Summarize the description of the coach mark in a few concise words. In a tour, use a different title for each coach mark to keep users active and engaged. Avoid repeating the title in the description.
Keep body text succinct and informative
Coach marks are meant to provide quick overviews of functionality. Content should be at least a few words, but no more than a few sentences.
Align coach marks with the action being explained
Coach marks are aligned with their related components in the same way as popovers. Choose a placement that keeps the related component visible on screen.
Don't use inconsistent action names within a tour
The primary action should be brief and consistent. Use "OK" for a single coach mark. Within a tour, use "Next" for all but the last step, and "Finish" for the last step. Don't use different primary action names for every step in a tour.
Allow dismissal when a coach mark depends on an action
When a part of the tour is dependent on a user taking an action, it's okay to put the primary button in the disabled state as long as the user has a way to exit the tour. For a one-off coach mark, this means the primary button should remain as a route to dismiss. In a tour, it's recommended to have the more actions menu present.
Don't require users to confirm that they've taken an action
When part of the tour is dependent on a user action, don't force users to confirm that they've taken that action.