Do Long Scrolling Pages Work?
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.”
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.
|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%|
|6.||A Tradition of Giving||6,648||6,222||47%|
|8.||And Our Hearts Forever||5,904||5,613||43%|
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.
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.