The Overlay pattern provides user assistance to learn about new or updated features of an application. Overlays are typically used in first-use, but can be used for day-to-day assistance. During first-use this pattern introduces the most relevant features of your product, while day-to-day use can call attention to new or upgraded features. An overlay is transparent, semi-transparent or a non-transparent layer. Overlays typically show notes, images, pointers and other information.

There are three common types of overlays:


Appearance characteristics for this pattern.


Common behaviors for this pattern.


Usage guidelines for this pattern.


Fig 1. Overlay


Fig 2. Overlay 2