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