Several years ago, the "Long-Scrolling Page" began to slowly creep onto the digital design scene. Few really know why this happened and a decent name has never been coined for it. But you DO know what I'm talking about. They are everywhere. And many of us agency-folks are familiar with client-folks looking for that "Nest.com" feeling (a nicely done Long-Scroller). If a client asks you whether the Long Scroller is "Best Practice", you won't be able to tell them it is. We just don't know. Design may be a discrete process of educated decision-making, but global Internet design trends have an evolutionary lifecycle devoid of centralized design planning. The good ideas tend to replicate with small mutations and the bad ones tend to die off (because they are eventually redesigned to look more like the good ideas). So in the sense that the idea of the Long Scroller has tended to win, I suppose it is currently a good, if generally unproven practice.

The Purpose of a Long Scroller

Generally speaking the approach works really well for the following:

  1. Product Scroller: Software or Hardware product tours (example: Mac Pro from Apple)
  2. Services Scroller: Explaining the overall value and/or history of your brand/company/person (example: airbnb)
  3. Story Scroller: Explaining/educating a concept (example: Are You a UX Statistic from Vitamin T – cute; and Aquatilis – amazing scroll transitions. )

Bottom-line, the Long Scroller does a great job of telling a story. The practical problem is that its execution is so often butchered. I'm not going to pick on the worst offenders, because they may have been designed earlier in the evolutionary process. Instead, let's strive to create a set of first principles to live by when creating a Long Scroller.

Five First Principles

Slow the user down.

One of the biggest problems with Long Scrollers is that they naturally invite users to speed dash down the page. This makes it tough to communicate to them.

  • Perhaps counter-intuitively, loading up a screen with too much text may cause the user to scroll past it faster.
  • A static image is going to hold attention for less time than an animated one.
  • Larger, more immersive panels help by giving the eye more time to catch points of interest, even if the user is scrolling quickly.  And it can also solve one of the other principles shown below.
  • As with screen layout in general, create a hierarchy using scale and placement so the user knows where to look first.
  • Avoid hero sliders. Users probably won't be interested on seeing what is on that next slide as they glide down the page. Photo galleries can be an exception.
FitBit breaks their content into easily digestible chunks, free of distraction.
FitBit breaks their content into easily digestible chunks, free of distraction.

Parallax that simply scrolls past a decorative static image is actually duller than we might realize. These simplistic parallax images have no text or just have 1 maxim or quote placed over them. Usually the user is just going whiz right past it and not read the statement. However, the parallax technique can be creatively used to great effect when used with a purpose. (see principle "Engage with animation").

Create a rhythm.

My opinion is that users recognize and appreciate patterns. However, it is the rhythm of the pattern that will resonate. Suppose as a user scrolls, the pattern goes – A) image left, copy right – B) copy left, image right – repeat x 5: "A-B-A-B-A-B-A-B-A-B" – page ends. That's a repetitious rhythm and a fairly dull one.

Now let's suppose there are 8 panel layout designs (A thru H) that vary in random order with no repeats at all. This may not be chaos, but it is most certainly noise. And noise is not rhythm.

Take the same 8 panel designs (A thru H) and create a pattern with some order: A-B-A-B-C-D-E-F-G-F-G-F-G-H-C-E-A-B. In this way, the designer creates a sense of expectation in order to have the opportunity to break the expectation (otherwise known as surprise). And planned surprise tends to be more engaging. Again, this is my opinion and I haven't conducted a study or found one to back this little conjecture (yet). I suppose you can use music as a good example of this principle even though it is auditory rather than visual.

Eliminate clutter.

Consider the various browser heights within users' screen resolutions. Narrow panel row-heights within a scroller may help fit all the content within one screen view on low resolution screens, but they also expose large portions of the panels both above and below it on higher resolutions. Seeing all that information at once can blur a user's focus. More recent applications of the Long Scroller eliminate both high and low screen resolution problems by scaling each panel by percentage to match the full browser height and width. This Full-Screen approach is immersive and allows designers to focus the user on exactly the amount of message necessary. If Full-Screen isn't proper for your application, lean toward tall sections anyway.

And of course, steer away from unnecessary elements that play no part in the story being told. Continually strive to recognize the difference between exposition and decoration. That difference is a subject large enough to merit a separate blog post, so we'll hold off exploring that topic any further.

Facebook Paper proves that the clean look tells the best story. AND that you do not have to scroll vertically to tell that story.
Facebook Paper proves that the clean look tells the best story. AND that you do not have to scroll vertically to tell that story.

Offer control.

A prominent jump nav helps users know where they are. If the content doesn't lend itself to segmentation by category, consider using a dot-navigation to help users keep track of where they are located in the process of your story (also helpful since many modern browsers have no scrollbars). Again, this is a guideline, not a rule. The story being told may not lend itself to separated panels. (see Zendesk and Vitamin T)

Engage and excite with animation.

"Engage and excite" smacks of empty rhetoric. Let's fill that void. The Facebook Paper and FitBit examples above show how moving simple combinations of text and icons across a canvas of compelling images can be effective.

But there is more to it. FitBit employs small local animations over the imagery to better explain how their product functions. Facebook Paper employs full screen video of each image. It's not superfluous – as it illustrates the Paper app in real-life action.

The beauty of this medium is that it allows users to control the animation with their scroll. All the examples above have some form of animation that renders as the screen shimmies up the browser frame. Perhaps its full screen video that plays on its own. Or perhaps it is a car driving down a road that follows you down the page. Or, scrolling can activate an exploded product view, highlighting the beauty of an industrial design. (see: Sony's Be Moved)

Animating objects or characters compel users by sense of touch as well as by sight. A complex animation FEELS better when you, as the user, are allowed to scrub it backwards and forwards with your scroll. (See example Tri0dos Bank – though it may take a sec to load, so be patient)

Triodos Bank shows how scroll-controlled animation can draw users in – even if they only speak English.
Triodos Bank shows how scroll-controlled animation can draw users in – even if they only speak English.

The bottom line is to use animation to support your story and draw the eye long enough to stop the user and hook them into absorbing, rather than blind-skimming your message.

More Examples

Examples of Long Scroller first principles in action have already been shown above. Below, I've provided a comprehensive list (in no particular order) of Long Scrollers that I encountered while digging around during my research. Please and enjoy and judge for yourself how the following fits or breaks the principles outlined in this article.

2 Comments