In split tests, long pages often beat shorter pages. But for a long page to be effective, the reader must be aware that it’s long. If the user doesn’t scroll—either 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 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 SEOmoz’s CEO, Rand Fishkin, told us that it takes him about nine minutes to sell SEOmoz’s PRO service face to face, we realized that the landing page would have to be long. The winning page we designed for them 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.
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 the user can see without scrolling.
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 (tool bars, 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 how 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 some 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, then verify it with a split test. (If you’re new to split testing, see this comparison of multivariate testing software.)
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.
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, to minimize the number of users for whom it lies along the fold.
A false bottom can also be created by a horizontal line or bar just above the fold, so be careful with those too.
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, the user 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. (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 from the main content.
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 sides of the page.
3. In your sales copy, explicitly urge the reader 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…”
As with the rest of your copy, the user 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 bit in the bottom-right hand corner.)
…or this one…
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 it to a freestanding object that’s fixed to the bottom of the user’s browser window, so it appears at the bottom of their page regardless of what their screen resolution is. Objects like this have the advantage that they don’t disrupt the design, and they can be added 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 label fades away when the user scrolls down.
5. Adding click-to-scroll functionality
Make your please-scroll button clickable
Why not make your please-scroll graphic clickable? If you click on the scroll 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, like we did in our SEOmoz case study, allowing the user to jump to the section that interests them most.
The Johnson box we incorporated into SEOmoz’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 user’s browser window is 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, if it adds to the page’s value, is to implement arrowed slider screens such as the one on this page of Amazon. (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 loads of “tooltips” explaining, in detail, the persuasion techniques behind each page element, just sign up to our free newsletter.
This is an excerpt from our PDF, “Conversion Secrets of a Million-Dollar Landing Page.”
In this article, we’ve outlined some techniques for encouraging scrolling, but did we miss any? If so, scroll down and let us know in the comments. (See what we did, there?)
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 more. These how-to guides will come in useful too.
(rated 4.83 by 35 people) 
Loading …
Great info! Will definitely have to rethink my home page!
Fabulous article and very apt as I’m currently working on a longer sales page
You’re absolutely right when you say we need to overcome the feeling of being too pushy with the sales message.
Love the idea of the clickable graphic to encourage scrolling!
WordPress blogs (and many websites) often have a sidebar with widgets on the right hand of the page, and/or navigation buttons on the left – these too can help to draw the visitor to scroll down, in a similar (but possibly more effective?) way to your bullet 2 – having a different colour background with an obviously missing bottom border.
Thanks for the free helpful tips, generally we have avoided long pages…..but we may need to experiment more…
Great article! 3 times as high as Hasselhoff is a scary concept…
Great post. We wrote this really long landing page for Econsultancy – we’ll take a look to make sure we’ve made it clear that scrolling is essential!
And people really scroll down to the bottom of an amazon page?
I’m quite shocked how long that page is!
Great article as usual. . .
I am certainly going to study and implement some changes based on this article for a few sites.
One concept I made for an acoustic guitar buyers guide site is to have a floating “jump” menu on the right that jumps to different sizes of guitar models based on their interest-
Kind of a “johnson box” and floating menu in one – thought it is not a typical “johnson box” in direct marketing terms- it is more of a floating help menu on this page so people can quickly jump and compare different acoustic guitar body sizes while trying to learn about the differences as they are doing their “shopping research”.
On the right (here) is a quick jump menu listing all of the different sizes of acoustic guitars, but after viewing my sites through the “fold” testing tool, I am definitely going to do a little shrinking of some headers an change up a few menus and designs to notify viewers of “more valuable info”.
Thanks again for this and we will be doing some re-design based on the “fold”
Thanks for this article. And I’m commenting so I reached the bottom
The notion of a page that is as long as the Hoff x3 is somewhat disturbing. That said… I’ll be experimenting with longer landing pages.
As always, a great article – thanks.
Worth adding that you can configure SiteCatalyst and AT Internet to provide some great ‘% of Page Viewed’ reports too.
Interesting reading. Have you any tests where the long page is split-up into different pages in a menu? Like features, why use this, sign up etc. When should you use a long copy, and when should you split the page up in multiple pages?
Fantastic actionable ideas. Love the side scrolling as a way to show products. Do you know of any wordpress widget that make a slideshow type like the one in your Amazon example?
@David, Glad you liked the article. We don’t know of a plugin that works exactly like Amazon’s slider off hand, but there are loads of solutions out there using JQuery and javascript. As always, its probably best to test and see which solution works best on your specific system. That being said, see if this plugin is close to what you’re looking for.
Thanks for this. Who would have thought? A long page would win out over a shorty?
Interesting insights as always. I’ve always wondered if there are cultural differences to browsing – are there certain cultures that have an aversion to the long sales page and thus scrolling?
Do you look at country by country metrics?
Great post and love what you did to the SEO moz website. I noticed that they are not still using that page though, is there a reason for that?
Will test to a new site being designed.
Thanks Rich
Hey great stuff! I am only three weeks into designing my landing page and I have been trying to incorporate a lot of the suggestions from your Million Dollar Landing Page. I had been wondering how to make sure people scroll down and you have given me some more great ideas. My current page is nuage-software.com and it is only about as long as the Hoff’s leg but it is still growing!
Hello team, thanks for a great case study. I really (really!) liked the Amazon.com Kindle page example. Planning to show all my clients
HI,
Nice post however I would be interesting to hear your thoughts on different screen resolutions and how to deal with visual clues with this. As some of your examples don’t work in a 1024×768 resolution
If your site has category or gallery pages which are split into a series of pages (eg with “page 1/2/3/4 next” links at the bottom) such as ecommerce category pages, then it’s really useful to study them using Google Analytics or whichever clickstream tool you use to see how they correlate with the main commercial aim of the site.
In GA you can use advanced segments to do this. Or, if you’re doing it one page at a time, ty using the entrance path for the page 1 and clicking on the page 2 in the middle area and seeing how many ‘ended up on’ your goal page on the right. (Poor description, but I hope you’ll work out what I mean…)
Then use this to help inform your decision about whether long pages or multiple pages work best for YOUR site.
Excellent article with great examples. We wrote an article on the so-called ‘myth’ of the page fold in 2009 but you took it to the next level. Great work.
Thank you! There are so many widely accepted ideas that don’t seem totally logical when you actually take a moment to think about them. And I love that you’re bursting one of those myth bubbles right here. Go you!
Nice post and it gives me something to think as I’m a septic regarding long pages. I have always found it very relative, that is something that depends of how popular is the site/subject, how big is your screen, who are your users? how much is the percentage of the regular-ones against the new-ones… the result of this difficult equation would be if a determined page would be worth to be scrolled this or that long. Well, I scroll this long to leave my comment thus, the subject was worthwhile to scroll this far! I had a look at Amazon from which I’m a client, and I do not remember to have it scrolled till the bottom. Thanks to this post I finally saw the footer of Amazon. This post, without the comments, still is 2.5 times longer then the pages of Amazon. Congratulations.
I think, sometimes it doesn’t matter how long or how short the sales page they are looking at if the visitor is really enjoying the content of the page.
This is a very good piece of information. I appreciate the research done in this area. Every SEO, Internet marketer and designer should understand this.
Gotta love the Hoff!
Brilliant info as always guys
And now I know that The Hoff is 6’4″.
Seriously though, good stuff in this one. Adding something to alert people they can scroll more is a good idea.
I fight this all the time, the belief the pages need to be short. I love the concept of “contain at least as many words as you’d use when selling face to face”. I think this will help me get the idea of longer pages accepted at least for testing.
GEEZE! I have hated long pages because of my disdain for the cheesy affiliate squeeze pages! This is very interesting especially since it goes against the notion of a minimalist design.
Agree. I hate those squeeze pages that apparently well innthe US Market (?!) …
But this article has made me a lot more open minded.
To cover good CRO techniques as mentioned above and make sure that web copy is quality (so to avoid the Panda) longer pages are definitely a must, the days or short pages ranking (and now converting) well are gone – great post guys.
I love the Wiltshire Farms example….however, when I looked at it in my iPad, the button acted funky and didn’t stay at the bottom of the page…it floated up when i scrolled down. Is there an iOS friendly way to doing that?
Just enrolled on the Econsultancy Internet retail MSc in order to get great info like this.
Good article dissecting the age old issue of page scroll and the fold. I do find more consideration needs to be given when displaying content for smaller mobile devices.
Like the Wiltshire Foods scrolling call-to-action button both as an aid to scrolling but also just as an indication that there is more content lower down.
Wonder just how successful it is in eliciting user scrolling. Wonder if they have tested, using ClickTale or CrazyEgg, if more visitors do actually use it to scroll the page to see extra content.
Don’t think, however, that it should be used to overcome the need to get as much content on a page as possible. It will still be advantageous to have your most important content above the fold.
I liked the part with the graphic button that ecourages scrolling down.
Another really insightful and helpful article! We’ve implemented some of your suggestions from other articles and they are really paying off. The call to action part of any web page is arguably the most important and the suggestion of getting users to scroll by offering something below the fold ($10 coupon etc) is great to make sure users don’t just bounce straight off!
It is great that you just lay out exactly what you are doing with your clients here. And by providing that service you are becoming the experts in conversion rate optimization. Go team !!
So awesome !!!!
Good post. One thing that has not been mentioned (i think , but have not ready every comment!) is that a good quality long page is ipso facto a page of good original content which of course is going to help you with your Google rankings.
Great article
You’re absolutely right when you say we need to overcome the feeling of being too pushy with the sales message.
Thanks for the information.
Very insightful article. However, a forgotten aspect of long page copy is pacing. Previous masters of the long-copy sales letter used lead-in sub heads in order to lure the reader deeper into the sales letter, and keep the interest and curiosity piqued. This would also aid the reader in skimming.
And don’t forget to finally present the “cherry” right at the end, and make the reader an offer they cannot refuse.
Very nicely presented article. Practical UI tips that I can apply right away. Thank you CRE.
great article guys, no doubt it is one of the most importent goals while designing a website