example of a lightbox

Lightboxes have come to replace pop-up windows as a way of drawing the user’s attention to particular information by dimming the rest of the screen. They are a great way of focusing user attention on a particular message or interaction. But, like pop-ups before them, lightboxes are a tool that’s easy to misuse. Here’s some simple guidelines for friendlier, more effective lightboxes:

Lightboxes are not a replacement for pages:

• Use lightboxes sparingly. A lightbox stops a user in her tracks. Are you sure that’s what you want to do?
• The lightbox should not cover more than 50% of the screen–if it’s that big, it’s time to launch a new page.
• Beware of scrolling in lightboxes — if there’s enough content in the lightbox to require scrolling, it might be time for a new page.

Dimmed content may be needed so keep it legible:

• Be careful how much you dim. If the overlay is too opaque, the user loses context, if it is too transparent, there is too much visual “noise” for the lightbox to be effective.  40% opacity seems to work well for a solid black overlay.
• If the lightbox depends upon the user being able to read the dimmed content, make sure the lightbox is repositionable and has clear affordances for repositioning such as a title bar with cursor change on mouseover.

Always give the user an out:

• When the user needs to take  a specific action such as submitting a form, make sure the button or link is immediately visible and  recognizable. Don’t depend on users to read your helpful instructions.
• When there is no specific action required, for example when expanding a thumbnail image,  add a close control indicated  either by an “X” in the upper right corner or with the text “CLOSE”.