Conversion Rate Basics: False Bottoms

In this session we run through randomly selected websites on the web to look for opportunities to show you one of the important basics of website optimisation: false bottoms.

Disclaimer: Whilst having an understanding of the core principles of conversion rate optimisation is powerful, the blind application of ‘best practices’ is not recommended. False bottoms may not be the reason for low conversion rates on your site and so we recommend testing before making any changes. Alternatively, let us help you find the issues hampering your conversion rate.

Not able to watch right now or just prefer text? Below you can find a transcript of this video.

Today we’re going to be looking at something known as false bottoms, here’s what we’ll cover:

1. What are false bottoms?

2. How to spot false bottoms

3. What you can do to minimise the number of false bottoms that you have on your website and ultimately, move forward key metrics.

These key metrics such as time on page, bounce rate and pages per session are the micro conversions that, were they to be improved you would ultimately see your conversion rate move forward as well.

We’re going to be looking at a couple of different examples of websites that do have false bottoms to give you a clear understanding of what they look like. This will ultimately help you spot false bottoms on your own website. Then we’ll look at some examples of websites that don’t have false bottoms and that do effectively overcome this hurdle and drive higher engagement as a result.

So we’re going to start off with an explanation just of what false bottoms are. And in order to understand false bottoms, you need to understand the “fold”. This terminology comes from  newspapers. If you pick up a newspaper, you’ll see that a newspaper is generally folded in half. Half of the content of the front page of the newspaper is immediately visible. In order to see the rest of the newspaper, you need to unfold it to see what is below the fold.

This terminology was brought across to websites. Simply put, above the fold is everything that you can immediately see on a website without scrolling at all. Everything that we can see as we start scrolling is below the fold. So it’s a very simple concept. But it’s quite a powerful breakpoint on websites that if not used effectively can reduce user engagement, and can ultimately be the difference between a performing and non performing website.

It’s also important to note that folds exist all the way through a page, not just at the top of every page. So if I scroll a little bit further down there’s a new break point and a new opportunity to either drive users further down the page or not.

This is a random article that we found about female mariachi band players. And this is a great example of the a page that does not effectively drive the user down the page because of a false bottom. As the name suggests, a false bottom is simply a fold of a web page that  looks like the bottom of that page. And so if you’ve read Tim Ash’s book on landing page optimization, you will know that we have these three mental systems that impact the way that we surf the web. The psychological response that we are trying to inspire in our users is one of curiosity and interest. When you have a false bottom like this, even though we conventionally do understand that they should be more content, if I scroll down, there’s nothing on the page or near the bottom of this page that is immediately, piquing my interest driving my curiosity, and encouraging me to continue scrolling down this page.

That’s the danger of a false bottom, that we are not encouraging our users through an immediate visual cue to continually move down the page. If you do scroll slightly down this page you will see there’s a beautiful title here that really could be used as a interest garnering tool on this page, but it’s completely hidden from me as I land.

When reviewing this article you’ll notice is that your eyes are drawn up to the navigation. You may be more inclined to use the navigation and hop onto a different story than you are to actually scroll down on this page and start reading the article that you’ve come to,

There is a simple way for web designers or marketing managers overcome this hurdle. The first option is just simply to reduce the size of the images above the fold, either through cropping or just reducing the overall size of the images that are above the fold.

The second way is to remove non-essential elements that are taking up space above the fold and pushing other content down below the fold.

Here is an example of a page that does not have a false bottom. What you can see is that the fold has content from below the fold, bleeding on to the above the fold section. So you can see that there’s an incomplete picture at the bottom of this screen.

For any of you web designers that have done Gestalt psychology, you’ll know that, as humans, we have a desire for closure. So when you see half an image, there’s quite a strong base psychological urge to see the complete picture. Or if you see half a sentence there’s an urge to see the full sentence. These are all small tactics that you can use to draw your users down the page and keep them scrolling until they find something that really interests them. Tactics that drive those core micro conversion metrics.

Here’s another great example of not having a false bottom and it comes from the Matador network. It’s actually a really great article on way 48 of your favourite TV homes were actually filmed.

What you can see here is that the primary infographic sits above the fold, but it continues down below the fold. I would therefore, by nature need to scroll down on this page to see the rest of the information.

The tip here is to scroll naturally through your pages and ensure that at every juncture at every natural scroll point, there is more and new glossy and exciting content pulling up into the fold. That continues encouraging your users to to scroll down the page.

You’ll notice that the three examples above where we investigated false bottoms are all content based sites. These are primarily article pages where the primary metrics that publishers like BuzzFeed are usually striving for include pages per session, bounce rate and time on page.

In some instances, a low time on page can actually be a good thing because it means that you’re convincing the user to take the desired action really quickly, and your page is really effective.

As with many things in life, for every rule, there is an exception, and there is indeed an exception to the false bottom rule.

This is one of the reasons why we as an agency, never recommend the blind application of best practices to our clients. We always recommend testing and ensuring that the principles that you are applying are backed by your research and an understanding of the sources of traffic for your webpages.

The exception is particularly found with landing pages designed specifically for paid traffic or paid campaigns.

And so an example of where a false bottom can be used effectively, is where you have a paid for landing page or a paid campaign drive.

These pay per click landing pages usually have a single journey that’s mapped out for the user. So we see an example of this a great example of this from ozow.com, which is a secure payment provider.

Here you can immediately see, because of the design and the layout of the page, that the primary action that this website wants you to take is to click that ‘Register Now’ button. They’re more interested in getting you to click the Register Now button than they are in getting you to scroll further down the page.

This can be a very effective strategy.

This is why it is incredibly important that you test per source, whether or not your pages are benefiting from or suffering from false buttons, as both are possible.

Feature image by Hal Gatewood