The scroll-through pattern

Explanation of the scroll-through pattern

Scrolling is a widespread pattern in the way we interact with websites. It determines how smooth and responsive we experience them during the process of finding our way to complete our intended tasks. Very few web pages are free from scrolling by design, so we can't avoid the reflows that scrollbars cause and their effect on user's behavior. A common discussion point in the past was what the immediately visible top area of the site should contain and we tried to put the most important content there. But as time passed and page lengths became infinite, we somehow lost this discussion. We no longer even know what our most important content is. As a result our users scroll up and down without finding any peace. During this scrolling all kinds of things can happen and the viewport gets constantly repainted. Everything that is bound to the scroll event gets executed and if these computations are heavy, they can slow down the page significantly. As the user scrolls, hover effects on all kinds of elements are randomly activated, which—in case of a table with too many elements—can slow down the experience without any visible reason. All this leads to less than 60fps.

Scroll-through, when widespread, could motivate making web pages even longer, when people could jump up and down everywhere with a single click. Then we'll no longer talk about user experience, but about scroll experience. Unfortunately, this will have further consequences for our ability to focus and will make finding content even harder. It's probably best if we leave scrolling for users to do it themselves.

The longer web pages are, the more people need to scroll and the more time they spend scrolling. The page height then gives an accurate picture how much work people need to do to reach the bottom of the page. Most of the time they can't arrive there instantly—only gradually. This makes it especially important with long pages to provide a mechanism for people to jump quickly to the top and bottom. We could measure the page length in pixels and divide it by the average viewport height that our users have to get the number of screens they need to go through. I have measured the page lengths of the top 25 websites (homepages only!) according to Alexa's traffic tank to see which pixel lengths work best. For this I have used document.body.scrollHeight in the Firebug console. Here is the result as of 30.7.2013:

Pixel heights of the most popular websites

We can see that the sites with the most traffic are concentrated in being around 1000px tall or less. (The mean is 1822px, the median—1179px.) This is contrary to the widespread perception that more content is better. But there are also many sites in the range of 2000-4000px. One is even above 7000px high. If we assume that the viewport has a height of 700px, this would mean that the user needs to scroll through ten screens. It's hard to imagine how many dpi the his mouse needs to be to do this in a reasonable time. The need for more scrolling is thus a bad design decision we should strive to avoid.