Issues with modal overlays on the web

June 17, 2010

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 an Interaction 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.

Issues

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:

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?

I discuss these topics on twitter too. In case you feel nostalgic, my RSS feed is still working.

25 Comments

  • Ricardo Verhaeg (June 17, 2010)

    Great article… but people tend to use new stuff rigth away. With flash was the same and with HTML5 again. Everything that is new and cool is used a lot and commonly in a "wrong" way.
    Only after experience and articles like this developers will begin to understand the use and consequences of what they are doing.
    We developers and designers need to learn how to think as a visitor while we do our work (I say this because I still need to do it =P)
    Anyway great article and point of view. And I think there are other possibilities to use modals and overlay and alternatives to it instead of pop-ups.
    Good work Janko ;)

  • Guy Harwood (June 17, 2010)

    use sparingly.

    i prefer to use the jqueryUI dialog, which is non blocking and draggable with a title bar, rather than the lightbox and its various alternatives.

  • Adeel Ejaz (June 17, 2010)

    I believe modal overlays do come with its own pros and cons. I do use it quite often in my designs (mostly in Control Panel sort of designs) but I always make sure there is a way out of it. Usually a cross in the top corner of the box or a close button. Great article nevertheless!

  • Sebastian (June 17, 2010)

    I think sometimes such modals are necessary. Especially if a user action ist required. For the rest I’m with you.

  • Fawad Hassan (June 17, 2010)

    I like the alternatives article you gave in the end. Kool!

  • mohamadreza (June 17, 2010)

    Great points you have mentioned.
    persoanly I am with modal overlays when I want to use them for showing images with their captions after clicling on thumbnails using jQuery.

  • Adam (June 18, 2010)

    Personally, I think that both you and Aza Raskin somehow forget to mention overlays’ pros & situations, in which overlays are good – just mention their cons.

    I like them for galleries in sites – because it was one of their first purpose. Also, I think they’re really handy, when you need to show some information within visible context – then, instead of another page, you show lightbox – and you see where you’ve come from (in somewhat dimmed background) and also, you see information catching your atention.

    So instead just mentioning to use them carefully and few really bad ideas (feedback messages? really?), you could (should/would/it would be nice :) show also proper usage for lightbox variations. Or just mention them.

    On other note, there is "webiste" on your contact form instead of website :)

  • Janko (June 18, 2010)

    That is true, I wrote only about issues. Since people really use overlays heavily, even for feedback messages, I think this was needed.

    But one good use might be for galleries, I agree. And thanks for pointing to the error, will fix that!

  • Janko (June 18, 2010)

    jQueryUI is modaless which has its own pros and cons.

  • Jordan Walker (June 21, 2010)

    I think modal windows have there place on websites, but as you mentioned there are other alternatives that may work better.

  • Flinn Megal (June 21, 2010)

    so true n unfortunate as well,i have been in this situation n it really annoys at times ,n thnx for pointing out some real alternative methods.

  • Jacob Lowe (June 23, 2010)

    Another top notch artical. Thanks

    I think that modules can ehance user experiance if done right. The only thing that I use modules for is to display picture using the lightbox Plugin for jquery. It more of web application then an element on the layout. I have also used sidebar slideouts and they seemto be pretty limited to purely text information rather then rich content. Thanks again for the tips

  • Parag (June 23, 2010)

    Your primary complain seems to be that Overlays becomes primary focus and background content is "disabled" . This is exactly what we want in some scenarios. So Overlays make great use there. For eg, we provide Manage functionality when admin is logged into our CMS. When he clicks Manage, we show them management options for the page and we use overlay there because we want them to focus on that particular task.

    Sidebars are a good alternative if you just want them to pick from few options. If for eg, you need to take inputs, Sidebar is not usable.

  • Janko (June 23, 2010)

    Exactly. Overlays should be used only if you want to focus user on a particular task – disabling her to do anything else until she finish that task.

    What I wanted to point out is that overlays are misused and even when you think you might use them, you should consider other options as well.

  • Ionut Popa (June 23, 2010)

    You have to decide upon using or not using modal overlays depending on the situation; like you mentioned if the interaction requiers user to read data from the page this is not a great pattern to use.
    You have to base your decision on context and experience.

  • Renato (June 23, 2010)

    How did you designed the wireframe images? You draw it?
    Nice article, congrats!

  • custom booklet printing (July 1, 2010)

    I think there is a positive and negative impact on using modal overlays. If the user as you said don’t know much about the internet or not a tech savvy there will be an irritating reaction on their part. Because the user will definitely don’t know what’s going on and the person may leave the site right away. On the other hand it will save the time of the user if he wants that thing they are offering on that pop up.

  • Shane (July 2, 2010)

    Great post, good to see your thought. I personally like modal overlays, mainly because i think they seem impressive to viewers and can often help sell a design.

    Thanks.

  • Rob’s Web Design Blog (July 3, 2010)

    With regards to saying:

    "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."

    I personally think this is a good thing. It forces users to enter specific info and kind of guides them to where you want them to go. The second point you make about information is partocularly relevant as the popup should definately contain all the info the user needs. If it doesn’t, then that’s down to bad design in my opinion :)

    Overlays always add that extra interactive element. For example in a CMS that I have written there is a nice popup model that a user would use to upload a file. Using AJAX the full url to uploaded file is shown in modal box – very simpe to do, but clients are always wowed by these small interactive bits to webpages.

    Thumbs up for modals from me :)

  • Jeff (July 3, 2010)

    Be careful not to go into overlay overload. It’s a cool little technique, but overuse can be detrimental.

  • jason – affilorama (July 5, 2010)

    only important on money-magnet pages wherein details or feedbacks from visitors are really needed. though I mostly see sites that enable overlays to every page on their site, which sometimes are irritating, particularly to those that can’t be closed or the "close this box" button is not easy to find or no "esc" key option.

  • JGarrido (July 8, 2010)

    Actually you can use them either way, and are quite configurable.

  • Robert Pendleton (July 27, 2010)

    To me, modal overlays pop up on the screen just as bills mail to my mailbox–Annoying. When modal overlays merge with ads, it will have a catastrophic effect. Personally I may close the browser tab irritatedly.
    I suppose the modal overlays can be applied in Tips, Cautions and Special Conditions contents, which may be crucial to the further process. Or, the side bar may be preferred.
    An elaborate post! THX

  • Russell Bishop (August 27, 2010)

    I like that you’ve thrown in some guidelines here; that’s what the average web developer needs to be following. These plugins that pop up all over the place (excuse the pun) for modal overlays allow for alot of possibilities, so we need to advise where necessary.

    I feel like the best solution doesn’t take over the website you’re using, but sits on top of it. A modal with the same background as the content you’re looking at (example: white) with a dark shadow about it should suffice. Users should then understand that they’re on the same page, and the modal is less obtrusive. Simply position it next to the content it relates to.

  • Kristian (October 31, 2010)

    Interessting point of view. During reading I ask myself if I ever run into such situation… the need of information in the background… And after thinking a while… I can say no. But I saw a lot of moveable overlays wich doesn’t fade the background darker… so I was more distracted from the background during concentrating on the overlay form / content.

    The only thing I don’t really like are "Full Page" overlays, used as photo galleries, whith no exit button and the very far away next/prev buttons… take a look with a 24" screen and click through the images ^^ … Examples can be inspect here:

    http://tympanus.net/Tutorials/FullPageImageGallery/
    http://tympanus.net/Tutorials/PolaroidPhotobarGallery/

    BTW: Very very nice warpspeedcontentsite! Greetings from Germany