11 popup design tips and tricks

Sumo study shows that the top 10% highest-performing pop-ups averaged a 9.28% conversion rate.

Whether you are a fan of pop-ups or not, they definitely attract attention, no matter if it is email collection, promotional offer or something else. Even the imperfect pop-ups convert well, so almost everyone uses them.

1. Choose the right time

Make sure that your popup will appear at the right time and in the right place.

Using a little delay will allow users to see what your store is offering first. By showing your popup after 2 pages the visitor has checked, you double your pop-up’s conversion rate.

Information about special offers is best shown immediately, but the proposition to subscribe to the newsletter is best shown with a delay. Another great option is to make a special offer exactly when the user is going to leave your website (so-called «Exit-intent pop-ups»).

The companies discovered that the best time to display their offer is after a person spent 10 seconds on the site.

As for the pop-up frequency, the best practice is to set up the popup to show at about 50% – 60% of the average time on page.

2. Use the detailed targeting to get the best results

Pop-ups can be shown to the desired audience. For example, to visitors from the specified country, those who visited certain pages or those who came through an advertising campaign.

If the user came through an advertising campaign, then you can show him the product in which he was interested, including a profitable offer. This creates a closer connection between advertising, letters and the site, and also increases conversion.

3. Create a pop-up design that matches your website’s design

Use a logo, corporate font, colors, background. This will allow the user to create a holistic picture of your brand and help increase its recognition. This also increases the user experience and trust.

Create your pop-up design as carefully as you created your website header design or you are About me page.

Read more about website header design here: 

4. Create a clear and concise pop-up copy

Describe the main point of your offer and add a short and snappy call to action. Writing a few lines will be simple if your offer is related to the webpage content.

For instance, if your visitor reads a blog about e-commerce, then it is a good idea to offer him an exclusive book about it.

Crazyegg studies show that short and capacious copy increases the subscription rate by 0.05 compared to the long one.

5. Provide value in your pop-up

Some pop-ups contain only information, some – offer discounts, the others – ask for your personal data in exchange for bonuses. The principle of value is based on fair exchange, that is, how fairly the user’s efforts will be rewarded if he agrees to the conditions offered by the pop-up window.

6. Use the dark background and clickable space

The design of pop-ups follows one simple but effective strategy. Almost always, the background behind such windows is darkened so that the reader’s attention is drawn to the information on it. But the background should not be made too dark or black (the perfect rate is 50-90%): the user should see that there is a site page behind the pop-up window.

The visitor should have different options to disable the pop-up: apart from the button click, there should be an option for closing the window by clicking on a background behind it. Then, the attitude to the site, as a whole, will be positive.

7. Use compact popups

If the pop-up is too big, it distracts and even annoys users. Most often, a pop-up window appears in the lower right corner, and the size depends on the amount of content. Large pop-ups that overlap the website page are a taboo.

8. Create a strong call to action

A good pop-up window tells the visitor what he should do to get the things you offer, that is, it contains a call to action button. Therefore, most CTAs contains a verb that accurately defines the necessary action.

9. Avoid using too many pop-ups on the webpage

If the user has already refused a certain offer once, it is a really bad idea to show it to him again!

And avoid showing pop-ups on every page, use alternatives. It is always possible to convey a message to a person in more humane ways.

10. Test your pop-ups on multiple devices

Make sure that the pop-up looks perfect on the computer, tablet or mobile.

To find it out, you can use some tools like Responsinator or Quirktools: just add the address of your page on the website and check out how it displays on mobile devices.

11. Let the visitor know that his actions with the pop-up have worked

Consider the feedback that the pop-up gives to the visitor. He should see the feedback right on the website.

The pop-up should confirm that it went well: the message has been sent, the poll has been completed, and the user’s personal data has been received. You can finish your message with the “Thank you for…” phrase. But it’s even better to explain what awaits the visitor after he interacts with the pop-up.