5

I am seeing an emerging design pattern in web apps that is used for helping new users get oriented to a page or application.

It consists of showing a diagram with succinct helper-text over a semi-transparent overlay, sometimes with arrows pointing to specific controls on the page. One of the best example of this I have seen is in UX Pin, an online wireframing/design tool.

Has anyone ever utilized this pattern - and if so, what is it called? Or how did you refer to it?

I am also interested in learning how it is accomplished. Is there a tool or plug-in that might be useful for achieving this effect, and is it possible to do this in a reusable fashion without placing static text in a transparent png?

2

I don't think there is a specific name for it as it probably depends of its implementation. I've seen 2 versions: a fully static which must be closed first and one with "holes" in the overlay which allow users to interact with the page underneath.

Here is a pattern with some proposed keywords to combine below:

Pattern

Location + Piece of UI + Representation

Keywords

  • Location: on-page, on-screen, etc.
  • Piece of UI: help, helper, guide, on-boarding
  • Representation: overlay, screen

Exemples: on-page helper overlay, on-screen guide, etc.

| improve this answer | |
  • The kind with holes sounds intriguing! The one that I had seen most recently was a solid overlay, hadn't thought about little windows into the controls being described. Thank you for the thoughtful keywords pattern guide - what a nice breakdown for pattern naming conventions. – Joanna K Mar 14 '13 at 19:21
2

I would call it a tooltip with a semi transparent background.

enter image description here

At least this is what webappers calls it, where they implement the tooltip with jQuery and CSS described in their article Simple Transparent Tooltips with jQuery and CSS.

| improve this answer | |
0

It can also be called a wizard. Semi transparent overlay is just a css property and you can modify that based on the visual attributes of your platform. Wizard can be used for multiple functionalities:

  1. First run experience/ initial few times experience
  2. Performing multiple steps to complete an action
  3. Informing the user about what are the new feature releases for the platform.

Wizards can be static i.e. on a fixed location on the page or can move to a particular part of the page to give more context to the user. The wizard would typically be static for point 2 mentioned above and can be mobile for 1 and 3.

Example of First Run Experience of Google Data Studio:

FRE Google Data Studio

Example of Performing multiple steps to complete an action - Microsoft PowerApps:

Multistep form Microsoft PowerApps

Example of informing users about new feature releases - Confluence by Atlassian:

Confluence new feature release

Documentation of Wizard Patterns with code snippets:

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.