Above the Fold Optimizations for Ecommerce

Video: Above the Fold Optimizations for Ecommerce

If nothing else, visitors will see the “above the fold” area on your site. Users won’t scroll unless they need to, so try to give them the most useful, relevant information in the top part of each page. We’ll walk through why the fold matters and examples of designs for the homepage, category, and product pages.

In this video you will learn:

• Why the fold matters
• How to optimize the fold for different devices
• Examples of above-the-fold designs for different page types

Transcript

Hey there. I’m Lauren. I’m a conversion specialist here at Command C and today we are looking at how to optimize above the fold. How can you hook visitors with your prime real estate?

You are going to learn:

• Why the fold area matters
• How to develop the fold for different devices, desktop and mobile mainly
• And examples of above the fold designs for different page types.

Why Does the Fold Matter?

Nielsen Norman Group says that, “The fold matters because what appears at the top of your page matters. Users do scroll, but only if what’s above the fold is promising enough. What is visible on the page without requiring any action is what encourages us to scroll.”

Continuing from Nielsen Norman Group, they also mention that users don’t scroll for fun. They scroll for a purpose. If a user can get all of the information they need on that first screen, there’s no reason for them to scroll. But as we know for most ecommerce pages, we can’t fit everything above the fold. We have to pick and choose what goes where.

In a Google study, they found that the drop off caused by the fold was 66% and Nielsen Norman Group found that 84% is the average difference in how users treat info above versus below the fold. That’s a really big difference there.

Homepage Above The Fold Designs

Here we can see an example of the homepage area above the fold for Function of Beauty. This is a beauty company, and if we don’t scroll at all, we can get quite a bit of information.

It mentions that the last chance to get gifts on time with free standard shipping. We know that they offer free shipping. We know that they are a leader in customizable beauty, 100% custom hair, skin, and body care, and then call to action to take their hair quiz. And then you can see some information up here in the navigation. Then there’s also this vegan cruelty free badge. And all of this information shows both on desktop and on mobile. That’s really useful. If somebody is brand new or maybe clicks an ad that links to the homepage, they get quite a lot of information above the fold here.

Again for the homepage, so this is Bite. They were known for toothpaste bits, and now they have branched into plastic free personal care. You can see their value proposition above the fold, which is plastic free personal care made without compromise. And then a shop now call to action. You can see some of the products that they offer as well as social proof here with all of the, as seen in logos.

And then on mobile, we have a lot of that same information. The different products they offer, the value proposition is a little bit different. Here it says, “Bye plastic. Hello Bite.” And on mobile, this text here, your mouthwash reinvented, this actually changes. It’ll say your mouthwash, your toothpaste, et cetera. This will switch to talk about the different products they offer. You have the call to action. And then down here, you have the, as seen in section that also features quotes from those publications.

Both of these are showing quite a lot of information in this real estate here. It gives visitors a lot of good information to decide if they want to keep shopping and look more, or if they’re not so interested.

How Blue Bottle Does Category Pages

Next for the category page, for Blue Bottle. If you land on a category page, this is what you’re going to see. You get this free shipping on coffee subscriptions and all orders over 35 at the top here. You can get some information on what they offer. Subscriptions, holiday locations, coffee brewing, gift cards, holiday collection, and then you see some of the products that they offer. And you have an enticement to scroll because you can see that there’s more products below the fold. And then the filters are also located right at the top as well.

On mobile, it’s pretty similar that all the navigation links are hidden behind the hamburger menu. You see a few of the filters, so these are most likely their most popular filters. You only get two here and then you get three products that are displaying depending on the screen size and then an enticement to scroll. Because you can see that there’s more products here. This is a typical category page, but sometimes you do want to make sure you don’t have too much text describing the category, which can often push products where they’re not visible above the fold. Just make sure your category pages are at least showing some of the products above the fold to give visitors an idea of what you sell.

Bad Habit’s Info-Packed Above the Fold

For the product page, we can see for Bad Habit, they show quite a lot of information on desktop above the fold. They have all the product images, reviews, pricing, and then some useful information about the product. A couple bullet points here, the call to action and then links for details, how to use an ingredients. They really pack a lot above the fold here. Visitors might not even need to scroll at all, because there’s so much up here. And then on mobile, quite similarly, they have a good amount of information, reviews, product name, pricing. And then the beginning of the description here. Users do have to scroll down a bit to get some of this other information like to call it action or product details, but they do a good job of packing in quite a bit above the fold without it being too overwhelming.

Consider Mobile When Optimizing Above the Fold

And then lastly for Bliss, this is another product page example. I just wanted to show how a focus on desktop and not double checking on mobile can cause a different experience for the above the fold section. You can see a big difference here between desktop, which packs a lot of useful information like reviews, additional product images, descriptions, sizing information.

And then on mobile, that experience is not translated. Here you can see the gallery isn’t really showing properly. It’s taking up the whole entire above the fold area, which means that visitors can’t see anything else. You can’t see the product name or pricing. You have to scroll down. You can’t get enough information just looking at the above the fold section.

This is just an example of just making sure that you’re not focusing only on desktop, which is easy to do since we are working on desktop a lot. Just make sure that you’re above the fold section on mobile also features some of this information.

All right. Hopefully you’ve got some ideas from these above the fold sections and you’ll take a look at your website, try to see what’s displaying and what information users can get without needing to scroll. And maybe you’ll come up with some test ideas that you can run. I will see you in the next video. Thanks.