Before addressing long homepage design, there’s a very important hurdle we must cross first: The Fold. Those vertical 600 pixels at the top of a website are thought to be prime real estate for content since no one ever scrolls below. In this article, I’ll go through where this myth came from, why it’s not true, and show you some analytics to back my claims up.
I’ll make this lesson brief. In the newspaper industry, the papers are folded in half and stacked up atop each other. In an effort to increase readership, newspaper editors would put the most interesting headline above the fold-line so that people would be compelled to buy the paper and read on.
This idea was adopted into web design. The principle itself holds water. It’s true that you should put your most captivating headline at the most accessible location, but the mutation of the principle has gone out of hand.
Instead of using the top 600 pixels for compelling content, companies opt for compressing all of their content together to fit in a tight spot. Instead of using that first impression as an inviting entrance to more interaction, they cram in images and copy and links and CTAs so much so that it becomes a turn-off.
They do this because of a stubborn belief that people don’t scroll.
Surprise surprise, they do. Clicktale has conducted studies about web-page scrolling and here is the summary of what they’ve found:
76% of the page-views with a scroll-bar, were scrolled to some extent.
22% of the page-views with a scroll-bar, were scrolled all the way to the bottom.
While the 22% seems like it’s a small number at first, you have to keep in mind that returning viewers who have already scrolled all the way to the bottom are not likely do so again if they visit the website later.
You also have to keep in mind that these 22% who stuck around till the end are qualified leads. These are people who are legitimately interested in what you’re offering, and they scrolled over the entire page to receive information. If you can capture 22% qualified leads just from a homepage then you should take the day off and treat yourself to a nice dinner.
In fact, ContentVerve has proved that CTA’s placed above the fold don’t always convert better and those placed below the fold. In this study, they split test the same CTA placed at the top of the page or at the bottom of the page.
Yes, you’re reading the numbers right. The bottom CTA generated a 304% lift in conversions. This doesn’t mean that placing CTA’s at the bottom is always the right way to go.
The golden question is: how do I get people to want to scroll? It’s the same way you get people to pay attention to anything, entice them! Use that first impression to leave an impression and make them want to learn more.
1. Have some kind of logic to the way you present information. Really think about how the messaging flows across the page. If it is fluid and logical, people will stick around. If it’s choppy and confusing, people will bounce.
Free The Chicken presents their information in an amazing way. They let the story unfold as you scroll further along the page
2. Less content above the fold will encourage exploration. If you lay down all your aces in the first 5 seconds, I have no reason to stick around your website anymore. But if you slowly lure me in, playing your cards one by one, I’m going to keep exploring to see what’s going to happen next.
cxpartners teamed up with Bristol Airport to perform some eye tracking work on their website. The image below shows two different treatments of the hero slot. In the image on the left, more information was crammed above the fold, which discouraged viewers from scrolling down. The image on the right had less information, which encouraged viewers to explore further.
3. Present the information when the time is right. When people are scrolling, you get to control when they see certain information. This is why sometimes a CTA placed at the very bottom of the page might convert better. People are more ready for the offer after they’ve read a bit about your company. Other information needs to be presented first because it is essential.
John Polacek attempts to explain responsive web design Using an interactive website. He allows the information to flow in and out exactly when he wants it to.
4. Avoid false bottoms. False bottoms make people think that there is no more content below when in fact there is. Large, stark, horizontal lines would do that. If you want to fill the page with a color or an image, make sure to include directional cues so that your visitors don’t get lost.
Meet The Pros and Free The Chicken have the right idea. They do have false bottoms but make up for it by directing you to scroll down.
In our next article, we’ll dive into the conversion analysis of long homepage designs so stay tuned.
Part 2 - Conversion Analysis
Part 3 - Design Considerations