User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
hi Joanna! are you referring to this kind of overlay? – arturomp Mar 10 '14 at 11:55
up vote 2 down vote accepted

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:


Location + Piece of UI + Representation


  • 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.

share|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
Thanks, glad that helped. – TotemFlare Mar 14 '13 at 20:04

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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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