2) Everything Is Designed for the Left

Makes sense. We digest information the way we’re taught to read -- left to right. And right to left cultures place a bigger design emphasis on the right side of the page.

That’s why so much is designed and placed on the left side of a page. If all our attention is there, it makes sense to put your most important UX elements there.

Look at the visual balance on Yahoo’s homepage. The left side is all navigation, both vertically and horizontally (at the top). If you cut the page in half, you’d see this:

The search bar, headline and stores are shifted mostly to the left side, concentrated in the top and center. But look at the right side:

There’s not a lot there. You see trending topics, some weather and then a picture of a dude leaning on a boat.

Adding one more element -- like a Scroll Box -- to the left side of a page is like adding one too many Jenga blocks to the top of a tower. It throws off the balance of the page and covers up main navigation (people don’t particularly like that).

So if the left side is taken up by share bars and other design elements, it makes sense to grab your attention in a spot that is free of space -- the right side. You don’t expect it, and it doesn’t hurt the viewing experience.

We’ve got the “where” of the attention equation. Bottom right is where it’s at for the most attention-grabbing Scroll Box popups.

The next question? When do you show your Scroll Box?

47% Is The Magic Number

Think back to the last time you were in a store (Amazon shoppers, move on).

When a salesperson approached you, were the first words out of their mouth, “HEY, YOU NEED TO BUY THIS!?”

Nope. Unless you were in Banana Republic recently. They’re relentless.

What generally happens is they wait. They let you browse a bit, see what you’re interested in and then make conversation with you.

Basically, they wait until you’re invested in the purchase process.

Think of your Scroll Box as a living, breathing salesperson. It should appear when your visitor is most invested in your message -- whether that’s a blog post, homepage or product page.

And science says, on average, that happens 47.7% down your page:

You see that most of the pop-ups appear between the 40-69% mark. Some show their Scroll Box at the 10% mark, while others wait til the 90% or even 100% mark to appear.

But, for the most part, the top 1% of Scroll Box appear between the 40-60% range -- specifically the 47% mark.

So why 47%? Well, it’s easy to see once you break a page down into percentages. That’s because most pages -- blog posts and product pages -- follow the same general structure.

Blog Posts

Here’s an example of a normal Sumo guide:

You see the colors transition from warm to cool. That means fewer and few people get to the bottom of the guide. The yellow lines denote the percent of the page (i.e. 10% means you’ve made it through 10% of the guide).

Our Sumo guide structure breaks down to this:

10% of Guide: Here’s your introduction, plain and simple. We lay out the scene, present the topic and talk about what we’ll provide in the guide.

50% of Guide: At 50%, we’ve gone through a few of our points and dove deep into a few points. This is generally considered the “meat” of an article.

90% of Guide: To quote Adele, this is the end. Most guides end here, with the last 10% offering a content upgrade or something of value.

Look at your own content. I bet they follow this same ratio, too. And the cool part is you can apply that ratio to a visitor’s interest level:

50% of Guide: They’re interested in your article, and it’s safe to say they’re invested in the material. They can still leave If it’s not engaging enough or drops off in quality, but for the most part they’ll keep reading once they make it this far.

That 50% mark explains why so many of the best Scroll Boxes show up midway through the page. It’s the biggest intersection of amount of readers that are also interested.

Wait too long and you miss out on visitors. Show the Scroll Box too early and you’re wasting an ask on visitors that aren’t as invested.

Product Pages

This same principle applies to product and home pages, too. There’s a general structure to these kind of pages. If you look at the Sumo page, you get an idea of the percent breakdown:

10% of the Page: This is our “hero layout.” It’s the first section you see on a page, and for us we state our biggest value proposition. Evernote, Dropbox, Spotify and most sites follow that layout.

50% of the Page: By this point we’ve gone over features, benefits and some social proof in the form of testimonials and logos. This top half comprises the big selling points that get visitors interested.

90% of the Page: If they make it this far, they’re ready to act (or very close to it). They’ve seen every benefit and piece of social proof possible.

And what we mentioned in the above section holds true here. At 10%, visitors aren’t quite interested yet. At 50%, they’re pretty interested. At 90%, they’re ready to act.

That middle of the page -- where the intersection of interest and readers are high -- is where the best Scroll Boxes appear.

But attention isn’t just about where and when. If that were the case, you could say every bird that flies past my window is a marketing genius.

There’s got to be more than a fleeting appearance to capture real attention. Elements that keep your eyes on the Scroll Box as opposed to glancing then moving on.

One of these elements is controversial. It sparks debate, but we’re going to put it to rest today.

That questionable element?

“Should I use an image or not?”

Settling The Debate Of Using Images in Pop-Ups

Copywriters scream for more words. Designers fight for more images. Engineers debate about how to pronounce GIF correctly.

So who’s right? Do we need more words or more images?

On the surface, it seems like the writers can claim a W. A majority of the top Scroll Boxes don’t use an image. 81% of the best Scroll Boxes don’t use an image, while 19% do.

Debate over, right?

Wrong.

Remember, we’re analyzing the top 1% of Scroll Boxes in existence. But like Inception, we can dive deeper, look at the very best Scroll Boxes and find something even more interesting.

But if it’s any random image you’ll actually lose attention. If the image doesn’t instantly convey value then your reader will shift their focus away from the pop-up before they ever read a single word.

So don’t use any random image. Use one of these two types instead.

1) Depiction of Offer

If you’re giving away something -- an ebook, product discount or service -- physically displaying or depicting that offer works well.

They Add Contrast: Many of these sites have darker or colored backgrounds. The clean, white boxes stand out against these types of backgrounds.

They Draw Focus to CTA: Your call to action is what makes people act. Since almost every CTA button is a bold color, the white background forces you to see the CTA first.

Even David Ogilvy, the father of modern advertising, knew light backgrounds performed better than dark backgrounds.

He found that black font on white (or light) backgrounds was far easier to read than the inverse. So on top of grabbing attention, those light backgrounds work double time to make your message easier see.

Let Me Show You How To Create An Attention-Grabbing Scroll Box in 3 Minutes

You’ve seen the scientifically backed formula behind attention-grabbing Scroll Boxes. You’ve got the stats that reveal how to be part of the 1%.

All that's left is creating that Scroll Box. We've written a very detailed article that can help you create a Scroll Box that’s practically irresistible to the eye.