What’s with the fold?

Above the fold – what is it and where does it come from?

Above the fold is a term that was initially used for upper part of the newspaper front page. With newspapers folded in half in newspaper stands or vending machines, above the fold was their most visible and most important part - the only way to catch people’s attention. That’s why, even nowadays, above the fold serves as a teaser and invitation, and contains big headlines with the latest news or eye-catching photos or drawings related to the hottest information in the newspaper.

These days we mainly use this term for a part of the page displayed on the screen without scrolling. At the beginning of digital technology era, it was very easy - screen size was standardised and it meant always the same, today we use from big TV screens to small smartphone screens and what is more, sometimes they're vertical sometimes horizontal. How do we know where the fold is and where to put most important content in this case?

Well ... the answer is to forget about the fold!

The myth

Let's start from the beginning. In the 90s a personal computer was an entirely new device used mostly by people with analogue habits (notice that even today not everyone is an IT master). The standard screen size was 800x600, UI and UX were yet to come, and a scroll bar or scrolling itself was far from being intuitive to the new users. It was very natural to apply the same rules used in editorial design to its new digital version. Back then we had to grab a user by the hand and guide him through this new, strange and unknown environment.

So why the above the folding rule? In the late 80s AOL, USA’s biggest internet service provider, did not permit vertical scrolling. That made a great impact on a constantly growing number of users. Even though that decision was eventually changed, they were not used to vertical scrolling – a completely new action and gesture. Forcing a user to scroll down in order to get to an important information was considered a design failure. A cut off image was not seen as an invitation, but rather as a bug. That’s why it was crucial to show as many elements possible above the fold, just to make them accessible.

To sum up, above the fold has become an important rule mostly because of three reasons:

1. Marketing and advertising strategies were taken directly from newspaper and applied to a computer.
2. People weren’t used to computer interface, so they applied their old habits to the new technology.
3. This new technology itself was raw, inaccessible and hard to use with its numerous flaws and shortcomings.

OK, but what exactly is it about?

As mentioned before, at the very beginning "above the fold" meant "nothing below the fold". The whole page had to be displayed on the screen without scrolling.
Imagine your Facebook like that... Later it turned into "everything important" - but this sounds rather vague, doesn’t it? So let’s dig deeper.
Some elements should stay the same; like header, navigation – the basics. But some other elements should be placed anywhere but above the fold.
The idea for webpage design stays the same: keep your viewer engaged for as long as possible and encourage her or him to click, interact, sign up, agree etc. According to Above the fold rule elements such as CTA, adverts, banners, carousels, special offers, sale, news, contact or newsletter should all go on top, so they can be immediately spotted. Does it work? Well, not really, but it still took a few years for designers to understand that.

Screenshot from Apple homepage (taken in 1996).

Deconstruction

The Above the fold myth was based mainly on two assumptions:

1. People don't scroll
2. Content above the fold is read in 80% of cases, below the fold - only in 20%

You may say these two points address the same thing, but… not exactly.

What’s the difference? Click Tales provides a perfect answer. A team of Click Tale analytics conducted a series of tests proving that in fact people actually do scroll. Not only that, but they also scroll to the bottom of the page! Here are the results of this research:

91% of the page views were long enough to contain scroll-bar. Of those, 76% were scrolled to some extent.
22% of the page views with a scroll-bar were scrolled all the way to the bottom.
Visitors are equally likely to scan the entire page no matter the page size.

The fold is not a single location, but a broadly dispersed distribution with three peaks located at roughly 430, 600 and 860 pixels. These peaks correspond to the three most popular screen resolutions used today: 800x600, 1024x768 and 1280x1024, minus about 170 pixels used up by the non-client area of the browser. In other words, depending on the screen size, users will typically see at least 430 and up to 860 vertical pixels worth of information on their screens when they open their site, without having to scroll.

The same analytics at Click Tale prove that the most valuable space on your website, most likely to attract a viewers’ attention, is between 0 and 800px. How could that be?

In his article “Scrolling and Attention” Jakob Nielsen claims: Long pages continue to be problematic because of users' limited attention span. People prefer sites that get to the point and let them get things done quickly. Besides the basic reluctance to read more words, scrolling is extra work.

And yet CX Partners proved that users do expect to scroll. And that can easily be seen on the heat map test results.

See the red spot?

People’s behaviour and habits usually change very slowly (as Nielsen notices at the very beginning of his article), but in this particular case, they adapted very swiftly. The reason? Rapid technological development. No matter how valuable NN Group’s researchers are, we should always be aware of timing. Note that the article “Scrolling and Attention” was written in 2010.

Around that time the tech-hardware rock stars, also chosen by the early adopters (around 13-14% of the market), looked like this:

Photos provided by producers - Apple and HTC

[tweet_box]Today scrolling is inevitable, as it is a natural way of using every device - from PC to smartphone.[/tweet_box]
It has become a simple and natural gesture.

What is more, according to MOVR, if the mobile page doesn’t load quickly enough, many people start to scroll right away. 11% of users scroll if the page is not fully loaded; the longer the loading time, the more people scroll. Looks like there are users who don’t see above the fold at all!

Old research doesn’t necessarily mean dated. Human nature is rather still and people are as lazy as ever (or even more) – they will grab every chance to avoid additional effort. What’s changing is the context. But what we have to remember is that the context is changing. And here the context is technology. It’s hard to deny that people are scrolling when mobile usage still increases, smartphones having now become more popular than computers.

OK, now we know that people scroll. But what about Pareto principle 80:20? If only 20% of visitors will see the bottom of the page how can you put your CTA there?

The answer is simple. We draw wrong conclusions from the assumption that if something is visible it is also attractive.

[tweet_box]Every action a visitor takes on a website is like a contract. The more effort he puts, the more profit he expects.[/tweet_box] You have to remember that no one will sign up for your free newsletter just because it’s on the top of the page. You want me to agree to get regular emails and being on your mailing list? I need to be interested in your offer!

No matter real or virtual customer, the approach should remain the same. Before you ask for something you need, first prove that what you’re giving in exchange is worth your customer’s interest and effort. This article has a lot to say about that!

Conclusion

While gathering data, we need to be very careful and open-minded. What many of us tend to do, is focusing on a very narrow aspect and forgetting about the complexity of a human nature. Because that’s what it’s all about – human, not numbers or charts.

[tweet_box]You may forget about the fold but don’t forget about the logic.[/tweet_box]

The top part of the page is like a book or a magazine cover.
People eat with their eyes, surely they can make decisions with them as well. You need to focus on who’s your target group and do your best to provide easy to understand content, aimed specifically at that group.
Your customers have to know where they are, what’s your offer, and what can they get from your website.

Don’t try to please the whole world – you will lose by neglecting those who may potentially get really involved into what you offer.

Before you start designing your website, first try to think what is it about.
Don’t expect that people will pay full attention to a gossip website, or carefully read every single carpet description in your offer. It’s simply impossible.
Instead, you can give them a hint - divide your article with headlines, add pictures (if they’re relevant), let your visitors scan page first so they can decide if they want to go deeper. You’ll make their life easier.

Remember that if you want your visitors to click on a CTA button, they need to have a good reason to do that. Don’t put shouting red buttons on the top of the page - focus on how to convince a user that subscribing to your newsletter means gaining something in exchange.

Respect your visitors and you will be rewarded with their respect. If you won’t attack them with irrelevant content, they are more likely to return. And next time they will search for something interesting on your website, they may pay more attention to detail.

And finally, remember: everything changes, so when you think about data, always think about the context.

• UX