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.
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
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.
Have a look at the screenshots below. If you follow their example you will be on the correct path :)
You might also like…
15 Responsive CSS Frameworks Worth Considering →
15 Free WordPress Themes with a Responsive Layout →
CSS Form Templates, Tools & Services →
Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks →
40 Essential CSS Templates, Resources and Downloads →
50 Free Tools and Apps for Web Designers and Developers →