I’m a big believer in reading what other people in your field (and out of it) are saying, and as a result I’m subscribed to about 1,637 email newsletters/blog digests/daily summaries and such. One of the updates that came in the other day looked interesting so I loaded it up in my web browser and started reading. And then I went insane.

Screenshot of a Blog Post

At first, all is well! It’s a potentially interesting article on the web site of a prolific Customer Experience Design Firm. I scroll down to read more…

Screenshot of a Blog Post showing a popup highlighting a call to action

…and, oh, a bubble highlighting the subscription form has appeared. It covers some of the text. Annoying, but I’ll just click that “X” that I assume will make it go away…

Screenshot of a call to action taking over the entire screen

…but it DOESN’T! Instead the click triggers a full-screen takeover, making damn sure that I know that I can become more awesome by subscribing to their newsletter.

Screenshot of the blog post with a photo of Donald Norman in it.

Bonus Irony: Once you dismiss the popover and read more, you find usability guru Don Norman’s bemused face gazing out at you from an aside. I wonder, would this page make him punch his fist right through the computer screen, or simply get up from his chair, walk out the door, and join a monastery in the mountains of Japan?

OK OK, it’s true, popovers have been shown to work. They shove your subscription form right in the user’s face where they can’t possibly miss it. And apparently the data show that your increased signup rate offsets your increased pissed-off-user rate. But I believe any pissed-off-user rate higher than zero is too high. Actually hitting zero is unrealistic but we shouldn’t willingly compromise that goal.

The problem is that, despite their good intentions, plugins like SumoMe make it so easy to add just one more welcome mat or exit intent popup that websites are getting taken over by them. I know why—SumoMe and its compatriots are experts at exploiting FOMO in their marketing. “Use this opt-in technique” they say, “or you’ll be missing out on 100,000x subscriptions!”

So how do we resist this marketing and design an effective call to action without resorting to user-hostile design patterns? Here are a few simple rules to follow that will make sure the people following your call to action are doing it because they like what your site has to say, not because there’s no other way out:

Rule 1: DO Add Movement

DO Add Movement

The human eye is drawn to movement. A banner that slides down from the top or up from the bottom of the screen as the viewer scrolls calls attention to itself and occupies highly visible screen real estate without detracting from the user experience—as long as you follow the next rule.

Rule 2: DON’T Block Content

DON'T Block Content

Your visitors came to your site to read the content you have there. A form or banner or other call to action that appears and prevents your visitors from seeing that content is only working against you. Your content is what will convince people to sign up for your newsletter or register for a free trial, and but covering it up with something that the users didn’t explicitly ask for you’re coming between your visitors and your content, and annoying people on top of that—not the best sales strategy!

Rule 3: DO Use Contrasting Colors

DO Use Contrasting Colors

Along with movement, contrasting colors are the other most effective way to attract your visitor’s eyeballs. If your page is mostly blue, try using red or orange in your call to action, such as in a form button, as a badge calling out the content area, or as the background color.

Rule 4: DON’T Make Content Jump Around

DON'T Make Content Jump Around

We’ve all been there—waiting for a page to load, clicking on a link, only to have the link move at the last minute as some call to action box fades into view and causes the whole page to re-flow. Even if you are following the first two guidelines by adding movement and not blocking content, make sure that the movement doesn’t cause the rest of the page content to jump around like the blocks on a Tetris screen.

Rule 5: DO Keep it Short

DO Keep It Short

In Rule 1 I used a banner at the top or bottom of the screen as an example. If that banner gets any taller than one or two lines of text you’re going to getting in the way of your visitors, especially if they’re viewing your site on a phone or tablet. Even if you’re not blocking content your banner is using up screen real estate, so use your best, most concise pitch and if you have a form, keep it to one field (the final screenshot in my rant at the top of the article actually shows a really good example of this). If you have more to say or your form absolutely, positively, must be longer, make your call to action a button or link that takes visitors to a dedicated page.

That’s it.

And really, I could have said all that in one sentence: fill your website with awesome content, stay out of your visitors’ way, and make sure that they know how to follow your call to action. There are lots of design solutions to that particular functional spec. This site uses one; what do you think? Am I following my own advice for an effective call to action that doesn’t make you throw your computer in the dumpster? Hopefully the answer is “yes” and you feel inclined to sign up for my newsletter. And if the answer is “no”, pleaseand I’ll do what I can to get a little closer to a pissed-off-user rate of 0.