Do Long Scrolling Pages Work?

December 21, 2011

Posted in Design, Higher Ed, and Measurement.

InDepth October: Tradition

I’ve been meaning to share this information for a while now, but two recent articles moved me to action. First, Matt Klawitter wrote about how the growing trend in higher ed of using super long, richly designed pages in Scroll is the New Flash. He noted that “without more data, it is too early to determine if these approaches are effective.”

As if in answer, Mike Nolan wrote about how they are using Google Analytics event tracking to observe how users are interacting with their Javascript-navigable pages.

One of the examples Matt uses is the AgencyND-designed ND.edu InDepth stories. At over 12,000 pixels tall, these scrolling monstrosities were a hotly-debated design approach among our team. But we weren’t silly enough to leave it as a guess; we measured the heck out of them.

First, an example

On the right is one of the stories, shrunk down so it would fit on this page without destroying everything else in the article. Click on it to go visit the actual InDepth Story from October.

Do People Scroll on Long Pages?

The first question was whether anyone would scroll and read all that content. Developing anywhere from 4-10 small stories along one theme could easily have been delivered as separate pages. But as they flowed together as one large, feature-length story, we felt the experience was better as one page. So we used Google Analytics event tracking to see whether people were scrolling to each story section.

First, we set up two different event types to measure: ScrolledTo and Pin Clicked.

Two event types: Scrolled To and Pin Click

Each section has a header, and with a bit of Javascript we were able to track whether the user scrolled down far enough to see that header. As the chart predictably indicates, there is drop-off as you go down the page. Interestingly, only 74% of users made it to the first section, which reflects the visitors who didn’t stay to read anything.

Section Pageviews Uniques % Scrolled to this section
1. Where the Heart Is 10,659 9,719 74%
2. Grabbing a Bite 7,898 7,327 56%
3. Keeping the Faith 7,627 7,065 54%
4. In the Name of Fun 7,313 6,783 51%
5. Academically Speaking 6,932 6,473 49%
6. A Tradition of Giving 6,648 6,222 47%
7. Good Sports 6,358 5,951 45%
8. And Our Hearts Forever 5,904 5,613 43%
9. Comments 5,727 5,442 41%

Special Navigation Tool: Scrolling Content Pins

One problem we found with long pages was that users didn’t know where they were in the story, except for the position of the scrollbars in their browser windows. Unfortunately, some browsers (e.g., Chrome) hide the scrollbar unless you are in the act of scrolling. So that’s not particularly useful.

Sample content pin

We developed an interface tool we called content pins, which correspond to each story section and appear next to your scrollbar on the right. Each pin expands to show a bit of the section and let users know where they are in the story, give them a sense of what’s coming up next, and allow them to navigate anywhere very quickly without scrolling. The brilliant Erik Runyon made it an open source jQuery plugin.

What did we learn?

First, about 41% of users scrolled all the way down to the comments section at the bottom. This is higher than I would expect, but it reflects the high quality of the content and the design.

Second, the content pins don’t get used nearly as much (12% of users interact with them) but those who do use them about 3.5 times per story. So they’re a useful tool if you want to use them.

Finally, the long-scrolling (InDepth) pages have an average time on page of just over 5 minutes – much, much higher than the site average.

Unfortunately, we can’t measure whether the reader’s opinion is changed, if the stories have affected Notre Dame’s reputation, or if there will be any further offline action on the visitor’s part. And a major challenge is simply driving users to the stories themselves. But we know that the content is not being lost on users once they get there.

While the long-form articles may appear risky, the format itself is not failing. And it certainly works contrary to the widely-held belief that web users want small nuggets, have short attention spans, and won’t read your content anyway. You just have to give them content they want to read.

1 Comment

  1. alanc230 — April 09, 2012

    Personally, I associate long scrolling pages with companies that are trying to sell me a “money making” product or service that I don’t want. When I try to click away from these, I get a message, “Wait! Don’t Go!” which I find very irksome.