User Walk-Through Patterns

Categories of user walk-through patterns:

1. Coach marks;
2. Pop-ups;
3. Notifications within content;
4. Walk-through tutorials at the launch;
5. Hotspots;
6. Notification text;
7. Dialog tips at the launch;
8. Combinations of two or more categories.

Coach marks

Features
1. Take over the full screen with gradient or tinted overlay;
2. Highlight one specific area;
3. Give very brief explanation to it;
4. Are closed by a CTA, x, second touch on the screen or swipe;
5. Use contrasted colours.

When is it used?
Best used in product tours to convey a unique interface or one particularly delightful feature.

Main purpose to use
Draw most attention to the feature.

Pop-ups

Features
1. Take over the full screen with gradient or tinted overlay;
2. Pop-up screen covers most of the work area;
3. Give brief explanation to the new feature;
4. Are closed by a CTA “Got it” or “Okay” which prompts user to read through the new feature.

When is it used?
Unlike the coach marks, pop-ups are used to introduce a new service feature rather than a specific UI element.

Main purpose to use
Draws full attention to the feature. User must close it to keep using the service.

Notifications within content

Features
1. Placed into the service as part of content;
2. Are closed by a CTA “Got it” or “Okay” which prompts user to read through the new feature;
3. Do not have to be closed to be able to use the service.

When is it used?
Used when introducing a new feature not disrupting the user from their major activity. Since a new feature is introduced non-disruptively, and the user can use the service without closing it; if they did click a CTA, they more likely read through the feature description.

Main purpose to use
Not to interrupt user from their major activity.

Walk-throughs at the launch

Features
1. Take up full screen;
2. Has a few steps (3-6) [Some research said, more than 3 is too much for the new user to learn though];
3. One feature per screen;
4. Have a possibility to skip training through a CTA or x.

When is it used?
Normally used while the user logs in for the first time.

Main purpose to use
To teach user about the service.

Hotspots

Features
1. Notification bubble next to the new feature;
2. Notification bubble with a bright contrasted colour;
3. Bubble either sits next to the text / category, or slightly overlaps the icon.

When is it used?
Used when the users has a new message or notification they haven’t seen before.

Main purpose to use
To draw user’s attention to the new feature without shoving information in their face. It makes user curious to click and learn about a new feature.

Hotspots can lead user to a new feature that sits  in up to the third level of hierarchy. In the case like this, the notification bubble is placed on each step of the user journey to the feature.

Notification text

Features
1. Notification text next to the new feature;
2. Notification text with a bright contrasted colour;
3. Sits next to the text / category.

When is it used?
Used when the feature is generally new. Unlike hotspots (notification bubbles), this one does not disappear right away after the user clicked on it, but is rather staying there for a period of time defined by the service owner.

Main purpose to use
To show users the new feature without shoving information in their face. Is not usually personalised based on user’s behaviour.

Dialog tips

Features
1. Normally introduces the number of features while the user is using the service;
2. Each feature is presented in an overlay dialog message, is normally numbered;
3. Each feature has a “Next” CTA, as well as a possibility to skip training.

When is it used?
Used upon the first user’s sign up to the service.

Main purpose to use
To train the user while in the working environment.

Combinations

Feedly

Walk-through + coach mark

Why did they use it this way?
Feedly gives a new user a 2 step walk-through. Users can’t really skip it, but only because they wouldn’t take it as a walk-through. The first step teaches the users that they flip pages swiping up. The second step uses a coach mark to let users know hot to explore things to get started.

Once the user hits a CTA (rather than a search icon), it automatiacally takes them to the search tab.

YouTube

Hotspots + dialog tips + more hotspots

Why did they use it this way?
While in the Home screen, to let users know there are app updates and / or new personal notifications, YouTube used hotspots in main navigation.

A new feature in the Subscriptions screen is also highlighted and explained with the dialog window.

Facebook

Notification within context + dialog tips

Why did they use it this way?
Introducing a new feature while taking user through experience combined with Dialog messages on each step of the experience. The feature starts off non-disruptively, and users themselves chose to take up on a journey; and thus learn about it.