BonFX

Typography & Graphic Design Blog

  • Facebook
  • RSS
  • Twitter
  • Blog
  • Books
    • The Preposterously Huge Book of Google Font Combinations
    • The Big Book of Font Combinations (Classic Fonts Edition)
  • About
  • Contact
  • Store
You are here: Home / Web Design / How to Make Your Popups Irresistible (And Not Annoying)

How to Make Your Popups Irresistible (And Not Annoying)

April 26, 2016 by Douglas Bonneville

From the dawn of civilization, there have been commercials. If you look close enough at the Ancient Egyptian hieroglyphics, you’ll likely find an ad for a chariot dealership mixed in with the picture stories. (Seriously, though: papyrus wall posters in Ancient Egypt were some of the earliest advertisements.) Flash ahead to our modern age and you’ll find there could never have been television without commercials. Now that the world has truly become Internet-centric, businesses want to utilize your time by offering some form of advertisement.

At first, it was a banner ad dropped onto a website. The clever marketing device soon evolved into the popup. Today, tech savvy websites generate popups in hopes of capturing an email address or providing a direct click-through to sales.

As a web designer, your goal is to create popup tools that will make the client happy and not annoy the user. Too tall an order? Perhaps it’s not as challenging as you might imagine. Before getting to the gorgeous graphics that you’ll create to go with it, you might want to consider some functionality.

Time-Based Popups

Many popups literally pop up the moment a user lands on a website, and this type is probably the most infuriating for a user. Website visitors want to look at the info they’ve search for — and they don’t want it to be a difficult process, or to have to jump through hoops. Users may very well click on a popup, but it should be generated at least 60 seconds into the viewing experience. This way, you know you’ve engaged the user, they aren’t going to bounce because they see a popup, and they are more apt to follow through with the popup request.

popup-1-time-based

Food & Wine serves up a time-based popup that appeals directly to its demographic user. Visitors to the site come for the recipes, and this popup takes them deeper into the dishes. They only have to wait a few seconds for it to be generated.

Focus On Content

You can specify a website’s popup based on the specific content of a page. In other words, popups can be more than “register and run.” You should tailor popups so that they enhance the user experience. On the design front, this is a bit more labor intensive because you have to take the time to designate the popups for each individual page, as opposed to a general popup that can run across the entire site.

Here’s a great example from Wishpond. Their service has many features, but one of them is a tool to create website popups, which they’ve highlighted in this popup on a blog post about great popup examples:

popup-2-content

Scroll Popup

Like the time-based popup, the scroll popup can happen after a certain level of usage. In this case, it would mean generating the popup lower in the content piece at around the halfway mark. The only potential drawback is if the user doesn’t make it that far. Regardless, scroll popups come across as less invasive. You’ve given the user their content and now it’s time to consider sharing information. Decent trade-off.

The example below from Foodie Fitness is actually both a pop-out popup and a scroll popup that appears about halfway down the page.

popup-3-scroll

A Pop-Out Popup

The pop-out popup comes in from the side of the browser. This lets the visitor continue reading the page without disruption. The most effective pop-out popups are visually enticing. You want to find a way to draw the eye over and encourage the user to interact. Plain text doesn’t cut it for a pop-out popup.

In addition to the example above, here’s an example from CopyHackers:

popup-4-pop-out

This subtle popup follows viewers down the page as they scroll.

Exit Intent Popup

The aptly titled exit intent popup occurs when the user is about to click away from the page. It’s the last bit of information that pops up after users gain what you need from the website. It’s like offering a bonus after they’ve spent time with the company.

I’m not done with CopyHackers yet… here is a great exit intent popup from their site. It even animates, with the character pointing to the button to turn it red.

popup-5-exit-intent

Less Is More

As with everything to do with a website, content is king for your popup ad. The copy should offer a clear and concise benefit. Something free like a newsletter or eBook is always a good way to go. The popup also needs a strong call to action. “Learn more” is nice, but it’s not very enticing. Think outside the popup box to truly engage users, but keep it simple.

What does everyone want? Free stuff! CJ Pony Parts recognizes this fact and cuts to the chase in a popup that almost immediately appears on their homepage, offering the chance to win a $250 gift card just for signing up for their newsletter.

popup-6-simple

Tools of the Popup Trade

If you’re new to popups, it won’t take long to pull ahead of the design curve. There are some fantastic plugin tools to make adding popups to webpages a thing of beauty.

Magnific Popup bills itself as a “responsive lightbox and dialog script with focus on performance.” It offers a wide array of design options that will provide your client with plenty to pick from.

Fancybox utilizes the Mac-style lightbox for its popup plugins. It allows for easy import of graphics, HTML elements, Iframes and SWF movies. In other words, Fancybox will have your popup design covered.

WordPress PopUp is as simple to use as WordPress itself. If you’re already familiar with many WordPress templates, adapting this marketing plugin won’t slow you down.

Your clients have likely experienced popup ads for themselves, so you probably won’t have to educate them on the concept. Instead, provide them with the best option for their company based on the functionality they need to create an offer that is irresistible to their visitors.

Filed Under: Web Design

About Douglas Bonneville

Douglas has been a graphic designer since 1992, in addition to software developer and author. He is a member of Smashing Magazine's "Panel of Experts" and has contributed to over 100 articles. He is the author of "The Big Book of Font Combinations", loves cats, and plays guitar.

Drink from your favorite Font Mug

HOW TO MAKE INSPIRED FONT COMBINATIONS (without spending all day clicking things).


Font Combinations Book  

On Sale Now at
Amazon / Barnes & Noble

Or get the PDF eBook version, INSTANT ACCESS, 40% off Retail, now at the BonFX Store

Subscribe to the BonFX Newsletter

Keep tabs on the latest typography and design books and apps from BonFX. If you subscribe today, we'll also send you the classic "Typography Primer" from Adobe!

Recent Inspirations

  • The Preposterously Huge Book of Font Combinations January 13, 2021
  • Rainer Maria Rilke January 2, 2021
  • Three secrets to ignite inspiration December 22, 2020
  • How to “Draw Out” Your Creativity November 27, 2020
  • Finding Your Voice as an Artist: The Paradox of Originality October 18, 2020
  • Artist Frederick Franck on Seeing September 15, 2020
  • How to Move Beyond Creative Blocks August 10, 2020
  • Claude Bernard: The Only Way to Learn July 25, 2020
  • Ornate Leaf Sculpture and Crochet Art by Susanna Bauer June 18, 2020
  • Negative Space: Saying A Lot With Nothing May 25, 2020
  • How to choose from among all your great ideas June 17, 2019
  • What you see is not always what you are looking at June 14, 2019
  • The Key to Unleashing Your Natural Creativity June 14, 2019
  • An Artist According to Mondrian June 14, 2019
  • Henry Miller: Forget Yourself June 14, 2019

Copyright © 2021 · BonFX

  • Blog
  • Books
    • The Preposterously Huge Book of Google Font Combinations
    • The Big Book of Font Combinations (Classic Fonts Edition)
  • About
  • Contact
  • Store