When it comes to website design, the options are extremely varied. Depending on the functionality and lead generation targets businesses would like to achieve, they should choose layouts that please the user, encourage them to spend more time on their pages, and engage.
However, this is not always the case.
Have you ever browsed through a website, enjoying a piece of content, when a pop-up suddenly appears and prevents you from going on? Frustrating, wasn’t it?
Such experience is very likely to make you leave and find the information you need elsewhere. That’s because pop-ups can be intrusive and distract users from their intent.
In fact, according to a HubSpot survey, 73% of people dislike online pop-ups the most out of all types of ads. In addition, 64% of AdBlock users install the software as they deem pop-ups annoying and want to get rid of them in particular!
However, although pop-ups are divisive and, more often than not, interrupt what people are doing, and hurt UX, many website owners manage to use them successfully.
What’s more, if designed and SEO-optimized properly, they can even increase your conversion rate by 3%, if not more!
In this article, we’ll talk about pop-up designs, explain the guidelines and UX best practices, and provide 5 pop-up design ideas you can benefit from.
What Are Pop-Ups?
In a nutshell, pop-ups are browser windows that display over the main content of a page when the user performs a certain action or reaches a pr defined threshold. The goal is to attract the user’s attention, show them a call-to-action (CTA), and encourage them to engage.
Pop-ups can have different messages – advertising a first-party or third-party product or service, asking for feedback, displaying a subscription box, suggesting an offer, expressing gratitude, etc.
Pop-up designs have been around for the past 15-20 years and they are definitely here to stay. They allow website owners to target potential customers, grab their attention and increase their chances of converting them into buyers.
There are different ways to utilize pop-ups to benefit the performance of your website. However, you should always act with user intent and preferences in mind, and make sure that the pop-up is relevant.
Usually, pop-ups drive visitors away when they come from a third party and have no direct connection to what the user is after. For example, a user is reading an article about how to find a good lawyer and all of a sudden, the content is blocked by a pop-up inviting them to an Amazon FBA seminar.
It is also a very bad practice to place ads that open a new window or take the visitor to a completely different website.
Aside from relevance, the other thing that defines your success is the pop-up design. It should match the overall style and colors of the website, be clever and concise, and have a clearly defined CTA. You may also consider adding a playful element, opt for vibrant contrasting colors to make the information really pop, or anything else that you think may attract the user’s attention and encourage them to engage.
However, keep in mind that the more flashy the pop-up is, the more suspicious it looks, and the more likely the user is to become annoyed and maybe even leave.
How to Boost the Performance of Pop-Ups
To ensure that your pop-ups perform well and boost conversions, instead of driving customers away, you need to design them properly:
Provide Instant Value
What sets apart an effective ad from a failed one is value.
You need to understand your audience and know what they want from the product or service you provide. This way, you will be able to offer them the right solution on the spot!
Also, pop-ups with relevant content convert at over 40%
Create Urgency
Creating urgency is the ultimate path to driving up sales as the user has limited time to make a decision. Having a countdown on your pop-up ad has an eight percent% conversion rate better than those without one.
Promote Brand Awareness
Pop-up ads are difficult to ignore which helps with the visibility of your brand and products.
Furthermore, they are a great lead generation tactic and, if placed strategically across your website, they can help you grow your audience and traffic.
For example, you can introduce a scrolling pop-up when visitors get halfway through articles. This way, you can suggest sending them similar content via email, and build a solid email list.
Focus on Conversions
As mentioned above, a well-implemented and targeted pop-up design can really make a difference in your conversion rates.
At the end of the day, your ultimate goal is to increase sales and get more visitors hooked on your products and services. To that end, make sure you position the pop-ups at the right place and time across the user’s journey on your website.
Also, don’t forget to include a clear, straightforward CTA to guide people to the next step.
Ask for Feedback on the Spot
Pop-ups are a great way to obtain an immediate reaction and invite your customers to state how they feel about your products.
Ask them to leave a comment and rate their experience before they leave your website.
For example, you can use a net promoter score (NPS) pop-in, followed by a comment box where the user can provide additional input.
These types of pop-ups allow you to get to know your customers better and refine your services so you can satisfy their needs more effectively. Next thing you know, you are on the fast track to success. It’s in the bag!
Pop-Up Design: The Guidelines
When it comes to Google penalties, you need to always be alert and follow the guidelines. If a user clicks on a search engine result after typing a query, and that triggers a page with a pop-up that urges them to click on an irrelevant source, that’s a red flag.
However, pop-ups can still be very effective. Just make sure visitors don’t land on a page with a pop-up right after clicking on a SERP result. Time the appearance of the ad properly to make sure they’ve had enough of a chance to browse your content first.
According to Google Search Central, promotional interstitials are dialogs that are intrusive and prevent Google and other search engines from understanding your content. It’s important to make your pop-ups as small as possible so that they don’t cover up the whole screen or key parts of the page. The optimal dimensions for a pop-up design are up to 15% of the user’s screen size.
However, Google acknowledges that some interstitials are mandatory, such as age restrictions and privacy alerts:
To stay on the safe side, make sure that pop-ups don’t obscure the page content. This makes it easier to crawl and index, and less likely to hurt the user experience.
In addition, avoid redirecting incoming HTTP requests to a different page than the one where the user was before the ad.
When possible, use banners instead of interstitials and utilize plugins for standard pop-up designs such as a newsletter sign-up or a feedback prompt.
5 User-Friendly Pop-Up Design Ideas
Now let’s have a look at how to design your pop-ups properly, so that they can cause less frustration to the user, and achieve better performance:
Choose The Right Design Style
Creating a UX-effective pop-up design can be tricky. You want the pop-up to be noticeable, but not so obtrusive that it turns people away. At the same time, the design should be closely aligned with your brand identity. And finally, it’s important to keep the overall design simple, using few colors, fonts, and images.
When done right, a pop-up can be an invaluable tool for driving up conversions and generating leads.
However, if the design is too busy or overwhelming, it will only frustrate users and push them away. So take the time to craft a pop-up that accurately reflects your brand and provides a positive user experience.
Position on the Screen
Another thing to keep in mind is that pop-ups should be easy to dismiss.
Because they interrupt the user’s browsing experience, front-and-center pop-ups should generally be reserved for important information that matters to the user.
However, given the wide range of possible positions for a pop-up, designers have a lot of flexibility in how they can be used.
For example, a pop-up in the corner of the screen may be less intrusive than one front-and-center.
A popular approach is to have the pop-up ad slide in from the top or bottom of the screen. This allows the user to continue interacting with the site while the pop-up is present. With this method, the visitor can choose when (and if) they want to engage with the pop-up. However, keep in mind that if the pop-up covers too much of the screen and becomes distracting, it may still drive users away.
Another user-friendly approach is to make the pop-up less intrusive by including a clearly visible close button or you can simply make the design itself smaller in size. This way, visitors can still see the content on your page and are more likely to engage with your pop-up.
Target Each Visitor
Together with a simple layout and straightforward copy, it is very important to tailor your pop-up design to each page visitor individually. Identify the key pages where it will trigger a conversion.
Creating a personalized experience for customers is a delicate balancing act. On the one hand, failing to personalize at all can represent a missed opportunity for brands. On the other hand, according to Gartner, over-personalization makes users 3x more likely to abandon a brand.
Therefore, individual data points can be useful in creating a more personalized experience, but it is important to use them judiciously. Too much personalization can be off-putting, so it is important to strike a balance that will be appreciated by the customer.
Timing
When a user lands on your website, ideally you want them to first engage with your content and browse around. The longer a visitor spends on a site, the less likely they are to leave (and the safest is to introduce a pop-up ad to them).
Make sure you analyze the time users spend on a page, i.e. the average session. Use Google Analytics to track the traffic you receive and act on it.
However, if you are afraid that you may mess up the appearance timing and drive users away, here are some suggestions:
Entry Pop-Ups
Placing a pop-up as soon as a user lands on a page may work wonders when suggesting limited offers or bundles. However, it’s usually not recommended by search engines when it comes to eCommerce websites.
Scrolling Pop-Ups
If you want to make sure your site visitors have spent a decent time on a page and are informed enough, a scrolling pop-up is a good alternative. You can set your pop-up to appear after they scroll through a certain percentage of the page by placing one or a few relevant thresholds.
Exit Pop-Ups
Exit pop-ups are also known as leaving-too-soon ads. They appear when your cursor moves towards the Back button, or when you’re about to close a page or click a link to go to another one. Exit pop-up design can be used in the last few seconds a visitor spends on a page to suggest a last-minute offer.
Click Pop-Ups
Click pop-ups are dialogs that appear as a result of a click on a relevant button or link. These are probably the most genuine and the least frustrating kind of pop-ups as they come after the user has already engaged with the page content and taken an action.
In the example below, an email signup pop-up appeared after I clicked the button “Join the waiting list”:
Have A Witty/Creative/Casual/Quirky Tone of Voice
If you want to hook your users and make them stay longer, lighten up a little and make your pop-up copy relatable and memorable. It doesn’t have to be aggressive or rude, nor 100% salesy.
Just think about who your audience is, track their behavior, location, demographics and preferences, so you can draw a picture of your average user. Then design your pop-up to display something they may like.
Recap
Well, there you have it! We’ve looked at a variety of pop-ups and pop-up ad examples and discussed actionable tips on how to make them more effective. Hopefully, this has given you some ideas for your own website.
If you need help designing or implementing pop-ups on your site, don’t hesitate to reach out to the web designer experts here at DevriX. We can help you create an engaging and user-friendly experience that drives up results.
Team DevriX
This article is crafted by DevriX's seasoned marketing team, boasting over four decades of collective expertise in crafting sophisticated marketing funnels, devising comprehensive content frameworks and pillars, implementing engaging email campaigns, and creating impactful social media content designed for scalability.
Our marketing experts specialize in the complete spectrum of inbound marketing strategies. As an accredited HubSpot Agency Partner and a Semrush Partner, we engage in meticulous research, blending our extensive experience with the unique insights of our highly skilled team.
We set benchmarks in content creation by incorporating cutting-edge marketing trends, leveraging in-depth industry research, and utilizing state-of-the-art AI tools for data segmentation and captivating content hooks. Our proficiency extends across a diverse range of sectors, including working with SMEs, Fortune 1000 companies, global B2B brands, major publishing entities, WooCommerce platforms, business directories, and affiliate networks.
