Reading Time: 2 minutes

In 2010 modal boxes arrived

Pronounced like yodel, if you are not sure what one is, click on this.

Sorry. Couldn’t resist. They have spread like wildfire. I love them. However, I have noticed some developers adding them to sites with such obsessive enthusiasm they run the risk of future browsers blocking them like their elderly outlawed ancestor, the pop-up.

What exactly is a modal box?

Pioneered by Lightbox a few years earlier, this slick dialogue box allows the user to view an external element, without leaving the page.

Unlike ‘modeless’ boxes such as a toolbar or the header on this site, a modal box requires an action before allowing you to move on. So strictly speaking, you can refer to every fugly pop-up asking ‘Are you sure you want to delete this ?’ as a modal. However, for this article and when developers talk about modals, they are usually referring to the Lightbox style.

So, what’s great about them?

modalModals temporarily halt surfing. Growing scientific evidence suggests internet use is making our brains more susceptible to distraction, so we now all suffer from attention-deficit disorder! Modals help visitors focus on a specific task, with the background tint preventing distraction by other articles, until the ‘x’ is clicked.

Tasks where a visitor responds to a call to action, before resuming with the site, such as clicking on a link to watch a 90 second video or filling out a simple contact form are ideal for this.

Endangering Modals: a warning

In my opinion, where modal boxes are becoming a blight on the cyberscape are:
1. Foot-in-the door Modals
Popping up without request, like a pushy salesperson, these modals can appear just as you land on a page.

This technique may work, but only in the short-term. This 1990’s style brash approach to web design is not something today’s visitors will put up with.

2. Click-aholic modals
Slowing the user down, may ‘make them focus’ on the subject matter, but not when it becomes laborious. A frustratingly awkward interface is likely to reduce engagement.

I’ve seen examples of image galleries, where you do the following:

  1. Click on a thumbnail image to view it in full size.
  2. Click the close box to close it.
  3. Click on the next thumbnail image…

This discourages visitors from viewing more images. A ‘hover gallery’ works better, where the user skims the cursor over the thumbnail and full size images pop up in turn.

So, if you are going to break someone’s journey through your site with a modal box, make sure it’s:

  • their choice
  • because it requires an action

Then, with a little luck, this great new addition to the on-line experience won’t be blocked, as default, from future modern browsers.