There are days when we don’t want to use our phones to be on Instagram. Some days we need only bite-sized installments of thirsting over Regé-Jean Page. So, while working on that deck on our computers, we take a quick break to feast our eyes on the Shondaland hunk without logging in. 

Quickly, we realize we need another installment. We click on a picture of him, and Instagram reminds us to log in. And how does Instagram do that?

By employing a lightbox popup.

Sorry, this isn’t about Rege-Jean Page. But here’s something you might enjoy hearing. He’s not married. But has a steady girlfriend.

This is about Lightbox popups and why it’s a win for UI.

What is a Lightbox Popup?

Essentially, it’s how websites tell you, “you can’t sit with us.”

A lightbox is a window overlay over a webpage that appears suddenly, almost rudely, blocks the content you’re viewing and disables the rest of the background, making the page inaccessible. This is to ensure that the site visitor can no longer interact or proceed to consume content without affirmative action.

The user can only proceed by acting on the lightbox by clicking a button, login in, filling the popup, or closing it. Although it can appear anywhere on the screen, most websites place it at the center of the page.

So, it can be unpleasant when Instagram’s lightbox blocks Regé-Jean Page’s face. But it’s effective. We will log in as the lightbox asked us. Or, better yet, sign up to be on the platform.

Lightboxes can also be used as advertising to emphasize important messages like deals and promos, and to ensure that a visitor doesn’t leave without viewing a particular video or image.

That’s only one type of lightbox though. That’s only one type of lightbox, though. Several other types serve a specific yet unique purpose. 

What Are The Different Types Of Lightbox Popups?

•   Promotional Lightbox

Have you logged into Levi’s website recently? If you’re visiting for the first time, you’ll notice that a promotional lightbox greets you within seconds. Currently, Levi’s offers a 20% discount and free shipping on your first purchase. It’s not only a promotional lightbox, though. It leverages the lightbox’s real estate to inform the user they can sign up for news about similar offers in the future. 

•   Cookies Lightbox

Perhaps this is the lightbox you come you across several times throughout the day. Cookies track our online activities on the website to document our preferences and interaction history with the website. But only if we allow it to. This is where cookie lightboxes come into play. It prompts the user to either accept or decline cookies or go that extra mile in allowing the user to customize their cookie preference. Most cookie lightboxes are horizontal banners across the screen and placed on the page’s top or bottom.

•   Newsletter Signup Lightbox

We’re sure it’s happened to you at least once – you’re engrossed in a juicy article about the Kardashians, and suddenly, a lightbox pops up to urge you to join the newsletter list. This could go both ways. The user may immensely enjoy your content (so, ensure that it is compelling) and will subscribe to the newsletter or leave the website immediately for disturbing their peace. Be careful.

•   Action Lightboxes

Some lightboxes don’t promote a business – they urge you to join a cause – even if it has nothing to do with the website. Whether that is donating to a charity or signing a petition to save pandas, lightboxes such as these typically drive a conversion.

Why Is A Lightbox Important?

While there are downfalls to lightboxes, UI designers continue using them for several reasons:

• It’s an excellent way to display more information when you already have large content. A good way to use a lightbox in this instance is to include forms and videos in the lightbox without making it seem like you’re bombarding the user with more content.
• Making the user hop onto many pages isn’t the ideal navigational path. Lightboxes can deliver information quickly without disrupting the user’s natural journey on the website while keeping them engaged.
• UI designers can use lightboxes to convey the message when the content is critical and should not be missed. It takes less time, and the visitor can’t miss it because it is a lightbox.

 The average conversion rate for all popups is 3.09%, and the highest-performing popups had a 9.28% conversion rate. So, when crafted well, lightboxes provide significant value to both the user and the website while increasing the conversion rate.

How To Use A Lightbox Correctly?

• Don’t annoy the visitor with a lightbox straightaway. Strike the right balance between too soon and too late. For first-time visitors, it’s even more important. Set the context. Let the user understand what your website or service is all about. Only then show them a lightbox that’s lucrative for them.
• Add an exit button in the lightbox. Most websites use the overlay as an element to drive conversions. Most often, users rarely make an action on the lightbox. They would instead leave the website. This is not good for the site. So, give them the option only to exit the lightbox but continue being on the page. The longer they stay, the more your chances of convincing them.
• Know when to use a lightbox – not all messages need to be a lightbox. While they may grab the user’s attention, it’s also distracting. Error or donate messages can be replaced with easy-to-read buttons.
•  Avoid lightboxes when the user is in the middle of a task – it’s not only annoying, but the user may also quickly lose interest.
• Ensure that the lightbox appears contextually. Set the lightbox on a relevant page. 

The Wrap

Lightboxes can make or break your case, so it’s essential to craft and design it well. Like in all things design, keep it simple. Ensure that the fonts used are readable and the copy is clear, not clever. Use visual hierarchy in the text and pinpoint the central message of the lightbox. Make the CTA button stand out as it’s the most important function of the lightbox. Your lightbox will stand out when you have all these elements in place.

At Pepper Square, we use lightboxes in our blogs that direct users to newsletters about UI/UX design and everything under the sun. We’ve included an exit button too. If you’re struggling to craft a lightbox that will drive conversations, get in touch with us. The talented folks at Pepper Square are happy to help you create one.