CoachMark

Coach marks are instructional overlays which helps users discover and understand new functions or services. While the presence of such instructional screens is often unnecessary, there are times when it is helpful to the user to show them the right direction.

Coach Mark

Usage
Anatomy
Specs

Coach marks must be designed for optimal scannability, as users tend to dismiss them quickly and do not read thoroughly. They are there to introduce, guide or help discover new feature or services. They are always used with a dark overlay to draw more attention to the thing they are pointing towards.

usage example image

States

example state image

Top Arrow

example state image

Top Left Arrow

example state image

Top Right Arrow

example state image

Bottom Arrow

example state image

Bottom Left Arrow

example state image

Bottom Right Arrow