Issues with modal overlays on the web
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:
- 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?
* * *
Remember RSS? You can subscribe to my blog here.
25 Comments
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 ;)
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.
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!
I think sometimes such modals are necessary. Especially if a user action ist required. For the rest I’m with you.
I like the alternatives article you gave in the end. Kool!
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.
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 :)
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!
jQueryUI is modaless which has its own pros and cons.
I think modal windows have there place on websites, but as you mentioned there are other alternatives that may work better.
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.
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
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.
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.
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.
How did you designed the wireframe images? You draw it?
Nice article, congrats!
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.
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.
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 :)
Be careful not to go into overlay overload. It’s a cool little technique, but overuse can be detrimental.
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.
Actually you can use them either way, and are quite configurable.
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
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.
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