Top 7 Mobile Popup Best Practices to Engage Users in 2023 (+Examples)

A mobile user experience differs from a desktop one, it’s a well-known fact 💁‍♀️. So when creating popups, it’s crucial to take into account their mobile-friendliness to convert users and not irritate them. 

The main dissimilarity between desktop and mobile popups is that the latter has much less space. In other words, you need to fit all you want to say into a small square and at the same time encourage a user to take an action. The rule here is simple, less is more.

Nailing your mobile popup design will result in an increased number of email leads and make Google happy with your mobile-friendly website (yes, the search engine pays huge attention to mobile UX).  

From this article, you can learn about the importance of mobile popups and the best practices on how to use them for marketers. Follow these simple tips to improve your conversion rate and have a chance to get to the top of Google search.

Why use mobile popups?

Have you heard the news? About 6.6 billion people around the world use smartphones and this number is growing irreversibly. Probably, every time you go to a restaurant or ride on a bus, you see people fixed on their phones, scrolling Facebook, Instagram, TikTok, or looking for just the perfect product to buy. 

There is no better device to consume it all on rather than our phones. It means that marketing campaigns on mobile gadgets have huge potential to help you reach your target audience. According to some studies, on average people spend over 3 hours on their phones per day. I don’t know about you, but for me, it’s even more than 5 hours of daily screen time (guilty 🙈). 

That means marketers focus a lot on producing mobile-friendly content for their users.  And it extends to popups. My guess is that’s exactly what brought you here.

7 mobile best popup practices to learn from

1. Choose the right popup type and position

So basically there are a few types of popups, mainly we talk about full-screen and standard-size popup windows. Their position can also differ depending on your settings, like in the middle of the screen, top or bottom of the page. The question remains as follows: which one to choose?

A popup, whether on mobile or laptop, interrupts a user experience with your website. Especially on smartphone screens where there is little space, it’s easy to drive customers nuts with a huge full-screen popup. Try to hide your close button, and you will lose them forever. 

That’s why we suggest leveraging the standard-size popup window with a huge X sign. They take up less room on the display, which means they are less intrusive. They prove to work particularly well to welcome visitors to your page and invite them to use a discount coupon for first-time buyers. See how Rails and Karen Millen fashion brands show their popups to mobile users.

I, personally, prefer the one on the right. Full-screen banners annoy me enormously as they prevent me from exploring the product page and put pressure on me to take advantage of a discount on a product that I have not even chosen yet! And after this banner… maybe, never will…

While Karen Millen discount mobile-friendly popup looks much less overwhelming and doesn’t take control over my website experience. I can still see the item I was interested in in the background (so no stress about losing it in hundreds of other products) and it’s very easy to spot the closing button if that’s what a customer is willing to do. 

Of course, you may say now that full-screen popups also work. And you are right, but if you show it immediately to the users who landed on your website for the first time, there is a chance Google will demote your site for this intrusive popup. 

Instead, if you really want to go with a huge banner, adjust its settings to show up after a user visited at least a couple of pages and showed clear interest in your site. Then this type of popup might really work.

2. Prioritize correct targeting

Just like with any other marketing tactic, targeting is everything. In terms of mobile popups, they are annoying enough to show them to non-relevant users who are obviously not gripped with your offer. 

For example, at HelpCrunch we show popups only in extreme cases when it is absolutely necessary. Thus, we love inviting our users to book a demo with us because that’s when we can demonstrate all the perks of our platform and discuss the specific needs of our prospects. 

But if we showed an invitation popup on every page of our site, we would only scare away customers. We understand that not every visitor is at the demo booking stage, so our team decided to set up a mobile-friendly popup only on the page where we compare our tool to the most prominent competitor. If a visitor is ready to go in-depth with the capabilities of our platform, then it must be a perfect moment to invite them for a demo. 

When talking about the right targeting, it’s display rules that matter the most. Who and when will be able to see your popup? Adjust the settings in the popup builder section on the HelpCrunch platform. For the popup shown above, we picked the following display rules:

You can create the same popup with our platform, or even better! If interested in testing HelpCrunch opportunities for free, just sign up and get a 14-day trial at no cost. I promote it because I love it and use it myself 🙂 

3. Nail your CTA 

There are not many things that can help you to stand out with a mobile popup. Since the space on a smartphone screen is limited, you should attract user attention with a stylish CTA button and a clear message that leaves no questions. 

Usually, brands ask visitors to respond to two requests on popup banners:

• Share an email address
• Click the CTA button (to book a demo/get a free discount/download an eBook) 

When designing your action button, make sure it’s large enough so that a thumb can easily click on it. In terms of a color palette, it should definitely stick out and be intuitive for visitors to push. Also, take care of the message, it has to be concise and simple: Get 10% off, read the marketing guide, grab free delivery, or book a demo. 
For example, let’s have a look at this popup from Deliveroo app. Its design is simple and perfectly matches the app’s color palette. A little icon at the top only enhances a user’s wish for food and proves great customer service. The CTA button to Turn on notifications stands out and makes a visitor press it automatically, while the Not now option is pale and almost invisible to the user’s eyes.

Popups on mobile devices are small, so in order to work out, they need to have a single goal, with a design that makes a splash. The Call-To-Action button has to be obvious about what you want your users to do.  

4. Avoid using images

You might have noticed that on the popup examples above there are almost no images. The reason is simple – less space, and less content can fit on the banner. On mobile devices, small popups with a form to fill in, a CTA button, the message itself, and an image look busy. Images attract too much attention and leave the actual CTA button in the shadow. Like this example from JD Sports. 

Yes, the product photo looks amazing, but it draws too much attention to itself, leaving the most important, the CTA button, in the background. Then ask yourself, what is the main goal of my popup: to show a product photo or to encourage the user to take a certain action?

Instead, opt for a simple design with high contrast, and let the product images on your website speak for themselves. Here’s how you can solve that problem by adding a picture to the desktop version of the popup and hiding it for mobile devices:

5. Add fewer form fields

I will never stop repeating that with popups on mobile gadgets, the main issue is limited space. Some brands ignore that fact and create long-form questionnaires asking users to share a full name, email, phone number, job title, age, gender, and ethnicity. 

If you ask me straight from the shoulder, I don’t know a single person who would provide all this data, apart from my grandmother, probably. She would assume that it’s an obligatory action, and you can’t skip it. (Yep, my granny is just learning how to use a smartphone, and still believes that she won a million dollars every time a lousy scam banner pops up.) 

Of course, all this information from a user can come in handy for your next marketing campaign and more granular targeting. But a popup is not the time and place to request it. We suggest you focus on the most important question: the email address. In the end, popups are a great email lead-generation tool, so use it to your advantage. 

Have a look at this popup from Magic Spoon. Nice catchy design, a non-intrusive image, and just one form to fill in. Quickly weighing all the pros and cons as a user, I will most likely agree with this proposal. I feel okay to share my email to get the product for free.

6. Allow users to close the popup easily

I know. I know. We’ve mentioned it a few times already, but many brands still play hide-and-seek when it comes to a popup closing button. In particular, when we talk about the mobile device experience, it can drive anyone off their head. 

To be fair, in many cases it happens by accident when a team just forgets to add an X button to their mobile campaign (which will never happen if you use the HelpCrunch platform 😁). Also, it may happen that a visitor’s screen size just cuts the button off. How to avoid it? Well, by proper testing on different mobile devices or adding a closing text instead of a button. 

See how the Saint and Sofia brand solves the case by adding a No, Thanks option just under the CTA button.

7. Finally, test the popup across various mobile devices

The peculiarities of displaying popups on mobile devices are tricky. There are all different kinds of mobile gadgets and a popup that looks just perfect on iOS may look wrong on an Android device. That’s why we encourage you to check it out after the launch. 

How you can do this? For instance, in our team, we just drop a message on a marketing chat asking everyone to go to a particular page and make a screenshot of the popup on their smartphones. 

Another way is to reach out to your QA team and ask them to take a look. To be honest, we’ve never encountered any issues with popup displaying. But as they say, better safe than sorry, as a ruined customer experience may cost a lot. 

Keynote

I want to take this opportunity to remind everyone one more time, a popup on mobile is not a place for interviewing users or flaunting another eye-catching photo of your product. Instead, it’s a perfect tool to guide visitors in the direction that leads to more benefits for them. More valuable information. More beneficial offers. More opportunities to succeed with your product. 

But no popup can be created out of thin air. What you need is a reliable platform that provides you with an easy-to-use popup builder, a bunch of templates, and possibilities for a unique design, like HelpCrunch, for instance 😉.