How Relevant is Above the Fold Design? - Hallam Digital
17176
single,single-post,postid-17176,single-format-standard,ajax_fade,page_not_loaded,,select-theme-ver-3.1,wpb-js-composer js-comp-ver-4.10,vc_responsive
fold

How Relevant is Above the Fold Design?

‘above the fold’ when designing a site. However, whilst this might have been true once, back when scrolling down a page was something users were less inclined to do, the way that we access and use the web has changed. Now, we browse via a myriad of screen sizes and devices on which above the fold appears in different places.

This means that unless you design for each and every screen size out there, it’s all but impossible to determine where the fold actually is.

This isn’t the problem that many new designers might imagine it to be. Back in the 90s, designers had a habit of cramming everything above the fold as we didn’t have a scroll wheel on a mouse. For many users, this meant that in order to scroll, a lot of clicking had to go on, unless they used the keyboard arrow keys (which many users still don’t even now).

Now, we have touch devices that allow us to scroll with a swipe, as well as scroll wheels on input devices. And it seems that we don’t mind scrolling; a study by Chartbeat found that when analysing data from 2bn web visits, 66% of the user’s attention is spent below the fold.

fold

Image Source: Time Magazine

Cramming too much content in above the fold these days is counterproductive then. If a designer does this, then they risk creating a design that’s busy and cluttered. And when that design is displayed on a mobile device, this is even more the case.

Designing for the Modern Web

Whilst it’s not essential then for all of your important content to appear above the fold, you should still take care to craft content in such a way that the user is presented with important information and an understanding of the actions that they are required to take. This means that whilst you can limit what is placed above the fold, you should also make sure that clues are in place for the user so that they know to scroll down.

fold2

For example, have a look at the screenshot above for cloud storage company Dropbox. The content that appears above the fold here tells the user all that they need to know in order to sign up for the service. Depending on the screen size of the however, clues are in place to encourage scrolling if the user wants further information. On the screen, you can see that part of the CTA button shows above the fold, but not all of it. This, along with the scroll bar at the side of the screen, tells the user that there’s more content below should they want to access it.

Horizontal Bars

You should take care when using horizontal bars on a web page as studies have shown that they can act as a barrier to scrolling. This is what CX Partners found when studying holiday company First Choice’s site.

fold3

Image Sources: CX Partners

As you can see, the blue ‘accommodation’ bar does suggest that there’s further content below, but still proved to act as a barrier and this affected conversions. In order to overcome this, the bar was removed and the edges of other content was shown in its place. This demonstrates to the user that there’s more below and that they should read on.fold4

With this in mind, it’s worth A/B testing what appears on the fold rather than just above it.

The 80/20 Rule

Whilst it’s true that the modern user is not overly concerned with having to scroll, you should still bear in mind that it’s thought that above the fold content still grabs 80% of our attention and below the fold 20%. This sounds contradictory, but really it just means that you shouldn’t be concerned with cramming all information into the above the fold area, but should craft the page so that the most important information appears above the fold.

For the designer, this means prioritising.

fold5

Looking again at the Dropbox landing page, we can see that it contains three CTAs prompting the desired user action, marked on the image in red circles. These are relatively subtle thanks to placement, with two on the top bar and one main CTA form and button. The button appears on the fold so that the user is aware that they have to scroll down.

The imagery used – marked with the large arrow – illustrates the fact that the service can be used across device and this is further illustrated by the text. It’s a very simple page, but it does what it’s supposed to very well.

For users that don’t feel that they have enough information to sign up for the service, there’s plenty more information below the fold to provide further encouragement.

This is a well-designed page that a lot of thought (and no doubt A/B testing) has gone into and is a great example of how simple design can work to your advantage. The image is clearly light, so will load quickly on mobile devices, the form is short and so won’t put users off and more information is readily available if necessary.

When creating your own design, ensure then that you use imagery that communicates to the user what the product/service is all about as well as text.

Designing for above the fold then is still relevant, but not in the same way that it was when we were all accessing the web on desktop. Now we have more devices and as such more to think about, so it’s important that you craft content so that the most pertinent information appears above the fold, but that it’s also kept simple, and fast across devices.

No Comments

Post a Comment