Let us scientifically optimize your web business to make it more profitable.
We've been featured in Financial Times, .net and Fortune. Our clients include: Our Clients View more...

How to make users scroll down your page

In split tests, long pages often beat shorter pages. But for a long page to be effective, readers must be aware that it’s long. If users don’t scroll—because they don’t want to or because they aren’t aware that the page is long—then all of your hard work has gone to waste.

Our consultants recently discussed ways of getting users to scroll down a page. You may be interested to read this summary of the techniques that arose from the discussions.

Why you should be testing long pages

As a rule of thumb, your page should contain at least as many words as you’d use when selling your product or service face to face. That’s because you don’t have the luxury of being able to ask for objections, so your page needs to address all of the most common objections. When Moz’s CEO, Rand Fishkin, told us that it takes him about nine minutes to sell Moz’s PRO service face to face, we realized that the landing page would have to be long. The winning page we designed for Moz was six times longer than the control, which it outperformed by 52%.

Some marketers are wary of long pages, associating them with aggressive sales techniques. Whenever someone tells you that they’d never buy from a long page, remind them how long Amazon’s pages are.

Amazon’s Kindle page is three Hasselhoffs high.

Sometimes your sales copy needs to be bigger than a man: Amazon’s Kindle page is three Hasselhoffs high.

Where is the fold?

In web marketing, the term “above the fold” refers to the area of a page that users can see without scrolling.

An illustration of the fold on Amazon’s homepage.

An illustration of the fold on Amazon’s homepage.

The position of the fold will be different for different users, depending on many factors, including their screen resolution, how many bars (toolbars, tab bars, menu bars, system bars, etc.) are open, and whether they’ve zoomed in on the page. FoldTester is a tool that shows you where the fold will appear for different users.

The growing usage of mobile-phone browsers throws yet another monkey wrench into the fold machinery.

How to analyze the way your users scroll

Here are two ways to determine whether your users are missing important content because they aren’t scrolling:

  1. Conduct usability tests and observe whether the users scroll.
  2. Use a tool like ClickTale, which gives scroll-reach heatmaps about how far users scroll down your page.

Incidentally, ClickTale’s analysts have published some excellent research into how users scroll, which is based on the wealth of data that their tool captures.

Techniques for encouraging users to scroll

Here are six design strategies that may fix scrolling problems. As with any web usability issue, there’s no universal solution. Try to identify why users aren’t scrolling, overcome that particular problem, and then verify it with a split test.

1. Horizontal objects near the fold: how to avoid them, and what to replace them with.

This is a long page, but the horizontal band of white space near the fold gives the impression that it’s not

This is a long page, but the horizontal band of white space near the fold gives the impression that it’s not.

Beware of horizontals. A band of horizontal white space that lies on the fold can be mistaken for the end of the page. (We call this a “false bottom.”) If you can’t remove the white space altogether, try to reduce its thickness so that you minimize the number of users for whom it lies along the fold.

A horizontal line or bar just above the fold also creates a false bottom, so be careful with those too.

sunshine.co.uk

You can avoid having horizontal lines across your page by ensuring that page elements in different columns end at different heights. (If you’d like to see a case study of how we grew this business by £14 million per year, click here.)

If a page element is clearly straddling the fold, users will intuitively understand that the page continues below the fold. A simple way to remove all horizontals is to have page elements in each column end at different heights on the page. That way, at least one page element will straddle the fold, regardless of the user’s computer settings.

Ideally, the page elements that straddle the fold should be ones that have a well-known form, so it’s obvious when they are incomplete.

It’s obvious when some objects are incomplete

It’s obvious when some objects are incomplete. (By the way, this image is by Scott McCloud, whose books on writing comics provide a great way of learning about storyboarding videos.)

2. Use a background for the sides (and top) of the page.

Here’s an intriguing way to make it obvious that the page continues below the fold: Give the top, left-hand, and right-hand borders of the page a shade or texture that contrasts with the main content.

An example of using border shading to encourage scrolling

An example of using border shading to encourage scrolling.

This technique appears to work because of the Gestalt effect, by making it clear that you can see all but one of the page’s sides.

3. In your sales copy, explicitly urge readers to scroll.

Be clear and direct with your users, telling them exactly what you’d like them to do. Don’t feel afraid to explicitly ask them to scroll; it’s fine to say, “Scroll down this page to…”

Offline marketers know the importance of urging people to read on

Offline marketers know the importance of urging people to read on. It’s obvious that this brochure continues beyond the current page, but the copy urges them to do so nonetheless.

As with the rest of your copy, users will be more likely to act if you give them reasons for doing so. For example, “Scroll down this page to get a $10 off coupon” or “Scroll down this page to discover [valuable information]” is likely to outperform a reasonless call-to-action.

4. Add a please-scroll graphic just above the fold.

You may choose to add a please-scroll graphic just above the fold, where it’s likely to get noticed. Such a graphic may be placed where most users’ folds lie, as in this example:

A please-scroll graphic in the form of handwritten text (the text in the bottom-right-hand corner).

A please-scroll graphic in the form of handwritten text (the bit in the bottom-right hand corner).

Here’s another:

An example of a please-scroll graphic for a web app

An example of a please-scroll graphic for a web app. To see how we grew a web app’s sales by 100%, see this case study.

Alternatively, you may wish to add the graphic to a freestanding object that’s fixed to the bottom of users’ browser windows. The graphic will then appear at the bottom of their page regardless of what their screen resolution is. Advantages of objects like these are that they don’t disrupt the design and that you can add them by using a simple script.

The Wiltshire Farm Foods website has a simple “Scroll for More” label fixed to the bottom of the browser window

The Wiltshire Farm Foods website has a simple “Scroll for More” label fixed to the bottom of the browser window. The label fades away when users scroll down.

5. Add click-to-scroll functionality.

Make your please-scroll button clickable.

Why not make your please-scroll graphic clickable? If you click on the “Scroll for More” button on the Wiltshire Farm Foods page (see the image above), the page smoothly scrolls down.

To learn how to do this using JavaScript, click here.

Create links to target locations within the same page.

HTML allows you to link to target locations within the same page. Clicking on such a link automatically jumps you down to the section you’ve linked to.

These links can be incorporated into a Johnson box, as we did in our Moz case study, allowing users to jump to the section that interests them most.

The

The Johnson box we incorporated into Moz’s page contained jump links to different sections of the sales copy. To get a free annotated PDF of this “million-dollar landing page,” subscribe to our free newsletter.

6. Don’t force users to scroll horizontally.

Horizontal scrolling doesn’t come naturally to most web users. It normally becomes an issue when the users’ browser windows are narrower than the width for which the website was designed. One way to get around this is to design for small screen resolutions. Another is to separate your content from your layout, so you can use different style sheets for different devices, or use a liquid layout that automatically adjusts to the browser width.

Of course, every rule has its exceptions. Here is a showcase of creative websites that are specifically designed to use horizontal scrolling. However, even this showcase includes the caveat “Horizontal websites are not very user friendly.”

An effective way to implement horizontal scrolling

An effective way to implement horizontal scrolling, if it adds to the page’s value, is to implement arrowed slider screens such as the one on this Amazon page. (Click on the link to see which book we’ve just bought.)

Conclusion

Long pages are effective, but only if your users know that they can scroll and are given compelling reasons to do so.

If you’d like a PDF screenshot of a long page that generated an additional million dollars per year for the client, with many detailed “tooltips” explaining the persuasion techniques behind each page element, just sign up to receive our free newsletter.

This is an excerpt from our PDF, Conversion Secrets of a Million-Dollar Landing Page

An excerpt from our “Conversion Secrets of a Million-Dollar Landing Page” PDF.

Finally, don’t forget the advice that @amateuradam shared on Twitter: “Before you close a web page make sure you scroll up to the top, so it’s in the right position for the next person.”

Learn more

Want to learn more about how you can improve your site? See our Services page. You can also discover how we’ve grown companies in software, travel, recruitment, and other industries. These how-to guides will come in useful too.

So, how can we help you?

How-to guides

How-to Guides

Our selection of easy reading will familiarize you with important tools and topics.

To explore these helpful resources, click here.

---

Work with us

Increase in ROI

If you want us to work on your website personally and dramatically improve its profitability, visit our "Services" page and then contact us for more information.

If you have any comments or questions about this article, contact us.

x Free Resources
feedback