As a number of usability studies have shown recently, the fold on a webpage doesn’t have to be a barrier to users, and people are willing to scroll down to see more.

However, the area above the fold is the first thing visitors to your website will see, so what should be above the fold? Here are a few suggestions, with e-commerce sites in mind…

According to this insightful article from cxpartners, having watched more than 800 user testing sessions, the fold was only seen to be a barrier in three of them, which is a pretty convincing statistic.

Of the three cases where the fold was seen to be a barrier, a strong horizontal lines across the page, roughly around the fold area, was the culprit.

It’s clear that the majority of web users are used to scrolling to see more content. For instance, most newspaper sites, especially the Daily Mail, require plenty of scrolling to see the entire contents of the homepage. 

Why is the area above the fold still important?

This is what new visitors will see the first time they arrive at your website, and will have an influence on whether they decide to explore further or not. 

Web users will often make a decision on whether to continue based on what they see above the fold, so this needs to let them know what the site is about, or if they have clicked through from a search ad, to find the product they have expressed an interest in. 

Another thing to consider is screen resolution, as this will affect how much visitors see above the fold, as will the choice of browser, as add-ons, bookmarks and toolbars can all affect the visible portion of your webpage.

With this is mind, it is advisable to make sure crucial information, links etc, are well above the fold, so that the maximum number of users will see them. What is visible above the fold also serves the purpose of drawing customers into scrolling further down the page.

What should be above the fold on an e-commerce site?

Homepages

  • Navigational links and site search. Obvious, but users need to see this above the fold to move further into the site.
  • Key information and customer updates. This could be updates on Christmas delivery times, or information on whether or not deliveries are affected by the Royal Mail strike.
  • Merchandising. Depending on the kind of e-commerce site, you may want to display the latest clothing range, as on a site like ASOS, or have a rolling display of products like Comet. Either way, the most important products will be shown above the fold.
  • Delivery offers. Free delivery offers are excellent sales drivers, so giving them prominence above the fold makes perfect sense.
  • Basket / checkout links. Users will expect to see this link in a prominent place, which usually means at the top right of the page. This applies to all pages of the site.

Product pages

  • Product description and price. And, for catalogue retailers, product codes.
  • Review summary. While most sites will place the detail of reviews below the fold and shoppers can scroll down for this, a summary of the average review score deserves a prominent position.
  • Product photos.
  • Call to action. The checkout or add to basket button
    should be unmissable, which means placing it above the fold where
    people are guaranteed to spot it. In the example below from John Lewis,
    the call to action is below the fold, meaning that users have to scroll
    down for it.

    This is not the case with most products on the site, and I’m sure most
    people will be able to figure it out, but on other sites, as described
    in the Purdys example from this article, this could have customers doubting whether it is a transactional site.

    A more prominent link, higher up the page, as on the Comet product page, should remove any such doubt:

  • Stock availability. This is a key piece of information, and also a potential sales driver, as it can help to create a sense of urgency in the customer’s mind.
  • There are more than 30 things in total that we like to see on product pages.

Checkout process

  • A contact number or link to contact information. This provides reassurance for the customer, as well as a quick way to get any problems or questions dealt with.
  • Security logos. Another way to reassure customers about transaction security.
  • Progress summary. This shows customers how many steps they have completed, and how close they are to completing the purchase. 

This is by no means an exhaustive list, so any suggestions for other above the fold essentials are welcome…