Prevent Anyone from Ever Saying “Above the Fold” Again


Heatmap Screensize

INTRODUCTION

You’ve probably heard the phrase “it should be above the fold” before. You might have heard it hundreds of times. It usually accompanies other common expressions such as “I think we should be customer-centric”.

This made me wonder: what does “above the fold” actually mean from your customers’ points of view?

The fold on your user’s browser depends on the type of device they’re on (i.e. screen size), which can vary greatly. So what does that distribution look like? Does 90% of your audience have the same screen size and therefore see the same fold?

 

 

METHOD

In order to make my case I took a couple of month’s worth of data from our Google Analytics account. Under “Audience” > “Browser & Os” > Select “Screen Resolution” as the Primary Dimension and then Add  “Browser Size” as a secondary dimension. You’ll already start to see the discrepancy between the Screen Size and the actual Browser Window size your visitors use to visit your site.

Then export as many rows as possible (5,000 by imports) into a Google Sheet and do the following:

  1. Separate the width and height of the browser size into 2 different columns alongside the number of users or sessions
  2. Create a pivot table with the width and height as columns and rows respectively
  3. Generate a heatmap by applying conditional formatting
  4. Export your heatmap

 

Here is what “above the fold” looks like from our users’ points of view:

There were 6,534 different browser sizes.

Heatmap Screensize Above the fold

You can see clusters on the heatmap that represent common devices such as iPhones or iPads.

 

CONCLUSION

This should end the debate on what “above the fold” means. Naturally, the first thing your customers see on a page is very important. But the risk with being obsessed with what goes above the fold, and competes for your user’s attention, is that it can lead to clarity issues. To find out more, please read our User Attention and Eye-flow Management Blog Post here >

above-and-below-the-fold

 

Explore more articles



About Edouard

Passionate about Conversion Optimisation, User Experience and Human Behaviours. Founded BaconExperiment.


Leave a Reply

Your email address will not be published. Required fields are marked *