Coach Marks
Search the component library

Coach Marks

v1.0.2

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

  • Contextual message for instructing or drawing attention
  • Way to present small pieces of contextual information
  • Two different dismissal options

Basics

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.

Icon Coach Mark

The basic coach mark with a link to dismiss.

Coach mark with the close icon.

Usage

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.

Informational

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.

Instructional

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”.

Dismissing

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.

Redlines

Spacing
  • 20px vertical padding
  • 24px horizontal padding
  • 4px between title and message
  • 24px between message and dismissal link
  • 4px between arrow and target element
Dimensions
  • 280px wide at every viewport
Arrow
  • 16px wide, 8px tall
  • Prefer to position the arrow in the center of the box, or 32px from either side
  • If necessary the arrow may be positioned as close as 20px from either end
  • Prefer arrows to point downwards rather than upwards
  • Arrow never points out of either side
Close icon
  • remove-sm-18
  • Centered in a 44x44 px tap target in the upper right corner
Colors
Drop shadow
  • Shifted 3px downwards
  • rgba(0, 0, 0, 0.25) color
  • 7px blur, 0px spread
Typography
Info Trigger

Single Instance Coach Mark

Changelog

1.0.2

  • ADDED: Feature links

1.0.1

  • FIXED: Inconsistencies in sketch file

1.0.0

  • CHANGED: Initial version