Tuesday, September 15, 2015

Just How Important is “The Fold”? 5 Things to Consider

“If there’s one lesson to take from every major change in how people browse the internet…it’s that users hate to click and don’t mind scrolling…Clicking is like a choice, like jumping; scrolling is inevitable, like falling.”

-John Herman, in an article for Buzzfeed

The above quote by John Herman is interesting because he’s both right and wrong.

He’s right because, in terms of simplicity, scrolling is a far better option than clicking. It’s something that just happens naturally. Clicking, on the other hand, is a choice, and that isn’t as easy or as appealing—especially not on a smartphone with limited screen space.

But John is also wrong because he is oversimplifying the reality of website engagement. Single page sites are better because scrolling is superior to clicking, but that’s not to say that users “don’t mind scrolling.” They do mind scrolling because they have attention spans. And last we checked, our attention spans are pretty pathetic.

That’s why all websites, whether they’re traditional or single page, are designed with “the fold” in mind. The fold is the invisible cutoff for any page when it loads. In the picture above, it’s at the bottom of the pink shaded region. Everything in pink is “above the fold”, while everything else is “below the fold”. And what’s above the fold is what determines whether your website is optimized.

If you haven’t given much thought to the fold since your website launched, here are 5 things you should be doing right now:

1. Find Out What Devices Your Visitors Are Using

Determining whether the majority of your visitors are on mobile, tablet or desktop devices is critically important to effective website design. If you haven’t done so already, go to the “Audience” tab of your Google Analytics account and find out right now.

google-analytics-audience-mobile-overview-navigation

If you haven’t had the time to configure Google Analytics to display these stats, you’ll have to set up the web tracking code. This helpful support article from Google shows you how to do it.

Once you determine the device most of your visitors are using, you can create a strategic plan for your homepage design. Without this key piece of information, you’re relying on guesswork.

2. Find Out Which Screen Resolution Most Visitors Use

Keep in mind that even if 90% of all your visitors are coming from mobile (in which case a single page website is pretty much your only option), they could still be viewing your mobile-optimized site in all sorts of weird ways you wouldn’t expect. By turning a phone on its side, for example, you’re effectively cutting everything above the fold in half while increasing the size of everything in the first half.

The same goes for desktops and tablets. Some monitors are set up on their sides (developers usually do this), and different monitors have different resolutions.

Although there’s no way to actually know how your visitors are viewing your site, you can do the next best thing: know the most popular screen resolution. In Google Analytics: Audience —> Technology —> Browser & OS —> Screen Resolution:

screen-resolution-google-analytics

Once you’ve determined the most popular resolutions, you can compare notes by viewing your site at those resolutions. In Chrome, all you have to do is open “Inspect Element” and click on the gear icon in the bottom-right corner of the screen. Once you’re in Settings, select “Overrides” and check the “Enable” box:

screen-resolution-google-chrome

Now you can easily toggle the viewing resolution of the page using “Device metrics”. How closely did what you put “above the fold” match up to what your visitors are actually seeing?

3. Know How Far Visitors Are Scrolling

Keep in mind that everything above the fold is just the tip of the iceberg, and everything below it is the majority of your site. In order to really optimize your content, you need to know just how far your visitors are scrolling, which can be a bit tricky.

One of the only disadvantages of a single page website is that it’s harder to track visitors. In a traditional website, you could easily see what pages are most popular. In a single page website, you need to rely on heat-mapping and mouse-tracking.

If you aren’t using either of those solutions, you can still rely on published statistics. It turns out that the majority of website visitors (~75%) begin scrolling before a page even fully loads. In other words, they can very quickly decide whether they want to see what’s below the fold. Nearly 90% of all visitors will wait until the page fully loads, and will see everything above the fold. But retention drops off very quickly after that.

scroll-depth-chartbeat

Image Source

25 million web sessions don’t lie. While people certainly don’t mind scrolling, they do have low attention spans. Only 30% of visitors will remain on your website by the end of the “second page” beneath the fold (1,500 pixels)–a staggering 300% loss. And by the end of the “third page”, only 13% remain.

Another chart shows that the average time spent on a site before abandonment beneath the fold is 13 seconds.

expected-engaged-time-scroll-depth-chartbeat

Image Source

Some marketers like to argue that the fold isn’t really all that important. I’d like to think these charts have convinced you otherwise.

4. Make Sure They Keep Scrolling Down

That’s not to say that there’s no hope for any content beneath the fold. There is–you just have to convince your visitors to keep scrolling. Different websites do this in a number of ways, from using page trails and staggered content columns to flat out asking readers to scroll down.

wordpress-page-trail

Example of a page trail
new-york-times-staggered-columns-design

Example of staggered content columns
example-of-a-fold-cta

Example of a fold CTA

The morale of the story? If you want readers to keep scrolling beneath the fold, you need to hook them.

5. If You’re Telling Your Story Right, It Might Not Matter It Still Matters

Just in case you still aren’t convinced that the fold is a big deal, check out this excellent post by Paddy Donnelly, which features unconventional site design. The post aims to convince readers that everything doesn’t have to be above the fold, and it does a great job of doing just that. One of the sites featured is 37signals, which had a single page website that totally defied conventions and pretty much ignored the fold completely.

But it’s a bit telling that, since Paddy’s post went live, 37signals has effectively killed that site design. Now the same page guides visitors to Basecamp, a classic “above the fold” webpage.

Which Side Do You Fall On?

Innovation is important. But when it comes to website design, living above the fold is the way to go. Sure, this could eventually change (like when we all start wearing virtual reality headsets where we can see more just by looking down). But in 2015, and for the forseeable future, mind your screen real estate.

About the Author: Alp Mimaroglu is a Marketing Luminary at Symantec. He specializes in marketing automation, demand generation, analytics, and marketing technology. Alp has extensive experience with both business and consumer marketing. He’s passionate about how technology is rapidly becoming the key to success in both the corporate sales and marketing landscapes. Follow Alp on LinkedIn and Twitter.

No comments:

Post a Comment