Pharos
JSTOR's Design System
 Getting started Help FAQs DocumentationDevelopment GitHub JSTOR LogosTypographyColorImageryIconographyElevationVoice and toneJSTOR termsWeb elementsGrammar and styleEditing checklistAlertButtonBreadcrumbCheckboxCheckbox groupCoach MarkComboboxDropdown menuDropdown menu navFooterHeaderHeadingIconImage cardInput groupLayoutLinkLoading spinnerModalMultiselect dropdownPaginationPillPopoverProgress barRadio buttonRadio groupSelectSheetSidenavSliderSwitchTableTabsToastTooltipText inputTextareaToggle button groupOverviewAlias colorsGlobal colorsFont familyFont sizeFont weightLine heightElevationRadiusSpacingTransitionsType scaleType styles
Skip to main navigation
Coach Mark
Coach marks highlight new or unique features, direct users in the right direction, or guide users during onboarding.
Example
Lorem Ipsum
This is an example Coach Mark

See live code examples in Storybook
Usage

Coach marks can appear automatically, after a delay, to focus the user's attention on a single primary action or in response to an action.

Examples
  • When a user visits a page for the first time
  • When a new feature is added
  • Inform a user after they activated a process
Placement

There are 12 placement options available. Coach marks can be placed top, bottom, left or right of the target (e.g. button, icon, link, etc.) and the caret (triangle) can be placed at the start, center or end of the coach mark.

Where should I place a coach mark?

The coach mark should be in close proximity to the feature that it highlights. There are 2 preferred placement options out of a total of the available 12. A coachmark should be placed either on the top or bottom of a feature with the caret (triangle) appearing in the center. The other placement options should only be used so that important features or information is not hidden.

Types
  1. Informational: Focuses the attention of the user on a section of the page or process taking place.
  2. Instructional: Highlights a feature or action.
Light vs Dark

The dark coach mark variant is the default state. Most of the backgrounds on JSTOR are white and should use the dark coach mark for contrast. Consider using the light coach mark variant when the coach mark will appear over dark backgrounds.

Best practices
Dos
  • Use coach marks to focus attention to important functionality and feedback in context
  • Display coach marks on a page once per session
  • Consider a coach mark to promote new features, functionality, or other changes to layout and patterns that may disorient the user
Don'ts
  • Do not repetitively display the same coach mark. You should be able to track whether the user has dismissed the coach mark and be confident it will not reappear
  • Do not overuse the coach mark and consider where else in the user's journey they may be interacting with coach marks within the product
  • Do not add more than one coach mark to a page. If features need explanation consider a tool tip or other passive communication devices (badges, external links, etc)
Content guidelines

The coach mark headline and body copy should be informative, actionable, and concise. It should Include the minimum amount of information that users need to know. It should not repeat what is already visibly available to the user in the interface. For example, you should not use "Workspace" as a headline if the coach mark is targeting a "Workspace" navigation link. Rather you would expect something actionable like.. "Find what you saved". Content should be written in sentence case. Refer to Voice and Tone guidelines for more guidance.

Accessibility Relevant WCAG guidelines
  • 4.1.3 Status Messages
  • 1.3.1 Info and Relationships A
Code expectations
  • Button contains "aria-haspopup="dialog"