When used properly, lightboxes can be an effective way to interact and communicate with your audience without losing original page content. However, when misused, they can be confusing and discouraging for customers - even resulting in lost conversions.

Example of a Lightbox

To begin, the term “lightbox” is used to describe what is more traditionally called an overlay - a small box of content layered on top of an existing web page. Most often, the original page is darkened, leaving only the overlay illuminated - hence its nickname.

Here are a few hints to help you decide where and when is the appropriate time for this tool.

The 5 W's of Lightboxes

Who: Target Audience
Users on Mobile Devices are often inconvenienced when lightboxes appear and the app immediately zooms in accommodate the keyboard, which can prohibit them from accessing your site. This is something to consider before installing if mobile users are an important demographic for your site

What: Intended User Action
Often, the most common actions for light boxes to submit information, confirm a decision or to alert a user to content.

When asking customers to complete a form, it is important to include a clear and well located “exit” button - don’t assume your users know how to click away from the box.

Be clear and direct with your call to action language. Instead of giving your users two options: “Okay” and “Cancel”, take it one step further and explicitly explain what each button means: “Okay, remove this item from my shopping cart” and "Cancel, take me back"

When: Timing of the Overlay
One of the biggest faux pas when it comes to light boxes is interrupting your customer. You don’t want to cut off a user in an integral part of the shopping process - so make sure that your overlays are presented at the right time. Try using them as an introduction to the features on the page or make them user-initiated to share, save, or copy the underlying page, as Zappos and Facebook utilize below:

Facebook and Zappos Lightboxes

Where: Location of the Lightbox

Lightboxes should appear in the eye-line of the user - to avoid inaccessible light boxes on mobile devices and unique display settings, place the lightbox at the top of the page rather than the middle.

Why: Is there a better format out there?
You should always have a good reason to use a lightbox - Think of it as a way to communicate quick, essential information to your customers without disrupting any actions on the underlying page.

In summary, the use of lightboxes on websites can be a great way to attract the attention of your viewers and tell or collect important information. The design options are endless so get creative with it, but remember the 5 W's to make them as effective and efficient as possible!

Read more and see examples from the NNGroup here.