Jack-in-the-box: Using Image lightboxes to economize attention and drive engagement in your site

Making images smaller and giving them lightbox effects will help visitors linger on your site and it'll also move info up on the page, where people have greater attention.

Intro

The internet is full of memes and videos showing kids spooked by jack-in-the-box toys.

What these fail to represent, though, are the hours and hours those same kids spend reloading and replaying the toys after they overcome their initial surprise and distrust. It turns out that we're all really fascinated by things popping out at us, as long as we're expecting it.

Lightboxes are the web equivalent of jack-in-the-box toys. As long as you use them well, they can drive interaction and engagement in your site. If misused, though, or implemented poorly, they can be a significant turn off, or even introduce accessibility noncompliance issues.

Text Considerations

We all know that images are essential to the web. Gone are the days of webpages that are just walls of text (and thank goodness!). Images make the content engaging and digestible. They draw you in, and also give your mind a break from the difficult language processing required by text.

An image is indeed worth a thousand words. But an image can also easily fill the equivalent space of a thousand words, or at least a couple hundred.

The words are what you use on your website to announce your definite purpose. Without the pictures, people may not stay on your site long enough to buy, for example, but without your words, they may not even know that the point of your site is for them to buy.

The benefits of images (their almost instantaneous connection for people), and their detriments (displacing significant amounts of text that could be used to more clearly guide visitors in their journey through your site) need to be balanced. All of this needs to also take into account the fact that visitors' attention lags in direct proportion to the distance they've scrolled down the page.

Dangers of Scrolling

The Norman Nielsen Group (NN Group), usability experts, found that people aren't averse to scrolling, as was once believed. The standard thought used to be that everything of value needed to be "above the fold", or in other words, in the first screen-view of the page, because people won't scroll down to see the rest.

NN Group smashed this idea with the results of their study, finding that people do generally scroll all the way to the bottom of long pages. The time they spend in the top two screens' worth of the page, however, is dramatically more than in the rest of it, to the tune of 74% of time spent there vs 26% spent in the rest, even if there are three or four more screenfuls below. It seems we tend to spend about three quarters of our time in the top two screenfuls, and split the rest of our time amongst the others.

Because of this tendency for visitors to spend less time viewing content the further down they scroll, it is a good idea to economize space higher up on your page. In Slippy Sliders I hypothesized that carousel sliders have become popular with website owners in part to account for this user behavior. Owners want to cram as much content up top as possible.

Despite this inclination, I hope that in that post I effectively dispelled the myth that sliders are a good idea for any use-case. My firm opinion is they should never be used for anything, except maybe hiding content that you really don't want anyone to see.

One way to economize space that I brought up in that post, but didn't dwell on, was to use a lightbox effect on image galleries, and even on individual images or sections. A lightbox effect is when by clicking on the thumbnail of an image, you expand it to fill the screen in a same-browser popup.

Yes, this is the same effect that's used by those annoying newsletter-signup popups that trigger automatically on some people's sites, but those aren't what I'm talking about.

I'm talking about visitor-initiated lightboxes that disable the screen beneath them only at the visitor's request, giving them a better view of what, to save space, can now be a fairly small image. Thus instead of taking the space of a couple hundred words, maybe as a lightbox thumbnail, it only takes the space of a couple dozen, allowing you to gracefully fit more information on the first two screens, and really everywhere on your page.

Increase interaction

In addition to economy, making your images into user-initiated lightboxes can potentially increase your visitors' involvement in your site. Interactive websites, according to Forbes, "are typically more engaging, which can lead to more conversions."

Just like some kids will entertain themselves for hours popping the jack-in-the-box open again and again, some visitors will expand each of your lightboxes simply because they can.

Giving your visitors the option to do something to your images, even if it's just clicking to expand them, increases the interactivity of your site. It might be even better if you make it easy for them to download that image or share it on social media. All of these things add engagement to your site in a meaningful way.

Before you go crazy adding a hundred postage-stamp-sized image thumbnail lightbox triggers to your pages, let's discuss really quickly the optimal use of images. The Norman Nielsen Group again comes to the rescue with some great recommendations about what kind of images are worth including. They say that decorative images are ignored while content images are scrutinized.

I believe the data they present: visitors spend more time looking at contentful images than decorative ones. I somewhat disagree with NN Group's conclusion that because of this fact, decorative images should be avoided. People may not spend as much time looking at decorative as contentful images, or even as the text content of the site, but studies have shown that images can be processed in as little as 13 milliseconds, so even if the eye being tracked by the NN Group doesn't pause on an image, that doesn't mean the brain behind the eye isn't processing it and making snap judgments.

I think it's likely that even the images that seem purely decorative contribute significantly to the general feel and emotional draw of the site. Besides, as I said earlier, I think the small cognitive rest an image offers visitors is also valuable. Still, the advice to fill your site with more contentful images than decorative ones is sound. You should add as many images of your actual staff, and actual products being used, and so forth, as possible.

My further advice for images is that you should be certain to make them accessible. The way to do this, as I explored in Seeing is Believing Part 3, is to include alt text. This alternative text will make it so all your visitors can have an equivalent experience with your site, even if they can't see your images.

You can technically omit the alt text on purely decorative images (though they should still have an empty alt attribute, or in other words, alt=""). It's my opinion, though, that there shouldn't be very many of those. If decorative images contribute to the feel or vibe of your site, I think you should write some alt text for those that can pass on the same vibe to blind visitors.

One of the NN Group's recommendations that I wholeheartedly agree with is that when a visitor requests a larger version of an image (like by activating a lightbox trigger), it should be given to them much bigger. Twenty or thirty-percent larger won't cut it, it should be two or three times larger, or more. This is easy to achieve with a lightbox image as I've recommended, and you can check out some simple and effective code to make it possible in the appendix to this post.

Lightboxes: what not to do

Before giving you my recommendation for how to add lightbox images to your site, let me first caution you about what you shouldn't do. Don't go out to the WordPress plugin directory or the Shopify app store and just install the lightbox gallery plugin that looks coolest to you.

Unfortunately, most of these cool lightbox plugins and apps will introduce pretty significant accessibility issues to your site, and thus should be avoided, or at least remediated so their accessibility problems don't become your accessibility problems. You've done a great job following all the advice in our Accessibility series and don't want to blow it over some slick-looking-but-problematic plugin.

Lightbox accessibility

I went through a lot of the plugins out there, and found that most of them had some or all of these pretty significant accessibility issues:

1. They may not activate with keyboard, or return to the original thumbnail on escape or close. This interactive behavior should be the bare minimum, and work for all users. If there are interactive elements on the page, all users need to be able to activate them.

   Let's consider this from the perspective of someone who doesn't have enough fine-motor control to use a mouse, so they move around the website by tabbing with their keyboard, and activate interactive elements by using the Enter key. If they see there's a lightbox image, but can't activate it, that would be very frustrating, and even discriminatory. This could also be the case if it's someone with poor vision who mostly uses a screen reader to get around the internet.

   

   Man with thick glasses and headphones expressing frustration at his laptop.

   Photo by Gustavo Fring on Pexels

2. On activation, the lightboxes may not capture focus. This is a problem for keyboard users where they could still tab around the various elements underneath the lightbox if their focus doesn't go to the interactive elements in the lightbox itself.

   Furthermore, if on closing the lightbox the focus doesn't return to the trigger, in this case the thumbnail image, this is very frustrating. If, for example, every time users close the lightboxes with the close button or by hitting Escape, their focus returns to the top of the page, you can imagine the aggravation of having to tab all the way back through the page and the gallery. Unfortunately, that's exactly how I saw many of the lightbox plugins function.

3. There may be no point for screen reader users to activate them at all. If the lightbox images have any alt text, it's probably the same as on the thumbnail. This means that even assuming screen reader users can trigger the lightbox, there'd really be no point for them to do so because they'd just get the same information as they would on the thumbnail image. I suspect screen reader users expect this, so my guess is that they largely ignore image lightboxes, though I haven't found any research to confirm my suspicion.

4. They may be resource-heavy, and so take a long time to load. This isn't an accessibility concern, really, but should still be a business concern for every website. Many lightbox galleries make use of a lot of heavy code to enable their functionality, even if they have web-optimized image files, which they probably often don't.

Since I wasn't able to find any Wordpress plugins or sample code that overcame these four problems, I devised some code myself that you're free to use as you will. My code doesn't have as many neat features as some plugins or apps, but it has the advantage of being based on native html dialog elements, which have basic lightbox functionality built right into them.

I feel like if there's a native element that does what we're looking for, we should use it. That keeps the web as semantic as possible, which has all sorts of benefits. You'll find the code to my native dialog-based lightbox gallery in the appendix to this post, right after a demonstration of its implementation.

Conclusion

You should definitely include images in your site to give your visitors a break from your text, and to establish the feel of your site that you're looking for. At the same time, you should be aware that pushing your text down past a screen or two will result in less visitor attention the farther down it goes. Mitigate this problem by shrinking your images in size and giving them a visitor-initiated lightbox effect. Doing this will increase visitor interaction with your site and help you better accomplish your purposes.