Inside the community of web designers, debunking the myth of “the fold” has been a consistent labor of love for years now (it’s losing ground to the carousel/slider antipattern).

Most folks understand that the concept of “the fold” comes from print, and that there are different screen sizes, and that it doesn’t directly translate. There’s plenty of questions that start there, though.

  • People are too impatient to scroll, right?
  • Isn’t content above the fold more important?
  • Doesn’t the call to action need to be above the fold?

Too often, us web folks are guilty of just yelling and rolling our eyes in response. Truth is, these are totally valid questions that just need a little context and sorting. I’ll give you clear answers and link you to some of the best articles.

Do people scroll?

Yes. Stop worrying.

Scrolling is natural and common for users now. Think about it: would a Mac operating system (Lion) opt to remove scrollbars entirely if it wasn’t a pretty common thing? I scroll, you scroll, we all scroll. There’s a bunch of articles that give you research to support it.

Now, you can encourage scrolling by making it obvious that there’s more content than is being shown on load. You don’t need to add arrows or text that says, “Scroll down”. Instead, you can make things look “cut off” to hint at the remaining content. This means little more than checking common viewport resolutions and ensuring none of them look totally complete on load.

Applying this research and logic, some of the newer designs that are full-screen on load with only text and a button in the middle would not encourage scrolling.

Is “above the fold” content more important?

Well, yes, but not because it’s above any “fold”, per se. It’s because your content should always be organized by importance to the user. As I cover in one of my talks, you’ve got about 10 seconds to make a value proposition, as users will read about 20% of the text on a page—if they stick around after an initial reaction to design and loading speed.

"...the distribution of user fixations along stripes that were 100 pixels tall. The bars represent total gaze time, as opposed to the number of fixations."

“…the distribution of user fixations along stripes that were 100 pixels tall. The bars represent total gaze time, as opposed to the number of fixations.”

For a pretty definitive understanding of the data behind this, the Nielsen Norman Group spells it out for you. They tested back in 2010, based on the then-common resolution of 1,024 x 768. The most popular now is 1,366 x 768—so, same height, but more width. In their eyetracking studies, they found user viewing time was distributed like so:

Above the fold: 80.3%
Below the fold: 19.7%

You can see from the graph on the right, though, that there’s not an incredible change in the trajectory of viewing time as it crosses “the fold”. Now, imagine that everyone wasn’t on the same screen; the difference starts to fade.

The biggest takeaway?

People will look very far down a page if (a) the layout encourages scanning, and (b) the initially viewable information makes them believe that it will be worth their time to scroll.

That’s crucial to understand, and leads well into the final point.

Should the call to action be above the fold?

Maybe. It definitely shouldn’t be hard to find, or after an extraordinary amount of boring copy.

To get the full experience, read one of KissMetrics’s posts on the topic. Definitive, exhaustive, or conclusive? Not necessarily, but it proves the larger point quite well with some data and common sense.

Higher conversion rates have nothing to do with whether the button is above the fold, and everything to do with whether the button is below the right amount of good copy

That’s the ticket. If folks are ready to convert when they get to you, or they don’t take much convincing, of course you should have a call to action above “the fold”. But, if folks generally need convincing, putting the call to action up there could actually hinder your conversions.

Now that you’ve separated facts from common practices, you can make better decisions for your layout. You’ve ensured:

  • users know to scroll on load based on the design.
  • the content is good and is ordered properly.
  • the call to action is in the “right” place.

And now, you can start testing and optimizing your way to more success.

Want blog posts sent directly to your email?

Sign up to get emails from Logos Creative! You'll get the latest blog posts and an occasional extra email. Unsubscribe (easily) at any time.

February 14, 2014 — Leave a comment — In Blog, Design, UX