• 707.206.6211
  • christina@littlewingconnections.com
Facebook-f Instagram

Understanding Above the Fold and Below the Fold, Gaining Usability Insights

/ Education, Marketing, Media / By

Originally published on ConfluentForms.com on January 5, 2015 By David Kutcher.

Does the being Above the Fold matter any more, or is “Above the Fold” an antiquated concept?

Understanding Above the Fold and Below the Fold, gaining usability insights.image.1

Recently the question of Above the Fold has seemed to be under some new scrutiny, first in whether it is still a usability concept and concern worth investing time in considering, but then also in how much value we should ascribe to Above the Fold and Below the Fold when considering goals, user experience, and goal conversion behaviors.
And my own question regarding the Fold: how does this apply to your own website and actionable intelligence?

THE FOLD AND BEING ABOVE THE FOLD VS. BELOW THE FOLD

The term Above the Fold is a print journalism reference to the upper half of the front page of a newspaper where typically the most important news story or photographs are located. The reason why the most important content is shown in the top half of page one is that newspapers are often displayed folded in half to the customers, thereby making it that the top half was the only part immediately visible to customers, and the content that was used to immediately capture attention. (think newspapers stacked on top of each other, only the top half of the top newspaper is visible)
Content on the first page almost always leads to full articles contained inside the newspaper, so the articles and content that the newspaper believe are the most valuable to their audience, and hence would sell more papers, receive that higher position and greater page real estate. Information (stories, pictures) that is “below the fold” would still be receiving first page prominence, but would not be relied upon to be the most eye-catching or attention-gettiing.

HOW THE FOLD HAS INFLUENCED WEB DESIGN

Translated to the web design field, above the fold refers to the content visible to the viewer in their web browser before they are required to scroll down the page. Above the Fold is the information immediately shown to the user on their screen without any action on their part when they come to a website or web page.
While the fold in the print world was geared towards the selling of the newspapers, the fold in web design stems from the assumed need to quickly capture the viewer’s attention, and the fear that if the visitor doesn’t see something that interests them immediately that they’d quickly go elsewhere (in web parlance a “bounce”). The Above the Fold content on the web is used similarly to the print world in that it is often the most engaging, while quickly funneling the visitor deeper into the site or further down into the page.
On the negative side, fear of the fold has made designers attempt to avoid burying content,or trying to cram content and action items into the area above the fold.

THE FOLD IN A RESPONSIVE WEB DESIGN WORLD

Traditionally the fold in web design has been pegged to the most common monitor/browser dimensions in use, ranging from 1024×786 pixels to 1280×1024, subtracting the browser navigation bar, window elements, and scroll bar. Conservatively, the fold would be around 1000 pixels wide and 600 pixels tall.
But in a responsive web design world, where often times as many if not more people are visiting a website from a small device such as a smart phone or tablet, the dimensions of the fold vary greatly. For example, while 1024×768 was the most common screen dimension for our website’s visitors, the second most popular screen dimension was 320×568 followed by 360×640 and 320×480.Understanding Above the Fold and Below the Fold, Gaining Usability Insights.image.3
The needs of each of these device types, visitor needs/behaviors, and screen dimensions has significantly different requirements and limitations, as well as how to best capture the visitor above the fold.

STUDIES SHOW: EVERYBODY SCROLLS

 When visualizing the fold, it creates in the mind the idea that content below the fold is overlooked by the visitor, that below the fold has a significantly lesser chance of being seen by the visitor… that below the fold is akin to falling off of a cliff in visibility.

This can’t be further from the truth.
In fact, in various studies, data can be seen to support a variety of conclusions such as:

  • content soon after the fold can sometimes have a higher view and click rate than content placed at the very top of the page
  • users spend the vast majority of their time on-page above the fold
  • a large majority of web users scroll on a given page
  • a significant percentage of web users begin scrolling before a web page has even finished loading

content on any part of the page can have a high click rate, that user experience keeps the visitor scrolling beyond the fold, and that the calls to action were more a determination of visibility than the position above/below the fold
But what this amounts to is a mixed bag of directions that fail to provide clear, consistent direction for how you should present your content, or the type of user experience you should adhere to in order to yield the highest level of engagement and return. It’s enough to cause you to choose a direction based on your own intuition as opposed to researched directions… and another reason why so many people throw up their hands in confusion when looking at web statistics.
 

PROMINENCE, VISIBILITY, and ATTENTION SPAN

Understanding Above the Fold and Below the Fold, Gaining Usability Insights.image.2While we can get lost in the details of the Fold from a positioning standpoint, I believe that the concept of the fold extends beyond the physical constraints. Sure, we can continue to take the fold literally as “viewable before scrolling”, but in today’s web design world, I believe the concept is more importantly about Prominence and Visibility, akin to the original intent of the newspaper fold.
 
What are we giving prominence to, are our visitors seeing what will interest them, and is it helping us sell the actions and goals?
Depending on the study that you read, you have between 8 and 15 seconds to capture the attention of your visitor, to convince them to read further, to convince them to read and not skim, to convince them to go somewhere deeper into your page/site, or to give them an action to perform.
8 to 15 seconds.
If we begin to think of the Fold, not in screen real estate terms, but in the attention-getting terms (top half-page of newspaper = first 8-15 seconds on web page), a different picture begins to emerge in defining the capture and engagement of the visitor.
With this in mind, it becomes necessary, if delving into the success factors of a page, to look at a number of vectors together such as:

  • length of active time on-page
  • scroll depth (at what % of the total page height are visitors abandoning/leaving)
  • visibility of action/goal objects
  • click-through rate of visible action/goal objects

These different vectors can provide you with a deeper, holistic view of a user’s interaction within your web pages. For example, it enables you to go beyond a click-through percentage, and instead look at click-through rates when the call to action was actually visible to the user. It goes beyond abandonment rate, and can provide you with at what point visitors were abandoning and after how long.
More recently we have written an article entitled Embracing a Slow User Experience that delves into the idea and reasoning of blowing past the Fear-Uncertainty-Doubt caused by the 8-15 second stop clock. This article itself is over 2500 words, with just one picture at the top. But guess how long the average visitor spends on that page? Over 8 minutes. Yes, you read that right. Over 8 minutes.

ACTIONABLE INTELLIGENCE ON THE USER BEHAVIOR REGARDING THE FOLD

Before delving into the tools below, please first read about our Magic 8 Ball Approach to Google Analytics as well as Website Actionable Intelligence and Goal Acquisitions. If you need assistance with Google Analytics please read our service offering on Google Analytics and Webmaster Tools for ROI.

Some tools to use:

The tools above are customizations and extensions that you can add to a standard Google Analytics installation. Starting with the Events and Goal setup in your Analytics, the other plugins add onto the events and provide data for interpretation.
Waypoints JQuery plugin [link]
“Waypoints is the easiest way to trigger a function when you scroll to an element.”
This plugin is a javascript/JQuery library that enables you to trigger a function, or in this case push a Google Analytics event, when an element reaches a position on the screen.
Scroll Depth plugin [link]
“Scroll Depth is a small Google Analytics plugin that allows you to measure how far down the page users are scrolling. It monitors the 25%, 50%, 75%, and 100% scroll points, sending a Google Analytics Event at each one.”
“You can also track when specific elements on the page are scrolled into view. On a blog, for example, you could send a Scroll Depth event whenever the user reaches the end of a post.”
This plugin enables us to test the depth of the readership’s engagement with all pages within the website, and see the drop off rate. The percentages are provided, as well as calculated pixel depth, which enables you to see the information for responsive pages where the length of the page will vary greatly, and with the user timing information enabled you can also see how long it took readers to reach each percentage point in the page.
Riveted plugin [link]
“Riveted [measures] the amount of time users are actively engaged (e.g., clicking, scrolling, using the keyboard) and then reporting the data to Google Analytics in frequent intervals.”
Google Analytics’ time tracking of visitors on your pages and within your site can be significantly misleading. What this plugin does is report actual active time on your pages, which can be correlated with your other reporting.

USING DATA TO COME TO YOUR OWN CONCLUSIONS

I hope at this point it is obvious that Above the Fold and Below the Fold mean more than just the content available on the screen before scrolling. While external research is important to read, it is more important to learn how to test your own site/pages draw your own conclusions, and make changes as necessary to improve your site. Rather than assume the fold behavior is occurring and you have a huge drop off at the fold, or assuming that everyone is scrolling, what is most important is that you are open to formulating your own conclusions based on the actual behavior in your site of your own visitors.

EXTERNAL LINKS AND REFERENCES

The web pages below have contributed to this article, either in providing statistics, background information, or valuable functionality.