Swiping or spinning the mouse wheel, scrolling is lately becoming a strong contender to standard page-by-page navigation.
Practical uses in responsive design and mobile interactions, plus the enjoyable storytelling, give long scrolling an edge — as long as the site meets the right criteria and applies the proper techniques.
So what are the criteria and how do you apply the right right techniques? Let's take a look at some of the methods described in the free ebook Web Design Trends 2015 & 2016.
Long scrolling background
Long-scrolling sites tend to have one larger home page that links to other, smaller pages. Alternatively, the entire site may also exist on a single long page (sometimes aided by infinite scroll).
Designers find they can do a lot with this setup, as content can more readily center around storytelling aided by parallax scroll, scroll-triggered animation, or Ajax/jQuery techniques.
To explain the current popularity of the long scroll in a nutshell, we can credit the increased usage of mobile screens — simply put, the smaller the screen, the longer the scroll. This initiated a movement that revitalized long and infinite scrolling sites, and challenged designers to think up new and creative methods to utilize this technique.
Long scrolling has its drawbacks like all other design styles, so it won't work with every site. Take a look at its pros and cons below so you can choose wisely.
- Allows creative storytelling and visuals
- Aids simple navigation
- Promotes interaction
- Infinite scrolling entices users to stay longer
- Works well with touch controls
- Opens the door for more app- or game-like experiences
- There will always be people who simply refuse to scroll
- Negative effect on SEO (to learn how to combat this drawback, read this Moz piece and this Quicksprout piece.)
- Can be confusing and disorienting
- Difficulty in returning to previous "page" (a stagnant top or side navigation bar, known as "sticky navigation," circumvents this)
- For ecommerce sites, long-scroll distracts from the fast transactional experience
- May slow site speed, especially with video content or parallax effects (this tutorial explains how to use parallax scrolling without slowing down the site)
In general, weighing long scrolling's advantages and disadvantages, we see that the style is most suited for sites that:
- Anticipate a lot of mobile users
- Frequently update content (like user-generated content)
- Carry a heavy amount of content (like social media sites)
This article from Smashing Magazine further explores the pros and cons of long scrolling.
Below are some techniques the experts recommend for long scrolling. If you've decided the style can help your site, keep the following best practices in mind:
- Differentiate the scrolling navigation controls from other calls-to-actions and links.
- Create a scrolling foreground against static background. If you scroll halfway down the tour page on the UXPin website, you'll notice that scrolling affects the on-screen content but doesn't move you further down the page. You can deliver plenty of content without stretching the page too far.
- Sticky navigation — where navigation controls and menus are stagnant while the content moves — helps with a lot of the orientation issues of long scrolling, as you can see in the Free Range Designs below.
- If you're not designing a single-page site, the home or landing page should be in a long-scrolling format, with splinter pages in a shorter format.
- Obvious scrolling controls immediately signify how the site operates, using quick instructions like "scroll down," or more subversive signifiers like the silhouetted helmets in The Seven Types of Motorcycle Rider below.
- Follow up with user research such as Google Analytics to see how your design is actually working, and which devices people are viewing it on most.
- Don't overdo it with too many screens. Even infinite-scrolling pages shouldn't go on infinitely.
Let's elaborate on the new opportunites that long scrolling allows for designers.
01. Parallax scrolling
Known by the video game industry for decades, parallax scrolling refers to the background and the foreground (or differing layers of the background) moving at different speeds.
This techniques creates a three-dimensional effect to enhance otherwise two-dimensional graphics.
Parallax scrolling lets Make Your Money Matter (above) illustrate some basic economics without boring people in a way that's fun, interactive, visually stimulating, and beneficial to the company.
02. Atypical direction
Despite long scrolling's recent popularity, most sites still stick with scrolling down. That means sites that scroll up, left, or right are able to take advantage of the benefits of scrolling while simultaneously setting themselves apart.
If you're going this route, first make sure it matches the nature of the content.
For example, it makes sense that the Space Needle site scrolls upwards, following the elevator as it takes you through the major sections of the building.
03. Screens as pages
To improve orientation, it helps to set apart different screens as you would pages. Each new screen can be sectioned off with a different background, style, typography, etc., to clearly divide one long page into several sections.
Apple's product pages section off its different screens by giving each their own unique graphic and call-to-action.
The continuity of long-scrolling sites allows the designer to unify a heavy dose of information in digestible bits, making it perfect for infographics.
On Thirteen Reasons Why Your Brain Craves Infographics, each point is given its own screen, but the quick pace of the scroll gives the page a fluid and united feel.
Scroll-activated animations enrich the scroll and the animation. The user-triggered interactivity makes the user feel more connected, while the animations breathe life and fun into the scroll, enticing and rewarding the users.
Each screen on Playground Inc. offers a new scroll-activated animation that makes the user want to see the next.
Because of its inherent drawbacks, long scrolling requires more effort and knowhow than other design styles. However, if you're willing to put in the extra work, the clear narrative is a worthwhile payoff. Make sure scrolling suits your site, and pay attention to the best techniques and additional options that we outlined above.
For more advice on long-scroll as a web design technique — as well as 9 other current web design trends — check out the free ebook Web Design Book of Trends 2015-2016. You'll find 166 hand-picked examples from companies like Adidas, Intercom, Apple, Google, Versace, and others. To help speed up the design process, there's also a curated list of 100 free, online resources.
Words: Jerry Cao
Jerry Cao is a content strategist at UXPin — the wireframing and prototyping app — where he develops in-app and online content for the wireframing and prototyping platform.
Like this? Read these!