I have a confession.
Please don’t place blame or judge too harshly - and hear me out.
My name is Annie, and I overuse lightboxes.
It’s been a few years since my greatest crime, but I’ve been known to overuse and over-design lightboxes. I may have created a few bad experiences for my developer colleagues who had to implement these lightboxes and a few for the users who had to interact with them. I’ve gotten over my lightbox fixation, and, for the most part, I’ve killed the idea of using them. Well, maybe not entirely.
Here’s my story.
The start of my overuse
A few years back, we were designing a workflow for users – a helpful guide, so to speak. It wasn’t intended to be a separate page you would navigate to. It wasn’t something you were meant to be “stuck in” either. A user could safely open, review, and then close it and continue with their task.
The design of this started as a lightbox. The concept was that having a lightbox allowed a person to trigger the information by explicitly requesting it and focused the task to reviewing the information provided. The little micropage within the application itself could be closed at any time, bringing the user back to where they were. Simple!
In mockups, this made sense (I thought).
Then the real content came; paragraphs of copy, multiple images, videos for each screen. More interaction and steps were added, and with them came breadcrumbs, back and forward links, and confirmation prompts to ensure the user really wanted to leave. Next came an interactive element. In the end, this lightbox became a combination of 8 screens.
EIGHT SEQUENTIAL LIGHTBOX SCREENS!
And I didn’t stop the madness. I didn’t kill the idea. I still thought it made sense.
And so, I let it continue to implementation, where the developers cursed me in standups (ANNIE! THESE LIGHTBOXES!) and convinced me to make a few concessions here and there (though, looking back, I didn’t make many).
By the time the project ended, this “pseudo workflow” worked, but it took hours more to implement than intended. And, unfortunately, it’s still in a lightbox, stuck in its fixed width and height.
I had to vow to my teammates to never use a lightbox again.
You know it’s a bad idea to use a lightbox when...
The lightbox maze I was creating was intense, but it wasn’t supposed to be. It was meant to simplify and be “fun” (but not like clippy “fun”). In hindsight, I shouldn’t have designed it that way. The amount of interactivity and content in the tiny little slot should have been a red flag.
How could I have stopped myself?
You know it’s inadvisable to use a lightbox when you can answer "yes" to any of the following:
- Your lightbox is almost the same size as the browser window.
- Even worse, your lightbox needs its own vertical scrollbar (yah, it’s been done).
- You are not giving room for items to be larger.
- You have more interaction on the page then a few buttons.
- The lightbox needs to opens another lightbox.
- It breaks down as screens get smaller.
So, is there a good time to use use a lightbox?
To answer this, I think it’s wise to review what an actual lightbox is, physically (i.e. what the digital version is named after):
A material lightbox is a flat box with a side of translucent glass or plastic and containing an electric light, so as to provide an evenly lighted flat surface or even illumination, such as in an art or photography studio.
So, a lightbox is a way of “taking a closer look” at something.
For websites, we should treat it (and use it) in a similar way. I mean, there’s a reason it was so named, right? Even though I vowed never to use them, I think there is a time and a place for taking a closer look. It is worth considering lightboxes when:
- You want to be able to see a full size image (if it can’t be large enough in its context).
You want a person to be able to fill out a SIMPLE form or fill in some fields that relate to a specific button pushed on the page. This is content that would otherwise muddle the page or disrupt the flow of what the user is doing/reading.
For example, signing up for a newsletter doesn’t have to take a visitor to a new page, if they are just signing up from a page that has an article they liked. A lightbox let’s them sign up (with a few fields, mind you) and get back to what they were doing.
I’m going to limit it to those two scenarios. Do you have more?
Don’t forget the mobile experience
Keeping in line with where lightboxes are helpful, it’s important to note that on smaller devices, the lightbox is non-existent (it can’t grow any larger like it can on desktop). But that doesn’t mean a designer has to throw it out the window. Here a separate page can do the trick. It moves the user into a specific context that they can engage with and go back to what they are doing. Brad Frost demonstrates this in his post about conditional lightboxes: http://bradfrost.com/blog/post/conditional-lightbox/
So, are lightboxes ok?
If you keep in mind what their purpose is, and not go beyond (because, you can...you REALLY can), lightboxes work GREAT. If your user needs to take a closer look, or dive for a moment into something else (I’m talking a shallow snorkel-like type of dive), then perhaps a lightbox makes sense.
But when you find yourself tacking on a lot of content and interaction that takes your users into another area or through an entirely different workflow, STOP. Stop yourself and ask if the lightbox is the best medium. Ask yourself if the content deserves space. Stop and ask if your users are spending time reviewing a lot of information. If so, does a temporary window make sense?
Looking back, my 8-screen lightbox should have been its own section of pages that had room to grow and expand, that served the purpose of being a helpful guide. Not confined and contained (and probably closed). But, you live and learn. Right?
Has there been a design crime you’ve committed that you want to share? Let’s hear it!