When to use a lightbox effect?

Question

We've all seen the popular lightbox effects on the web (e.g. JQuery Lightbox and Shadowbox). Yesterday I got into a discussion with a client who is completely enamored with lightboxes and wants to use them every time a form is submitted including:

• Login forms - click the login button and the lightbox appears with the user name and password fields
• Customer Inquiry forms - Lightbox appears with a "thank you" after form submission
• Registration forms - Lightbox appears with a "thank you" after form submission

I want to know when people think lightboxes should and should not be used and why.

Answer 1

How about never using a lightbox? Does never work for you? Lightboxes are typically so awkward and alien that opening one of them is almost universally worse than simply linking to a new page like normal. For usability, they’re so inferior to a new browser window or dialog box that they’re not even worth considering:

• Immoveable and modal. As an alternative to dialog boxes, lightboxes fail for being immovable and modal. The lightboxes I’ve seen can’t be moved, so the user can’t see all that’s behind it to help interaction with what inside it. Even if it were movable, you wouldn’t be able to move it outside the window frame so it is always occluding something. Dialog boxes don’t have this limitation. Since lightboxes must be modal, the user can’t interact with the parent page even if the lightbox could be moved. Dialog boxes may be modeless when that’s called for.

• Added Mental Workload. Lightboxes force the user to learn and remember yet another way of navigating. It’s bad enough that there are three inconsistent ways of dismissing some content in order to return to previous content. The user may need to use the Back button, or close the current window, or close the current tab. Now we add closing the lightbox, with it’s own idiosyncratic controls. We don’t need this complexity.

• Destructive Back Button Operation. If you leave the Back button enabled, users may click it intending to back out of the lightbox to return to the underlying page (or to move back a page within the lightbox such as when viewing a slide show). But instead, clicking Back moves the underlying page back, forcing the user to go forward and re-set everything up including opening the lightbox. If you leave the Back button disabled, users may take it to mean the lightbox content is opened in a new tab or window, so they click the window/tab Close button to go back, blowing away the underlying page, its history, and maybe the entire browser session.

• Distraction. Just to make sure the underlyingpage is unreadable, lightboxes typically give them a muted appearance, reducing the visual contrast of the text. The intent, I suppose, is to suggest the page is disabled so users won’t try to click on it, but we’ve a better way to “disable” a page: go to another page. What you get instead with lightboxes is a border of distracting text and images decorating the content you actually want your users to pay attention to. So using lightboxes means losing the advantage of a new window in allowing users to see and access content on both pages; it also means losing the advantage of going to a new page to ensure the user will only focus on the new content.

Lightboxes represent re-inventing the dialog box with no advantage and many disadvantages. If you need a dialog box, use a dialog box. Lightboxes don’t look like popup windows, so this used to be a way to keep users from dismissing them for advertisements, but now advertisers are using lightbox-like elements, so that advantage is fading if not already loss. I see no reason to use a lightbox.

Answer 2

Acceptable uses, IMHO:

1. single-step forms (or the first step of a multi-step form)
2. detailed information (enlarged graphic or in-depth description of something)
3. confirmation or other feedback messages

Ideally, for each, you'd gracefully degrade to a full-fledged separate URL/HTML resource. This provides bookmarkability (assuming your lightbox doesn't do history management) as well as search engine crawlability.

If you do choose to use them, it's vital that they be used consistently. Since they are essentially a new UI pattern, users expect to (subconsciously) be able to understand how you apply the pattern. This enhances their trust in the site and ability to predict the site's behavior.