10 Rules to Follow for Popups and Modal Windows

Skillfully used popups or unclicked modal windows are among the best ways to attract newsletter subscribers, to sell affiliate products, and to generally get your message noticed.

The problem with them is that they are at times far too obtrusive and users do hate it when you bombard them with popups. This is why you do need to find the balance between using popups for marketing purposes and keeping your visitors happy. Here are 10 basic rules to follow to make your popups good instead of annoying.

1. Make the Popup/Modal Simple

Since a popup is really visible, you might be tempted to include lots of things in it. This is a huge mistake! First, when you include lots of things on a small place, it gets cluttered and it becomes very easy to miss the important stuff because of all the minor details that are burying it.

Second, the more stuff you put in a popup, the higher the chance the user will leave. For instance, if you are using a popup to gain newsletter subscribers, it is wise to ask the user to enter his or her email but don’t make the popup a form with dozens of text boxes for the user to fill in. If you are asking for too much data, the user will simply close the popup and he or she could even leave your site completely.

Therefore, the elements you can include in a popup are your logo, a field for the email address, optionally a Name field, a Subscribe button, and of course, a Close button. If you really must, you can include a short video in the popup but since this will make the popup load slowlier and is more obtrusive, be really careful when doing it.

2. Put the Close Button in a Visible Place

For users, the Close button is the most important component of a popup they don’t like. You don’t have to make the Close button huge but you do have to make it big enough and above all – put it in a visible place. You might think that if there is no Close button, as in the screenshot below, you will get a higher conversion rate but this isn’t so. When a user doesn’t like the popup and he or she sees no easy way to close it, the only thing left for him or her is to leave your site. This way you are losing not only a sale but also a visitor.


Image Source

3. Don’t Place Popups on Absolutely Every Page

The more often a visitor encounters a popup, the more irritated he or she becomes. Therefore, unless you want to make your readers hate you, don’t place popups on absolutely every page. Your choices here vary depending on the popup plugin you are using but almost any good popup plugin/script allows to fine tune the display schedule. You can choose to display a popup on particular pages only, on every Nth page, after the user has performed a particular action (i.e. has spent 30 secs or more on the page, which suggests that he or she is interested in the contents of the page), etc.

4. Allow the User to Opt-out Completely

Some popups allow you to give your users the choice to opt-out completely from popups. It is a good idea to give your users this choice because if they don’t want to see popups, you can’t make them want it. Don’t cry for the lost sale – when users don’t see popups, they might click on other ads instead, so this isn’t junk traffic.

5. Don’t Use the Popup as a Laissez-Passer to Your Site

A couple of weeks ago I occasionally stumbled upon the unthinkable – a popup that says you can’t move forward unless you fill in an offer. I suppose this was some kind of an affiliate offer of the type that makes commission for the site owner but I was just shocked by this approach. I am really sorry I didn’t write down the URL of the site to give it as an example of a very bad popup use but unfortunately I can’t imagine this is the only site that uses this totally unacceptable practice.

Don’t use the popup as the entrance pass to your site, especially if you are asking the user to make a purchase. This simply doesn’t work – users aren’t that stupid!

6. Avoid (Completely) Sound and Flash in Popups

A text and image popup might look too lean to you and you might be tempted to spice it a bit but you need to do it with caution. I remember many years ago when the Net was young, every design newbie rarely missed to include music and animation on their page. This was really irritating and I would classify it as a thing of the past but unfortunately every now and then I do see tasteless use of sound and Flash on the Web, including in popups. As with videos, do it only if you absolutely have to.

7. Test Multiple Popup Versions

You might be a genius and think that you will hit the nail on the head the first time you try but if you have a more realistic view on life, you will admit that you can never be sure you made it the first time. This is why, before you start splashing your popups to all your visitors, do some testing on a small sample with multiple popup versions and see which version converts best.

8. Make Your Popups Fast

One of the worst mistakes you can make with a popup is to make it so fat that it takes ages to display and millenniums for the page to load. Videos, sound, and Flash do contribute to a fat popup but even images alone (especially if they aren’t stored locally but are downloaded from somewhere else) can make a popup slow. Speed is one more reason to keep your popups simple.

9. Consider Exit Popups

No matter how merciful to your users you are, onpage popups are irritating. In order to avoid this, you can consider exit popups. Exit popups are less irritating because they are displayed only once – when the user is about to leave your page. However, since exit popups come in several flavors, be warned that JavaScript exit alert boxes (shown in the screenshot below) are certainly irritating, so you may want to cut their use as well.

10. Test Your Popups

Usually good popup plugins/scripts are already tested for you and all you need to do is add your text/images and you are ready to go but if you want to make sure everything is fine, you need to test your popup with different browsers or even on different platforms. If possible, you can ask a small group of your most loyal users to test them, too, so if there are any glitches, you will spot them before you launch the popup for everybody to see.

When used wisely, popups do a great job. Just be careful not to pass the line between use and misuse, and you will be on the safe side. Only then you will be able to enjoy the benefits of popups rather than deal with angry visitors.

Perfect Examples…

Have a look at the screenshots below. If you follow their example you will be on the correct path :)


Source


Source


Source


Source

(26 Posts)

Ada is a fulltime freelancer and enjoys every second of it. She is also the Blogger Relations Manager at WinkPress.com, which is a web resource about leveraging WordPress, its themes, and plugins to create versatile and unusual websites.

Comments

  • What a fantastic article! The topic is discussed in a real interesting manner, enjoyed this piece quite a bit.

  • Nice work, Ada! Terrific guidance. I think it’s also worth adding an 11th principle to this list. The valuable and often overlooked principle is that modals and lightboxes are very rarely a good user experience for those with a variety of accessibility challenges. However, there are ways to support those customers.

    For example, for vision impaired users, with issues around colour differentiation and contrast, shading out the background pane is a great way to heighten the contrast ratio and make the modal content easier to view.

    For those customers with physical challenges, like fine motor control issues, low muscle tone or tremors (they’re more common in online users than you’d think), facilitating use of a mouse (or head wand if required) means making interactive elements, like fields, buttons, radio buttons and the window close element easier to click on, by way of larger clickable space.

    Blind users are the most difficult to support, with modals and lightboxes being notoriously difficult to code so that screen readers can read them whilst ignoring the background content. A quick scan of Google articles shows that this is a hot topic, with several potential solutions being investigated.

    Of quick note, though, is that, like in usability, we can never reach accessibility perfection. What we can do, is to ensure that accessibility, like usability, is considered in every design decision we make, leading to an inclusive solution, which supports people irrespective of disability.

  • Nice work, Ada! Terrific guidance. I think it’s also worth adding an
    11th principle to this list. The valuable and often overlooked principle
    is that modals and lightboxes are very rarely a good user experience
    for those with a variety of accessibility challenges. However, there are
    ways to support those customers.

    For example, for vision impaired users, with issues around colour
    differentiation and contrast, shading out the background pane is a great
    way to heighten the contrast ratio and make the modal content easier to
    view.

    For those customers with physical challenges, like fine motor control
    issues, low muscle tone or tremors (they’re more common in online users
    than you’d think), facilitating use of a mouse (or head wand if
    required) means making interactive elements, like fields, buttons, radio
    buttons and the window close element easier to click on, by way of
    larger clickable space.

    Blind users are the most difficult to support, with modals and
    lightboxes being notoriously difficult to code so that screen readers
    can read them whilst ignoring the background content. A quick scan of
    Google articles shows that this is a hot topic, with several potential
    solutions being investigated.

    Of quick note, though, is that, like in usability, we can never reach
    accessibility perfection. What we can do, is to ensure that
    accessibility, like usability, is considered in every design decision we
    make, leading to an inclusive solution, which supports people
    irrespective of disability.

  • Ada

    Thanks for the feedback! Kim, you are absolutely right that in terms of accessibility popups and modals are very, very tricky and they require an additional effort from designers. Your tips how to make modals and popups more accessible are really valuable – thanks a lot for them!

  • One possible additional rule – Position. Position the window based on size and load time. If I view the site on a mobile and can’t navigate the site without closing it, make it easy to swipe to and close. Additionally, if I scroll down a web page before the entire page loads, don’t display the window at the top of the page so I need to scroll back up to the top to see the content I was viewing.

  • Ada

    Right, it is really irritating when a user has started scrolling down to have a popup splashed at the top of the page. On a mobile this must be a real turn off.

  • iamtester

    learnboost is bad example – close button not working in opera (rule 10)

  • lo574

    Great work.  Thank you!

  • Stéphanie Walter

    Great guidelines for pop-ups and modals that are actually usefull for the user in a specific user interface. 
    But as a user, I would say that the best modal on a website is no modal at all. I’m speaking here only about the modal that you get when you arrive on the website. I just can’t stand the current trend that forces every website I open to throw me a big modal in my face asking for my email to subscribe to newsletter. Hey guys I did not have a chance to look at your content yet, do you really think I’ll give you my email address ??Pop-ups were used in user interface to attract user’s attention on a specific task, to avoid distraction, but now it seems that they’ve lost this purpose. Somebody has to explain me where the distraction is when you come on a website for the first time. Is the website content a distraction so that I don’t see the subscribe newsletter button and the webdesigner thinks he has to throw it in my face ? ^^ 
    So I would say that pop-up and modals should be triggered by a user action (like clicking on logging link, etc). And NO, the page landing is not the user action I’m talking about ^^ 
    Bill also has a point about usability and position especially for mobility. Modals, especially the ones that open when you arrive on a website after clicking a twitter/facebook link from your mobile phone, are hard to close. I don’t count the times when I followed a link, arrived on the site after a certain amount of loading time, saw a black background. I then had to scroll, play around, zoom and un-zoom to find this *** modal to be able to close it (when you can) and access content. I would advice for mobile use to avoid modals, or at least to make them so that they will fit on the screen and that user has not to toy around with the page to close it. Now when I land on a page from my mobile that has a modal, I don’t waste time, I quit the page. 

  • It is so easy to abuse popups. I guess many webmasters use a primitive solution for popups that doesn’t allow to show the popup on a specified event different from site landing. As for mobiles, I completely agree with you that scrolling there is much more unacceptable than with desktop versions.