Coach Marks

Interaction Specs

Interaction Specs: 

1. Display first coach mark as first time user experience

Provide descriptions of a particular component and how to use it when the user lands on a new page.

2. Navigate through pagination control

Use pagination navigates through each component on a single page.

3. Displaying next component

Display next set of component(s) on a single page to describe the components on an overlay of a single page so that users can focus on getting information about how to use each component before navigating to the next page.

4. Dismiss the Coach Marks

Users can click on the Close icon at the top right of the page to dismiss the Coach marks on the overlay.

5. Tour this page again

Users can turn the Coach Marks on again by clicking on the “Tour this page” link from the page.

Visual Specs

Visual Specs: 

Pattern Summary

Pattern Summary (Unity): 

Why Use This Pattern?

To familiarize users with the available components or widgets and how to use them when they land on a new page.

To provide a smooth user experience by providing brief hints so users can quickly find what they need.

What is the Solution?

  • When the user lands on a new page, provide descriptions of a particular component and how to use it. (For example, how to easily Search or take actions on the Action Bar.)
  • Display the available hint coach marks to describe the components on an overlay of a single page so that users can focus on getting information about how to use each component before navigating to the next page.
  • Display the pagination control to help users easily move back and forth among the components.
  • Users can click on the Close icon at the top right of the page to dismiss the Coach marks on the overlay. They can turn the Coach Marks on again by clicking on the “Tour this page” link from the page.

When to Use This Pattern

  • When the user wants to understand how to use the components on a page.
  • When the components are complex and the user needs an explanation about what they are and how to use them.

Do Not Use This Pattern When

  • It is not necessary on the Login page or any pages that are simple and easy to understand.

GUI Kit

GUI Kit contains all Unity Light theme patterns in vector format

Adobe Illustrator Download 2.1 MB
Vector PDF Download 2.7 MB

Updated November 2015