In this tutorial we’ll take a look at pop-ups (modals) in web design. Using pop-ups in your designs comes with a certain amount of responsibility; if done carelessly, adding pop-ups can ruin the user experience. When implemented well, however, they can be an extremely useful tool.
Let’s take a look at a few typical examples of pop-ups, examine why users and designers might dislike them so much, why some users choose to install a pop-up blocker, and some best practices for making them work well.
Best Practices for Pop-ups in Web Design
Check out the video below, or the transcripted version underneath if you prefer.
What Are Pop-ups?
A pop-up (or modal) is a small UI element that will appear in the foreground of a website, usually triggered as a prompt for the user to do something:
This is a modal window; you need to click outside of its boundaries, or hit the close button in order to close it. We also refer to pop-ups like this as being “interstitial” as they appear at stages between expected content.
Here’s an example of a pop-up which slides in from the right once the user has scrolled to a certain place on the page:
Header bars, or footer bars, which display temporary information (such as promotions, or notifications) can also be considered pop-ups.
Why Are Pop-ups Disliked So Much?
As a user, the main reason for disliking pop-ups is that they’re disruptive. They interrupt a user’s flow, focus, attention, when they’re trying to complete a task. Imagine you’re busy reading something, then all of a sudden a window pops up, right in the middle of the screen, demanding your attention. Things are made even worse when the pop-up in question isn’t at all relevant to what the user was doing or reading (poorly targeted ads, for example).
Not everyone hates pop-ups though. In fact, marketeers love them. Pop-ups give marketing teams a dedicated place to focus the user’s attention on a very specific thing. Studies show that when done well, pop-ups can increase conversion, so their power as a marketing tool cannot be underestimated.
Google recognises the negative impact poorly-implemented pop-ups can have, and is issuing penalties for interstitial ads on mobile platform nowadays. Pop-ups which appear on the first page, or obscure the majority of the page’s content, are considered intrusive and will be subject to penalties.
When used responsibly, pop-ups won’t be penalised. Cookie notices, age verification, and ads which don’t consume huge amounts of screen real estate, will all be considered fair game.
3 Compelling Reasons to Use Pop-ups
So now we’ve established that pop-ups can be useful, and that they’re acceptable when used responsibly, let’s look at the three main reasons you might want to use pop-ups in your own websites.
1. They’re Attention Grabbing
A study conducted by Microsoft shows that people nowadays have a realistic attention span of about 8 seconds (even Goldfish score better than this..). So being able to grab a user’s attention, just for a few seconds, can be invaluable. In those few seconds we can show users content that they might otherwise miss.
2. Pop-ups Can De-Clutter Your Website
By placing certain types of content in a pop-up you can ensure that your actual content can be displayed without any distractions.
3. They’re Totally Customisable
Best Practices for Using Pop-ups
With all these things in mind, let’s have a look at some best practices.
1. Be Consistent
Pop-ups should adhere to the same style as your website. If not, the end result will be especially jarring, and possibly evoke a feeling of distrust from the user.
2. Make Them Responsive
Nowadays the majority of internet users do so on a mobile device. Make sure your pop-ups are displayed equally sensitively on mobile as they are on desktop; firstly because Google will slap your wrist if you don’t, but more importantly we are actually trying to improve the user experience.
3. Keep Your Copy Short and to the Point
Don’t use too much text–nobody wants to read a novel in a pop-up.
4. Don’t Collect More Information Than Necessary
If you’re collecting leads, in most cases an email address is more than enough. Don’t overcomplicate things because nobody likes filling in long forms.
5. Don’t Repeat Yourself
Don’t show the same pop-up to the same user multiple times. You might get away with a pop-up being shown twice, in case the user accidentally clicked it away the first time, but certainly don’t show it again.
6. Display Pop-ups Where They Are Relevant
Display your pop-ups where the content or the context is relevant to what the user is doing (or trying to do).
There are many more best practices to consider, but I listed the top six here. Feel free to add your own in the comments. Enjoy implementing pop-ups, and remember to use them responsibly!
- WordPressHow to Create Awesome Popups in WordPress with Elementor ProAdi Purdila
- WordPress Plugins24 Best Popup & Opt-in WordPress PluginsDaniel Strongin
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post