Correct name of transparent instructional overlays / coach marks for announcing new features or first time use?

Question

I find always more often when using a mobile app for the first time, these kind of instructional overlays or coach marks which illustrate to the user the basic gestures and menus of an application.

Below is an example on Android:

and here an HTML example in tumblr:

I cannot however find a consistent name for the above which would be an interesting tool also for Desktop apps even though I never see them used for instance in C# or Java applications but only mostly in mobile apps and web apps.

I also wonder if other platforms may use specific nomenclature of the functionality, in that case what is the naming for the same functionality on the different platforms?

Answer 1

When I have created these in the past, I just use the term 'product tour' or 'feature tour'

Here are a few of the ones I have looked at in the past that suit a few different styles.

• Intro.js - http://usablica.github.io/intro.js/
• Crumble - http://blog.tommoor.com/crumble/
• Bootstro.js - http://clu3.github.io/bootstro.js/

Answer 2

---

From my understanding, both Coach-marks and Instructional overlays are common terms referred for mobile apps. For web-apps, depending on their UX, they are referred to as interactive tooltips, guided walkthroughs, product tour, instructional overlays, etc.

Let me try and explain.

In general, Coach marks comes under the Product tour and is similar to Interactive Tooltips (Explained it in detail in the blog post). Wherein the objective is to showcase a product’s capability with a quick tutorial. The tutorial could be a combination of multiple patterns like the following:

1.Static splash screens & Modal Windows

Splash screens are basically graphic elements that contain the image, logo, and information about the application. Whereas a modal window is usually a clickable prompt that forces the user to interact before they proceed.

In the example above, Evernote forces the user to decide on the 3 given options. Based on the selected option, Evernote’s getting started process continues.

2. Real-time Interactive walkthroughs

This are the most popular version of Coachmarks among Product Tours.

It helps in handholding the user through an application over the major touch-points, prompting them to take actions. Often used in a complex and sophisticated application, they are widely accepted by Enterprises for employee training as well.

For example, here’s an example of an interactive walkthrough created via Whatfix.

3. Instructional overlays and Coach marks

Commonly found in mobile apps, instructional overlays and coach marks are brief hints that help the users find what they need on the app. It is also prevalent in web apps which provide quick instructions that require users’ attention.

Here’s how Google uses coach marks are used on Gmail.

4. Interactive Tooltips

These are very similar to interactive walkthroughs but do not prompt actions. The idea is to give the user a quick overview of a new feature, a description, a promotion or an instant contextual help. Facebook does this beautifully.

Remember how they got your attention for the all new Facebook reactions? That is a brilliantly designed interactive tooltip!

The basic idea of each these patterns is to give the user a positive first impression that streamlines and solidifies the user onboarding and training while helping him/her understand the core value of the product, quickly!

Btw, if you are looking for a solution to create coach-marks, instructional overlays, splash screens and interactive guided walkthroughs then check out the performance support platform, Whatfix.