{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

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...

Graham Charlton

Published 29 October, 2009 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

Comments (9)

Comment
No-profile-pic
Save or Cancel
David Williams

David Williams, Director of Online EMEA at Deckers LtdEnterprise

Really interesting article. We are going through a similar discussion at the moment, with more and more user generated content becoming more and more important against a product, it's getting to the stage that the product page is no longer the end of the journey pre-add to basket, but yet another 'home page' where all the information about making a purchase should be available to the consumer above that fold, but the links to further product information should be obvious above the fold, otherwise they may get lost.

Hence, anchor tags to information further down the page to me is becoming more and more important. Amazon, for all the higgledy piggledy design, does this very well. When was the last time on an Amazon product page that you didn't scroll down the page to read reviews, look at more product detail, return back to the initial product preview. All the call to actions are still above the fold in the same place and you know how to get back to them.

almost 7 years ago

Avatar-blank-50x50

Sophie Napier, Marketing & Finance Executive at Lightmaker UK

Great article - you focus on new visits...how about returning visits and current customers? (Product) personalisation on eCommerce sites is a great way of increasing "return" purchases - something Amazon and other eCommerce sites do really well.

Home page above the fold (Current customers - signed in)

- Recommended products

- Recommended special offers based on browsing habits

- Recently viewed products

Home page above the fold (returning vists - cookie based)

- products viewed on last visit

- Special offers based on last visit

- + all your points :o)

Personalisation, if done properly can really help improve UX and ultimately revenues/conversions.

almost 7 years ago

Steven Grech

Steven Grech, Principal Consultant - Head of Media & Services at Maxymiser

Posted the above comment (Marketing & Finance executive) through our other @Lightmaker account! @stevengrech

almost 7 years ago

Avatar-blank-50x50

Toni Anicic

There is NO fold on websites ;)

But we could rephrase it to something like "what should be closer to the top of the ecommerce websites". Anyways, useful article!

almost 7 years ago

Avatar-blank-50x50

Andrew Nattan - FirstFound

Excellent points raised. It's interesting to see my long-held suspicions about scrolling confirmed. I mean, everyone's got a mouse wheel nowadays!

almost 7 years ago

Avatar-blank-50x50

Laurent Christoph

For financial services, I would definately have an quick quote form on the homepage, above the fold.

Also recommend, in a bullet point style, your USP's, i.e. why customers should choose you over your competitors.

almost 7 years ago

Avatar-blank-50x50

Sarah Worsham

Landing pages have similar above the fold requirements as product pages... 

  • Offer description with clear benefits to visitor
  • Call to Action
  • Compelling photo or image
  • Links to more information (about offer, company, etc.)

 Also, I think contact information should be on every page above the fold. Sometimes you come to a site with an order problem and you'd like to contact the company without having to hunt for the info. Similarly, sometimes people want to call with a question or order over the phone. At least a phone number should be above the fold on every page, imo. Thanks for the article!

almost 7 years ago

Matthew Curry

Matthew Curry, Head of Ecommerce at Lovehoney

I'm not sure I entirely agree on the "There is no fold" thing.  It depends on your visitor base, the nature of your site, etc. Certainly from testing with a group of 80 year olds, as I tend to do occasionally, the fold is a very real thing, so we have to employ every technique in the book ( graphic cut-offs, teaser content, and a nifty "scroll for more widget") to encourage scrolling. I actually met CXPartners yesterday,  so it was intresting to have a chat about it.

I think that trying to fit everything in the article above the fold would be pretty hard. a good 45% of our user base are still on 1024x768, and taking whitespace into account, getting all that into the Homepage is going to be an issue!

The Checkout, however, is a whole other matter. If there's anything on your site that could be kiosked, that is it. You're meant to be removing distracting elements from this anyway, so it's an ideal scenario.

almost 7 years ago

Avatar-blank-50x50

Al Stevens

Very useful article - thanks for helping to clarify this often misused term.  One thing not covered here is the importance of providing some 'scroll affordance' in your design - a topic which is covered well in Revisiting "The Fold" - by Jeff Atwood

almost 7 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.