Pugetworks
Seattle Software Developers

blog-archive

Pugetworks Blog Archive!

Are lightboxes good web design?

Lightboxes have been in common use on the Web since the middle of the last decade, and in that time they've fallen in and out of favor with usability and web design experts. Some say they're categorically bad, that they focus from content and confuse users with new UI elements that seem to come out of nowhere. In practice, lightboxes are definitely overused, but they also happen to be the best solution to a few common design problems. In this article, I'll outline some scenarios when lightboxes are and are not appropriate.

A lightbox is a kind of modal window: one that demands the user's input before normal browsing can be resumed. A popup that asks "Are you sure you want to delete that file?" is an example of a modal. What makes lightboxes distinct is that they 'black out' the rest of the screen in order to call attention to the modal itself. This makes it easier for the user to focus on the most important task at hand, but it's also jarring and potentially more of an interruption to his workflow.

Lightbox example (photo by Premshree Pillai)

When not to use a lightbox

These ought to be warning signs that maybe a different tool is right for the job. In these situations, consider a normal non-modal popup, an in-page solution, or even sending the user to a new page altogether.

  • When a user is already doing something else.

    Few things are more frustrating than when you're typing into a textarea or scrolling through a page, and all of a sudden a new window pops up and steals focus. If you had been typing somethng, it is lost to the ether, or worse yet, interpreted as a different command. As a rule, lightboxes should only appear as a direct result of a user clicking a button or a link.

  • When low screen resolutions are common in your user base

    Normally, the height of a web page isn't all that important, because everybody knows how to use a scroll bar. But low-resolution devices like netbooks and smartphones may only present a few hundred pixels of vertical space within the viewable area of their browsers, and if your lightbox is taller than the browser, it's broken.

  • When a large amount of content is being presented

    The beauty of a lightbox is that it allows users to focus on a limited task. If you find yourself cramming more than a few paragraphs of text or a few form fields, consider whether sending the user to a new page would be less disruptive.

  • When the same result could be accomplished some other way

    Could your error message be displayed in a notification area at the top of the page? Could this login modal be in a slideout instead? Ask yourself whether it would be more helpful to add new elements to the page in a more subtle way before pulling out the big guns.

  • When page state matters

    If you create a lightbox modal and the user leaves the page, they won't be able to come back to the modal using the 'back' button. Sure, it's possible to save the page state and then recreate it later, but wouldn't it be easier to just keep everything on one page?

  • When seeing the background is important

    Remember that the most important thing about a lightbox is it obscures everything but the modal window itself. This is handy for focusing attention, but bad for reading whatever is now hidden by the window or the semi-opaque scrim behind it. If the parent page needs to be cross-referenced, consider a floating, draggable modal without a scrim.

When to use a lightbox

In defense of lightboxes, here are a few situations when you should consider using one for your project. It goes without saying that there may be others.

  • When the content presented is larger than the available area

    Areas that display content on a web page are separated into fixed, fluid or elastic units. But the size of images (as well as some tables, forms and videos) are not. If you need to show some piece of fixed-width content that is larger than the area alotted by your layout, you may wish to break out of those by popping up a lightbox.

  • When loading an additional page doesn't make sense

    Sending the user to a new page may add unnecessary overhead, and in some situations loading and rendering a lightbox may be both faster and less intensive. Even when that's not the case, it may be awkward and ugly to redirect a user to an entire page that contains only a few sentences or a couple of form fields. Lightboxes, being smaller than an entire page, encompass small amounts of data in a more pleasing manner.

  • When the content is all that matters

    A lightbox forces the user to focus on one thing and one thing only. If you're giving prominence to a picture, you want the user's entire attention on that image, to the exclusion of everything else on the page. If you have a form (such as a login form or a license agreement) that is critical to the workflow and also self-contained (meaning you don't need to see anything else on the page to complete the form) then a lightbox may be exactly what you're looking for.

  • When reducing the mental burden of additional content improves usability

    In the same way that you can simplify an interface by hiding some controls, you can reduce the clutter and cognitive load associated with completing a task by keeping some content in a lightbox, compared to shifting it into another page. Imagine being asked to fill in the standard user registration fields — name, address, contact information — wouldn't you be more likely to complete the registration if you could do it on the page you're currently viewing?  This is trick is dangerous and easy to misuse (see the previous section on when not to use lightboxes), but it can be very helpful in encouraging users to complete some processes they might otherwise click away from.

Conclusion: it depends

As with any other tool, there are times when lightboxes are not the best solution to the problem at hand, and times when they are. The key skill of a designer is identifying how the elements available can be used to achieve a desired result. By now, the benefits and drawbacks of lightboxes are well known and there are plenty of stable and robust implementations available [1,2,3]. Don't be afraid to use this solution when it is called for in your designs.

DesignAdam