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?


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.

  • 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

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.

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.