How to use Modal Pop-ups wisely

17 January 2017

Author :

Modal windows are the web interface elements that require the most reasonable usage among other elements. More and more Pop-ups are used to avoid “uncomfortable” interactions that could occur in web design. Purly considered Pop-up Ads can turn users away instead of increasing sales as it was meant to…

The right balance between market goals and user’s satisfaction will depend on Pop-up’s design, placement, and other important factors, reviewed in this article.
Let’s examine, how to avoid negative attitude to the Modals and make them beneficial for your website.

The Modals can be divided into 3 main categories:


The Interruptive Pop-up sends the most important (and engaging) message to a new visitor. Typically it has a blacking-out behind to refocus user’s attention on a single, crucial action: viewing the image, video, filling out contact form, important link or advertisement.
While putting it on the website you should think “whether it’s really needed to interrupt the user?”


The second group of Pop-ups offers attractive deals, giveaways, freebies, and other “sweet carrots”. There is a risk to offer something irrelevant or useless. Proposals like this could make users unhappy and users would leave a website.


And the third one includes Modals which improve website usability, space savers. It may include notices, tips and similar helpful adds.

Well-constructed and beneficial Modals include:

  • Simple design, only necessary information in the content.

  • Unhidden ‘close’ button. It should be visible, big enough and be convenient to press. Pop-up should be closed by clicking or tapping the area outside and pressing [Esc] key.

  • Keeping reasonable Pop-up’s proportions. It shouldn’t be too tall or wide. Always consider that your Pop-up should be scalable for mobile and tablet screens.

  • Avoid long scrolling.

  • Using directional animation for opening and closing Pop-ups. It will help to understand where the window came from.

  • Optimizing amount of Pop-ups and their timeliness. Pop-ups shouldn’t be presented on every page. Analyze user’s behavior to show Pop-ups targetly.

  • Use appropriate and tested scripts for Pop-up loading and animation.

  • Test multiple Pop-up versions to find which version converts the best.

Where Pop-ups are most useful:

Images/Videos in lightboxes

+ Space saving.
+ No need to load new page.
+ Interruption is justified by sending the most useful information.

Contact, Sign-in and Login Forms

+ No need to create a separate page
+ Forms are available immediately – increased usability.


+ Inability to ignore the notice Try not to place too many alerts or notices on the website.

Helpful Tips:

+ It’s easy to open and close them, without getting diverted from the content.

Before using modals just carefully consider all the pros and cons:

  • Does the visitors really need Pop-up’s information to be visible often, or the amount and frequentness of Pop-ups can be minimized?
  • Does the Pop-up window look harmonious?
  • Do the users interact with Modal easily and intuitively (opening, closing, etc.)?
Despite the fact that Search Engines do not index Pop-up windows, smart using of Pop-ups will increase SEO results anyway, it will make your website more intuitive to use and will spice up your online presence. Studies show that Pop-ups drive 1570% more subscribers, opt-in pop-ups result in 1,000% increase in conversions.

Perfectorium IT company is fastest growing web developing company in Ukraine, is offering you a wide range of services: Website Design & Development, SEO, Mobile Applications. With our extensive industry experience, Perfectorium understands how to help you to realize your business dreams and maintain your online and offline presence. Feel free to contact us and see what we can do for your business. Our experts can schedule a Skype conference call and give you a brief overview of our company services and make a preliminary assessment of a project cost. Book a free consultation with our website design consultant, fill out a simple form below this post.

The sooner we begin...

We're here for you! Reach out today.
Simply leave your contact details below and we'll get right back.