I know what you’re thinking. “I hate pop-ups and they are annoying.” While that may be true for you, and I often think so too, the truth is that they work. I use them on my own website, and they are extremely useful and successful. Looking at the numbers, they can’t be beaten. The thing about pop-ups or modal windows is that you have to use them the right way.
Today, we’ll be exploring some tips for modal popup design and implementation.
Methods
There are several methods for triggering pop-ups. You can have them open when someone clicks on an element, or you can have them open after a length of time. You can also have them open when someone goes to exit the viewable browsing area. Which one is best? It really depends on what you’re trying to do.
OnClick
A perfect example would be if you had a call to action button. Once the user clicks on the button, it could trigger a modal popup, featuring a sign up form.
Triggered after a set time
Triggering a modal after a set amount of time can be useful. Let’s say you have an informative website, and you have a special offer. You could set your modal popup to display after a specified number of seconds. This is everyone’s least favorite, because there’s nothing worse than being in the middle of reading a good article, only to have it covered up by a popup ad. I would avoid using this, as it detracts from the user experience tremendously.
Exit trigger
A popup is triggered when the user moves their mouse away from the main content area, towards the exit tab or the address bar. This is considered to be an on exit modal popup, which offers one of the friendlier ways of introducing a popup. People are much more receptive after they’ve found what they are looking for. Also, if you or your website has been helpful, users will be much likelier to opt in to whatever you’re offering.
Behavior & functionality
There are two main features that are a necessity to successful modal usage, to keep from enraging your users. If you don’t do these, visitors aren’t likely to come back.
An exit method
Believe it or not, I have been to websites where a modal pops onto the screen that has no exit strategy. Don’t force your users’ hands. That’s frowned upon and for good reason. A lot of underhanded people on the web use this to force you to like their page on Facebook or follow them on Twitter, whether you want to or not, just to make the popup go away. They’ll also put a timer on it, making you wait 30-45 seconds for the popup to go away. Yeah, most people end up going away, never to come back.
There are two good methods for allowing users to exit a popup. The 1st one is to have an X button in the top right corner. That’s where it’s typically seen, so that is where it is expected. The other is to simply click on the background around the outside of the modal. I would recommend using both. Don’t make it hard for someone to get rid of something they probably didn’t want in the first place.
Don’t show it to them again (for a while)
It’s one thing to have a popup in the 1st place. It’s another to have a popup show up again on another page or just after a minute or so of browsing again. If someone opts out of your popup opt-in box, don’t show it to them again for at least 15 to 20 minutes, or maybe even set it not to show again for a day or two. No means no!
The design itself
Imagine your popup finally takes center stage, only to be boring and unattractive. What makes a modal boring and unattractive? It really depends on the product or services, but there are some things you can do to instantly improve the look of your modal. There are several factors that go into your conversion rate, especially for modal opt-ins, but there are a few general principles you can follow for success.
Type hierarchy
Just like your print designs, and just like the headlines and sub-heads of your website, there needs to be a cascading structure to your modal. All of the text shouldn’t be the same size and simply plastered all over the modal. You should break things up visually to make the content easy to digest. Have a clear headline that is well-written.
Break it down
If you have multiple points to make, or features to list, use bullet points. The goal is to break down the information into manageable chunks that people can quickly process. if they feel overwhelmed, or they aren’t sure what you want them to do, they’ll simply close the modal and go on about their day.
Don’t ask for too much info
People don’t like filling out forms to begin with. Think about the last time you visited the doctor. Did you have fun filling out your medical history form? I doubt it. Your users are the same way. Keep any forms short and sweet, and stick to only the info you really need.
Use a contrasting submit button
Your submit button shouldn’t blend into the background. Use bright colors, or a color that contrasts well against the modal pop-up’s background. An example would be if the modal’s background is a dark purple, you might consider using a bright orange or yellow.
Orange is a better choice, even though yellow is a complementary color to purple. It’s all about color association, and what people think of when we use certain colors. Gold speaks of value, while yellow makes many think of being cautious or leery of danger. Red stands for danger or to stop, which is why you don’t see many call to action or submit buttons that are red.
Include a photo
You wouldn’t believe how many pop-ups I see without a graphic or an image. People like to see a preview of what they are getting. If you’re offering a bribe in return for their email address, you’ll want to include a photo of the item they are opting in for. It visually reinforces the idea that they are getting something valuable in return for their email address, and that you won’t simply take their email address and run away with it.
Conclusion
Even though many say they despise pop-ups, they tend to be a necessary evil for website owners. With this being said, there are things you can do to make the most out of your modals, so that they add to your site, not detract from it.
