Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design
Webdesign

The Best Way to Use Pop-Ups (Modals) in Your Web Design

by
Difficulty:BeginnerLength:ShortLanguages:

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:

a pop-up example flightclubcom
A pop-up example on flightclub.com

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:

Pop-up on shankmancom
Pop-up on shankman.com

When you visit the InVision website for the first time you’ll see a fixed pop-up which lets you know about use of cookies (something you’ll see on most websites nowadays).

cookie pop-up on InVision
Cookie use pop-up from InVision

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.

Mobile Pop-ups

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

Pop-ups can take whatever form you wish. They can be customised in terms of their looks and their functionality. They’re built with the building blocks of the web; HTML and CSS, so there’s no limit to what you can do. Because you’ll be using JavaScript to determine when a pop-up is revealed you have a lot of freedom there as well. You might choose to display a pop-up on page load, or when a user scrolls to a certain element, or even when a user moves the cursor outside of the browser window (this is known as “exit intent”).

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).

Conclusion

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!

Useful Resources

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.