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 questions regarding the Fold: How does this apply to your own website and actionable intelligence? How do we keep the reader's attention beyond the above the fold area?
The Fold and being Above the Fold vs. Below the FoldThe 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 before the bounce or exit)
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-getting.
How the Fold has influenced web designTranslated 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" or "bounce rate"). 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 worldTraditionally the fold in web design has been pegged to the most common monitor/browser dimensions in use, ranging from 1024x786 pixels to 1280x1024, 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 1024x768 was the most common screen dimension for our website's visitors, the second most popular screen dimension was 320x568 followed by 360x640 and 320x480.
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 scrollsWhen 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 SpanWhile 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, to give them an action to perform, or to keep them from bouncing from your site all together.
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.
One of the troubles in measuring this attention span, resulting in the oft-quoted 8-15 seconds, is that a bounce on a piece of content registers as 0 seconds, as does a much longer view where the visitor might read your entire 8 minutes of content but never click to the next page. Because they didn't click anywhere, or send a signal to Google of engagement, the viewing time registers as 0 seconds. If your content has a significant percentage of bounces you might be getting a view of your visitors' attention span that is colored by aggregate data and Google's means of measuring the time on page. Learning more about Bounce Rates in Google Analytics will help you parse you data on this more effectively.
Actionable intelligence on User Behavior regarding The FoldBefore 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:
- Google Analytics Events and Goals
- Waypoints JQuery plugin
- Scroll Depth plugin for Google Analytics
- Riveted plugin for Google Analytics
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."
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.
Curious to see an example?
Using data to come to your own conclusionsI 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 ResourcesThe web pages below have contributed to this article, either in providing statistics, background information, or valuable functionality.
- Life Above and Beyond the Fold [moz blog]
- Everybody Scrolls [HUGE blog]
- 5 Factors of Viewability [Google Think blog]
- Scroll Depth plugin [parsnip.io]
- Riveted plugin [parsnip.io]
- JQuery Waypoints [imakewebthings]
- How long do users stay on web pages? [Nielsen Norman Group blog]
- What you think you know about the Web is wrong [TIME]