Pop ups overlays, modal boxes and user experience

What’s with all the pop ups and overlays!?

There is something real prevalent across the web these days. It is something irritating and in your face, but somehow still gets its light of day. You could almost smell it around the corner before it shows its face. This “thing” is called… lo and behold the pop up modals.

When used poorly, they give rise to several issues. So before you implement your next, please consider the following:

Consider the experience – the one of your user of course! Think about how the user needs to interact with your site, what happens when the modal box appears, and how it affects his attention.


Why do you want to do this? The very first question you may want to ask. Is this for some vanity metric, or to satisfy a valid user need? Does it really provide value, or is it just a cheap trick you are trying to pull on your users? This will actually help to educate many of the considerations that follow below.


Does it need to appear at this time? Various studies attempt to show a magic number and pin it down to this number that gathers the most responses. But I have not seen a study with statistical significance that proves this across various websites except on their own sites.

So is using a magic number exactly best? The problem is that they conducted the study on their own website, which is definitely different from yours. What works for them may not work best for you. And it may actually undermine the user who is trying to get rid of the distraction/irritation just to continue reading your content. This is akin to compromising user experience for a forced user response to your pop up.

(Where)pop up corner

Does it need to distract him from the main content right here? Is it the right context? Consider if it may be better to show it at the bottom of the page, or display it in an alternative manner where it does not black out the whole page, but only appears at a side or corner of the page. In the image, look at how the pop up struggles for your attention against the other call to action buttons on the page. Other than the pop up, the page also has “subscribe” and “advertise” buttons fighting for attention.


Does it provide him the best value when presented in such a manner? Maybe a footer or header banner bar would be more appropriate? Maybe display it at one corner like the ClickZ pop up above.


Which way would be best to use the pop up modal display? There are various ways this can be achieved, depending on intelligence of the code. Currently, there are pop up plugins that trace a users’ mouse cursor, and only appear when it detects that the user may be trying to leave the page. The behavior of your users can be varied, depending on their intentions and motivations. Therefore this can be tricky to achieve. Short of tracking the eyes of the user, we may never know if the user is really trying to leave.

Another thing that could be improved is trying to lower the irritation faced by the user. You could stop displaying the pop ups when the user has already closed it before. No point showing it again and again on every page load. It only makes your site look dumb.

But trying to display what is relevant based on user context and intention seems to be a good direction to head for, as long as we keep trying to improve ways to get there.


Does it help those with accessibility issues? Think for those who read via text readers and pop ups when not properly done, sure that make things difficult and confusing to navigate, understand, and consume your content.

SmashingMagazine has a good article on this.


Also remember mobile devices. Things get tight on the mobile screen, and you want to make sure that your site remains usable when the pop up appears. Some pop ups on smartphones are actually very hard to close, either because the close button is misplaced, or they just don’t display correctly at all on mobile.


cluttered screen with pop ups

What do you really want the user to know? Don’t clutter your screen! Especially when you cram the user with more than 1 pop up, things start to feel overwhelming and kind of pushy. Therefore, don’t flood your users, if there are several things, at least show them one at a time.

With these considerations on hand, we will hopefully at least start to live with pop ups that are more acceptable at the least, and of value to your users at best, instead of being distracting or annoying as they sometimes can really be.


If you have any great annoyance to rant about, or great practices to tip us on, do share!

Simplify and gear up your business today.

Contact me to find out more.

You must be logged in to post a comment.