Over a million developers have joined DZone.

Issues with modal overlays on the web

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Seems as if modal overlays are quite popular on the Web lately. A large number of easy to use plugins such as Lightbox, contributed to the expansion of overlays on the Web. Two years ago lightbox was named a dialog design technique of the year. Since then, overlays became a common way to show forms, feedback and other content.

But despite the fact that overlays are popular and easy to implement they should be used carefully. It is not necessarily true that modal windows improve user experience.


While modal overlay is visible, the page behind it (parent) is disabled and dimmed. This prevents users to interact with the parent and to refer to any information except that shown in overlay. If users need information in the background, this becomes a problem. Even worse, most overlays are not movable and cover the central part of the viewport. In such situations users are forced to switch back and forth between parent and overlay.

The least you can do in such cases is to make sure that information in the background is readable and the overlay is movable. The latter means that you should take affordance into consideration. Many lightbox plugins don't have a titlebar - an area that suggests that element is moveable. It should also contain a close button, positioned consistently across the site or application, preferably in the top right corner.

The other thing I noticed during usability testing sessions confirms what was said many times before - it might break back button functionality. Some users, mostly the ones that are not tech-savvy, just don't understand that they are on the same page. This is typically the case when overlay covers a large portion of the viewport.

So, if you want to use an overlay, what should you be paying attention to? Besides issues I mentioned in previous paragraphs, I'd include some of the recommendations stated in (a bit older) article A Farewell to Pop-Ups:

  • The user expects new content, and expects that content to be a diversion from the current task rather than intrinsic to it.
  • There is some advantage to the user in seeing the new content on screen at the same time as the existing content.
  • The pop up size is between one quarter and one third of existing window size. (If the size is less than one quarter, then the content should be moved onto the main page. If the size is more than one third, then you break the rule of context).

I would add that modal overlays shouldn't be used to show feedback messages in any case - there are some misconceptions that overlays are actually an ideal tool for this. Among some other mistakes, this is a common mistake in web form design. As addition to this, you should avoid using overlays to simulate confirmation dialog boxes.

Are there any alternatives?

Aza Raskin suggests two alternative solutions: a tray and a slide (sidebar or sliding bar). Both solutions are quite good alternatives for overlays. One of my favorite variations of a sidebar - docking sidebar is very efficient because it allows immediate interaction without breaking the flow or covering the area users are working with. Developers and designers should be familiar with such sidebars, as they are heavily used in development environments.

But, does all of this mean that you shouldn't use overlays at all? Well, least you can do is use them sparingly. What do you think?

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of Janko Jovanovic. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}