Before getting started with lightboxes, though, it's a good idea to know what they are, how they work, and when the best conditions exist for their usage. By understanding the fundamentals, novice designers can avoid major usability headaches that might otherwise send their visitors to competing websites where lightboxes and other advanced design techniques are more intuitively deployed and designed.
What is a Lightbox and How Does it Work, Exactly?
Without a doubt, most people have probably already seen a lightbox in action at one of their frequent visits online. These boxes are used, perhaps almost too ubiquitously, when asking customers or blog readers to give their feedback on a site's content, design, and overall functionality. In other cases, they're used to enlarge a photo on a blog or online store without opening a new page or causing a page refresh. The photo simply loads, at full size, in a pop-up box. Still other websites use lightboxes to enable the addition of products to a shopping cart without going to that product's full website.
The definition of a lightbox, then, is pretty clear. These boxes are designed to eliminate page refreshes by presenting very small bits of information in a window that pops up on top of a website's existing content. To simplify matters, they'll often blur or darken the background so that the emphasis remains solely on the function of this pop-up, modal box.
Designers use a combination of CSS and JavaScript libraries to make this effect a reality. In almost all executions, a lightbox is simply a secondary webpage that, with the right JavaScript code, loads over top of an existing page rather than forcing the customer to navigate to that page separately. For this reason, it's actually quite easy to design the content that will be displayed as part of a lightbox. Simple XHTML or HTML5 code, blended with CSS styling, will create an intuitive user experience with the click of any targeted link on the website.
Because JavaScript is used to produce this effect, primarily through the use of jQuery, lightbox setups require an appropriate script or plugin in order for their features and designs to be fully realized. Developers have no shortage of scripts to choose from, each with their own designs, features, and benefits.
When to Use a Lightbox: A Review of Best Practices in Modern Design
The ability to essentially add two pages' worth of content to a single webpage via the use of a lightbox can be pretty tempting, but developers should use moderation when employing this technique in their designs. While a pop-up modal box can be really great for user sign-ins, enlarged photos, or express checkouts, they also present a number of usability headaches for more involved implementations that can make them simply impractical. When deciding whether or not to implement this excellent jQuery technique into a design, be sure it falls into one of a few broad categories.
1. Registration and Sign-In
Users shouldn't have to be taken away from their content when they need to sign in or register for a new account. Taking the user away from this content makes them less likely to eventually return, and it could cause the website's bounce rate to increase quite a bit. For this reason, a lightbox registration form or login area makes a great deal of sense. Best of all, the lightbox will return the user to their content signed in and ready to engage. That's the goal of most websites with open registration in the first place.
2. Photography or Video Uses
The nature of today's websites means that photos and videos are usually constrained by the column width where they're presented. For landscape photographs or videos, this is particularly frustrating. The use of a lightbox, though, allows the full-size image or video to be displayed on top of existing content, freeing it from column width constraints and other design concerns. Furthermore, such lightboxes can be set to scale dynamically based on the size of the viewport, enlarging the photo or video to the best size for any desktop or mobile display.
3. Making Simple Tasks Quicker
If a customer wants to enlarge a product image and add it to his or her shopping cart, a lightbox implementation gives them a way to do that without leaving the product listing or putting other additions on hold. If they want to post a quick comment to a blog entry, a "quick comment" pop-up form would be the best way to promote engagement without sending them away from the content while on the homepage. Simple uses like this make the website feel more like an app, but they don't make the site feel overly clunky. Turning already simple tasks into a lightbox can actual aid usability, rather than harm it, and it can encourage healthy engagement and better SEO over the long term.
How to Implement Lightboxes: Choose the Best Script for Each Need
With a firm understanding of what these boxes do and when they're most appropriate, developers likely only need to decide which script best works for their needs so that they can make implementation a reality. There are quite a few intuitive lightbox setups that actually work for a broad array of uses, from the display of web forms to full-sized display of images and videos. Before proceeding, consider a few of the top lightbox scripts and libraries currently on the market for blogs, online stores, and beyond.
The Floatbox script might just be the single most versatile option on the market, with broad support for images, video, forms, and outside XHTML content. The script comes with a wide array of jQuery effects and transitions, as well, making it appear more Flash-like upon display. The lightbox can even work with outside content from sites like YouTube and Vimeo, as well as embedded PDFs and more. For a single lightbox solution that can be used site-wide for every implementation, developers should seriously consider this as their first option.
For every script like Floatbox, there is a competitor like SlimBox 2 that aims to strip away features and cater to the most basic needs of the technology. Instead of focusing on displaying a wide array of HTML pages, videos, images, and documents, the SlimBox 2 script works images exclusively. The result is a jQuery script that comes in at just 4KB in size, making it among the smallest such lightbox options currently on the market. This means that full-sized photos load more quickly, much smoother, and with all of the jQuery effects and transitions that have made the technology such a draw for the past several years.
Those users of the Mac OS X or iOS operating systems will easily recognize the interface promoted by Fancy Box. With a small, round "X" to close the box, and a slim white border around photographic or other content, it feels right at home in Safari. Beyond that, though, Fancy Box is actually quite versatile. It supports both images and video, and the script can easily display HTML content and form elements for in-site registration and login forms. Every aspect of Fancy Box can be controlled via CSS, of course, allowing it to fully blend in with any website as well as with Apple interface designs that have gone mainstream since the launch of the iPhone.
The Key to Effective Lightbox Usage is Smart and Minimal Deployments
While the lightbox is an exciting new technology that makes websites far more app-like, it still represents quite a few potential pitfalls for website developers. Indeed, overuse of the technology can make websites feel exceedingly clunky. Sometimes, lightboxes can actually make it impossible to navigate a website or use the browser's back button. Yet, for all of their usability concerns, these pop-up dialogs and full-size images still represent a vastly superior way to design.
The key to finding success with lightbox deployments is to focus on minimal deployment. Make simple tasks even simpler by reducing page refreshes or redirections, and make visual content more intuitive by promoting larger images, high-quality videos, and a single click to view the finer details of a website's illustrations.
By: David Walsh
