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

Lightbox's intent is to highlight a certain element (like image, graph, etc). I personally dislike HTML pages popping up in the browser, but some users may like it.

Personally, I would use it for images only.

Answer 2

I think that first of all you have to decide whether you want a modal-dialog for all these forms.

In general, web users do not expect modal forms to login, create a new account, or file an inquiry. You might discover that users feel claustrophobic when the background fades away and are forced to focus on just the registration form.

Modal-dialogs are often criticized because they block all the other workflow until the window is closed or filled-in. This may also lead to confusion about the other web controls being non-responsive.

Nevertheless, I am not voting totally against this, because I can see it working for some particular web interfaces. But I would proceed with due caution, especially if the amount of user participation is vital for this web site.

Answer 3

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.

Answer 4

I think lightboxes are useful wherever a modal dialog pattern would be appropriate in the UI.

For example, showing a login lightbox with an AJAX action to allow a user to login is much less intrusive than redirecting them to an entirely new page then redirecting them back to where they were, so I think it's appropriate there, provided that logging in is optional to begin with. If you force users to login before they can use the site however, then this pattern is not useful.

However, using a lightbox to display thank you messages is intrusive - so I wouldn't do it there. Having a clearly marked status indicator or message within the page layout is better, as it can be related more clearly to the main UI and doesn't annoy the user.

I generally use lightboxes to provide out-of-page functionality where the required UI would not fit well into the main page - for example, on a page where multiple documents need to be uploaded, I would provide an upload button next to each document item, which when clicked would display a lightbox that collects the details of the document (type, file, date, etc) then posts the file to the server using AJAX.

This keeps the main page streamlined, the dialog can be defined once and reused multiple times, and it's quite simple to use, I think, as it essentially behaves like a desktop application.

Answer 5

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.