Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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? inspireux.com/wp-content/uploads/IMG_0087.jpg –  arturomp Mar 10 at 11:55

2 Answers 2

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:

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.

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

 
discard

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.