Above The Fold and Interaction Cost

There has always been a lot of talk around that nerdy corner of the website building community that is constantly discussing web design trends and best practices about a buzzword as old as the printed word – “the fold”.

The fold is a term that originated from newspapers – where the most attention-grabbing stories or images were on the top part of the paper, before it was folded in half for stacking.  This encouraged people to buy the paper based on that first impression and was actually successful (see any tabloid sitting at the checkout lane in your local supermarket).

The History of the Fold

When websites started gaining popularity in the 90s, designers incorporated this idea based on the fact that there were only a few browser (or even monitor) sizes to build for.  However, as time went on, this evolved into the business of cramming as much content as you can above a certain place on the screen.  This still wouldn’t have been detrimental except for the fact that in the last 10 years or so, there has been no place on the screen to identify as “the fold” anymore.  There are now thousands of screen sizes thanks to the sheer variety of devices and monitors. 

What might be considered “above the fold” on a 27” iMac wouldn’t be remotely visible on an android tablet or Pixel phone or even a normal-sized Chromebook.  Thanks to a variety of tools and a few standards to work with, we can do a limited amount of testing, but the reality is that, as developers, we’re always going to be aiming for getting things to look good on as many devices as possible and not for 100%. 

Now, that isn’t to say that that first impression isn’t important anymore – it most certainly is.  Even though the location of the fold will vary from screen to screen, a good website will have multiple points where it will adjust itself to fit the most important content where it needs to be – front and center.  But the purpose of this content needs to change from “get everything and anything to the top” to “entice users to scroll to more relevant content”. 

Consider The Fold a Different Way:

Interaction Cost

If everything, including the call to action is visible above the fold, users have very little interaction cost to process the information and make an informed decision.  Interaction cost, according to Neilson Norman Group, is the sum of efforts — mental and physical — that the users must deploy in interacting with a site in order to reach their goals.

If there is any content further down the page that is intended to help support a decision, it’s lost on users because we are telling them that they need to make the decision first, without any supplemental information.  There is no investment for the user, and certainly no motivation for them to seek out additional supporting content to reinforce their decision.  When users fail to see information of value, they stop scrolling and ultimately leave.

Alternatively, if the initial content is enticing enough to encourage users to continue on and they have to make a physical effort to reveal more content (scroll or click), then they have made an investment of their time into finding out more about your product or service and are more likely to make a decision.  

Designing for Interaction Cost

Webpages need to build a solid narrative throughout the page and even site by encouraging users to scroll or click towards content to reinforce their potential decision and draw the user in.  From a marketing standpoint, this gives users the opportunity to further engage in the content and for you to call out more important information that you couldn’t fit at the top of the page.  From a designer standpoint, this gives them the opportunity to create much more compelling visuals on a broader canvas. 

Further, in usability testing, more and more users are scrolling down right off the bat in order to get a “lay of the land” of the site or to move past objects that have taken up large amount of the header space (large spanning images or carousels are overwhelmingly “drive-by’s” anymore, especially if they take any more than a second to load).

Does The Fold Matter?

There are most certainly designs that successfully offer little at the top of the page that encourage users to scroll through and learn more.  A good design will not worry about the fold and encourage that interaction cost by offering interesting content, a compelling introduction, and engaging imagery without being overwhelming.  Good designers are aware of the concept of the fold, but understand that it’s not in a particular place, and so they need to develop a user experience that leads the user to a payoff.

“The issue isn’t whether your call to action is visible.  The issue is whether your call to action is visible at the point where someone has become convinced to take action.” – LukeW, www.lukew.com

And finally, here are some fun websites to explore to help illustrate the point:


Have questions about web design or websites in general? Check out more articles from our blog or don’t hesitate to reach out to us!  We would love to grab a coffee with you and see how we can help your business’ website succeed drive more traffic!

Currently Listening To: