The coach tip component is a high emphasis experience, guiding and teaching users about new features and UI updates.
The coach tip is an overlay made up of a number of other atoms and molecules. The coach tip is always centered around the UI element it highlights. Coach tips are highly disruptive and should be used sparingly to alert users to one new feature at a time. Avoid displaying multiple coach tips back-to-back in a short time period. Only one coach tip can display within the platform at a time.
- Surface — High emphasis
- Content actions - Chips
- Content — Body 1
- Content divider (not a component or atom found in the system)
- Content heading — Medium Heading
- Highlight pulse
The coach tip surface is a nearly opaque branded surface, always shaped as a perfect circle. While the coach tip surface color defaults to ∆colorBrandedGuidance700, the surface may utilize any of the branded color prefixes or platform gray (see Specs below). The size of the surface varies slightly by device so that the rounded edges appear as consistently as possible. The surface size is 2.4x the viewport width with a max size of 1440 by 1440. The surface is always centered around the highlighted object.
Coach tip content is composed of a heading and body section, separated by a branded divider. Coach tips always include the same actions, “Got it” and “Remind me later”, but the “Remind me later” action is optional. These actions are displayed as chips utilizing the same color prefix as the surface and always display beneath the copy.
Copy character limits
Coach tip copy should be limited as much as possible, and ideally use less than 100 characters for the heading, and 300 characters for the body. Heading copy should be kept to a single line but can wrap if necessary. Body copy should be limited to 300 characters. The entire content group is vertically or horizontally centered to the highlight, depending on the placement.
The highlight is a knockout/cutout of the coach tip surface, fitted to the UI element the coach tip is calling out. The highlight may be a rectangle of any size and roundness, always designed to match the highlighted UI element. To help draw the user’s attention to the highlighted object, a subtle pulse animation radiates outward from the knockout in the shape of the highlight (see Behavior below).
The coach tip component defaults to Guidance colors, but may use Affordance or messaging color prefixes or platform gray. For all of the following labels, “--” is a stand-in for the branded prefix. For example, a default, or Guidance, coach tip would use a surface background color of ∆colorBrandedGuidance700.
The chip should inherit the branded prefix to ensure that the colors do not clash or create unforeseen visibility issues.
The coach tip should always appear on top of every other element in the UI, but it utilizes no styling for elevation.
Maintain an internal padding of ∆spacingPlatformGigantic on all four edges of the surface to keep the content area from extending past the coach tip surface.
Additionally, for Small or Medium viewports the highlight has a horizontal spacing of spacingPlatformBase and vertical spacing of spacingPlatformHuge. For all other viewport sizes, both horizontal and vertical spacing is spacingPlatformHuge.
Within the content area, all items are spaced vertically using the above guidelines. The divider is a 24x2 rectangle. The content area has a minimum width of 240px and should be repositioned whenever it would shrink beneath this size (see Placement below).
The content area should be vertically or horizontally centered to the highlight point.
The content area has a max width of 560px to optimize character per line, maximizing readability.
Most of the coach tip’s surface will appear off-screen. However, the content and highlight should never appear offscreen. (It’s fine for the highlight pulse to extend off screen) To ensure that the content and highlight are always visible, align content to the screen margins in the event that the content space would appear offscreen. For example, the content area above honors the screen margins instead of coach tips’ left internal padding.
The highlight pulse radiates outwards, fading out at a max distance of ∆platformSpacingBase from each edge of the highlight knockout (see Behavior below).
There are no state considerations for this component.
There are no additional theming considerations for this component.
The coach tip is always centered on the highlighted UI element.
While the content area defaults to be positioned to the left of the highlight, it may also be placed above, below, or to the right of the highlight. Left and right placement are preferred because they reinforce users’ left-to-right reading patterns.
The content should be placed above or below the highlight whenever its width would shrink below 240px.
Coach tips enter the screen over a relatively long amount of time. The choreography of scaling and fading in gives the user a moment to recognize their experience is being augmented without feeling like they are being bombarded with a popup.
The highlight pulse animation is a 3.5 second loop of three consecutive ripples. Each ripple should maintain the shape of the highlight, extending outward ∆spacingPlatformBase on all sides while fading out.
The coach tip exits considerably faster than the entrance, allowing users to return to the experience as quickly as possible.
Tapping anywhere outside of the surface should dismiss the coach tip, preferring the least destructive action available. In the example above, the send again quick action button is actionable and tapping it would dismiss the coach tip with a Remind me later event.
Developer DocsVue Developer Docs
Component documentation coming soon!