Before You Design for ‘the Fold,’ Run This Test

“Above the fold” is a newspaper term to describe front page content that’s visible when the newspaper is folded. The strategy is simple and ubiquitous: Big stories go above the fold, where customers can see them easily.

In digital, above the fold describes what visitors see on your webpage before they scroll down. During the early years of the internet, conventional wisdom followed that of newspapers: the most important content—that is, whatever we want readers to engage with—should be above the fold.

Before we could watch the latest movies on our tablets and order groceries from our phones, most of us used the same type of device to browse the internet—a desktop with a standard-sized screen. (And as some of you may even remember, we used a little browser called Netscape Navigator.)

The range of pixels falling above the fold was relatively fixed. Putting the most important content there was relatively easy.

Today, the digital fold is trickier to pin down. The content that falls above the fold on a 27-inch external monitor is different than the content that falls above the fold on a 13-inch laptop.

And it’s not just screen size. Resolution—the number pixels your screen displays—affects what a user sees.

Here’s the Brooks Bell homepage on a 24-inch monitor with a 2560 x 1440 resolution:

Here’s our homepage on the same monitor with the resolution set to 1600 x 900. Note the block of copy that is no longer visible:

Scrolling is a thing

Discrepancies like this are usually dismissed by designers and content strategists alike.

With trackpads and mouse wheels, it’s easier and more intuitive than ever to scroll down the page, they say. Plus, responsive design is fluid, with websites adapting to the visitor’s device.

Indeed, user testing shows that people do explore below the fold.

So does the fold even matter anymore?

In a word: yes.

In a few more words: yes, but not for the reasons you may think.

What’s above the fold matters because it influences user experience. People will explore what’s below the fold as long as what’s above is compelling and relevant to them.

It’s about “interaction cost”—the mental and physical effort a user must exert on a site to achieve his or her goals.

• Above the fold (visible) has a low interaction cost because it requires minimal effort
• Below the fold (invisible) has a higher interaction cost because it requires mental effort (“Is important content below the fold?”) and physical effort (scrolling down the page)

So if your above-the-fold offering is appealing enough, it is likely that your visitors will scroll down.

And design is just as important as compelling copy. You must give visual cues that encourage scrolling.

If the design of the page creates a false bottom, your users will think they’ve reached the logical end of a page—even though there may be more content below.

To add depth to a page, make sure the pictorial depth of page elements escorts your visitors down a site so that content isn’t left unseen. A site like Mashable creates interlocking content modules, signaling to users that more content will be revealed as they scroll down the page.

So what’s actually above the fold?

By doing some research, you can figure out what your users see when they visit your site. This can help you evaluate just how compelling your visible content is and determine if your design promotes scrolling and exploration.

Your analytics program can reveal the most common browser and device your audience uses, but there are a lot of things it can’t tell you, such as resolution or how the browser is sized (fully expanded, resized to stack vertically, etc.).

This is where testing comes in.

Running a brief monitoring campaign can uncover valuable information that your analytics program may not be currently set up to track. In this case, you’re on a fact-finding mission, and the “test” is essentially the control experience.

You can develop custom metrics within your testing tool to define:

• Users’ viewable screen size
• Hover and/or scrolling behavior
• Countless other metrics that would burden your analytics tool over a long period of time

Alternatively, instead of pushing these metrics into your testing tool, you could push them into your analytics tool. If you use one of the most common enterprise-level tools, Adobe Analytics, you could utilize Custom Links to define these metrics. Either way, you’ll need custom code to make it happen.

How you set up the test depends on the information you want to capture and which method you’re using.

In terms of viewable screen size, if you’re using your testing tool, you could send through each value of a metric. However, that could get difficult, because you’re setting up many custom metrics. You may decide instead to group the viewable area metric (e.g., a range of pixels) to lessen the workload. Within your analytics tool, sending through specific sizes may or may not be an issue.

In terms of other metrics you can set up, you’re only limited to what you code. It’s preferable to code in hover states and scroll metrics within the testing tool. Doing this within Adobe Analytics would cause far too many calls and metric pushes into the tool.

Pushing these with the testing tool will allow you to designate the duration and to even throttle traffic accordingly. The point is to get as much information as you need to answer the questions you have.

A new way of thinking about the fold

If your visitors aren’t interacting with important information below the fold, don’t just move things up. Don’t think about a redesign.

Start with your visitors: their needs, level of awareness, state of mind. Then investigate exactly what they see when they come to your site.

And if you have equal engagement above and below the fold—or if it’s enough to meet your business goals—then I’d argue that you don’t really have a fold.

Leave the newspaper terminology to the ones who have this issue, and concentrate instead on improving your entire customer experience.

What is your experience with the digital fold? Do you consider it to be a factor in your design? Share your thoughts in the comments below.

A.J. Bikowski is an optimization designer at Brooks Bell. He utilizes his background in digital design and user experience to create user-friendly interfaces.

—

Brooks Bell helps top brands profit from A/B testing, through end-to-end testing, personalization, and optimization services. We work with clients to effectively leverage data, creating a better understanding of customer segments and leading to more relevant digital customer experiences while maximizing ROI for optimization programs. Find out more about our services.