UX Design
8 minute read

Take It to the Limit – An Overview of Long Scroll Websites

Cameron Chapman
Cameron comes from a design background and is the author of two web design books: Color for Web Design and The Smashing Idea Book.

Long scroll, or infinite scroll, websites are exactly that: the pages are much longer than the “average” website page and therefore scroll “infinitely.” These types of sites have become popular with social media sites and sites like Pinterest that include a lot of user-generated content, as well as some news and blog sites—personal websites and portfolios are also beginning to employ long scroll techniques in order to increase user engagement and the length of time people spend on a site.

Infinite scroll has become a popular and common design pattern, nevertheless, there are some potential pitfalls UI designers should be aware of when designing a site that uses long scrolling. There are also some types of sites where it isn’t appropriate to employ a long scrolling design pattern.

The Purpose and Benefits of Long Scroll

One of the biggest benefits of long scroll websites is that they keep visitors on a site longer. When people don’t have to make a conscious decision to consume more content, they’re less likely to click away.

Think of this as being similar to the way Facebook, YouTube, Netflix, and similar sites autoplay videos when the one a user is viewing finishes. They know that if a visitor has to make an effort to click to a new video, they’re just as likely to click to a different site entirely. But if videos keep playing, it’s more likely they will continue watching.

When long scroll sites are properly coded, they load a new URL with each new piece of content. That equals more page views for the site, which can increase advertising revenue and the site’s overall value.

Long scroll is popular on news sites, which load more content as the user scrolls.

Mashable's home page auto-loads more content as the user scrolls, keeping them on the page for longer.

As with any UX decision, it’s important to weigh the advantages and disadvantages to the people who will actually be using the site before deciding on a format. Long scroll can be a great option for certain types of sites, while in other situations all it does is frustrate users. It’s important to learn the difference between the two.

When to Use Long Scroll (and When Not To)

The key thing to remember when considering long scroll is that the content should dictate the format no matter what kind of site is being designed. Long scroll websites are great for certain types of content but can present a huge UX failure with other types.

On the whole, task and goal-oriented sites don’t benefit from infinite scroll designs (eg. e-commerce sites and tutorial or other educational sites where users want to see definite progress). These types of sites need to give users a sense of completion and accomplishment, which is harder to achieve with long scrolling sites.

Etsy, for example, tried an infinite scroll design in 2012 and ended up switching back to pagination. They found that while customers still purchased at roughly the same rate, user engagement went way down. Even things like the number of searches performed dropped.

Etsy stepped away from a long scroll website and returned to pagination.

Etsy ended up ditching the long scroll in favor of returning to paginated search results after running tests.

One option some e-commerce sites give to visitors is the “View All” option when looking at product pages. This gives the user the option to view the site in an infinite scroll format if they choose to do so while preserving the shorter results pages for users who prefer that format.

Pagination is also helpful when it’s important for people to view information in chronological order. Where a one-page scrolling website might encourage people to skim and skip ahead, pagination slows the visitor down and increases the likelihood of them consuming information in the proper order.

Where a single page scrolling website can really shine is on sites where reading additional content or articles is the natural flow. This applies to things like news sites or topical blogs. Users on these sites often want to take in large amounts of information at once, and infinite scroll makes it way easier.

Another obvious area where infinite scroll is a popular UX choice is social media sites or sites with a lot of user-generated content. Facebook, Pinterest, and Twitter all use infinite scroll. These sites want to keep users on the site for as long as possible, and infinite scroll does that well.

Psychological Costs of Long Scroll

The psychological effects of any design decision should always be considered carefully. When it comes to single page scrolling websites, there are psychological effects for, as well as against it.

The first thing to consider is that users don’t mind purposeful clicking. Clicking has been part of computing, graphical user interfaces, and the internet virtually since its inception. People are used to that particular type of interaction and aren’t going to be turned off if they have to click a few links to get to more content.

A lot of users dislike infinite scroll by default. Being faced with an extremely long page to scroll can feel a bit like drowning in a never-ending sea of information. When users are looking for specific information, scrolling is rarely the most efficient way to find it.

Since it won’t accurately display the page length, infinite scroll breaks the scroll bar on the side of the page. While not every user makes use of the scroll bar, in this respect, those that do may find infinite scroll frustrating.

Infinite scroll also removes the sense of completion users gain from finishing a task or reaching a goal on one page and then clicking to the next page. Losing this sense of completion can discourage users and cause them to seek other sources for the same information or task.

Another negative psychological impact long scrolling websites can have is that users tend to view content that’s further down the page as less important than the content at the top. Using headers can help with this, as it sort of “resets” the visitor’s brain about where the “top” is.

Long Scroll Website Best Practices

If it has been determined that a website project is suitable for a long scroll design, there are some best practices to keep in mind in order to make sure it offers an optimal user experience.

First up, ditch the footer! When content continuously loads, the footer will continuously be pushed off the bottom of the page. That means any content or information contained in the footer will remain out of sight. Worse still is when users catch a glimpse of the footer but lose sight of it before they have a chance to click on anything. Using a sticky footer is one way around this, although getting rid of the footer entirely is often a better option.

A great way to break long scroll UX: Put important information in the footer.

Barbican never allows you to see all the valuable information in their footer, because as soon as you get to it, more content loads, pushing it off the screen.

Using visual cues is important, especially if it isn’t immediately obvious when the main screen loads that there’s more content on the page. Sites that have a large header image or visual content that fills the screen when the page loads, often include an arrow (sometimes animated) or similar imagery to indicate that there is more content below.

Visual cues are important for one page scrolling websites

Dynamit includes a small arrow at the bottom of the home screen to indicate to visitors that they should scroll.

Navigation should be consistently visible, either by using a sticky header or a stationary sidebar with navigation links. The exception to this is on mobile devices, where sticky headers can take up valuable screen real estate. Facebook handles this well by having the header disappear when users scroll down, but then reappear when they start scrolling back up.

The Chrome web browser does something similar with their controls at the bottom of the screen; they disappear when the user is scrolling down, and reappear when they start scrolling back up. It’s a very intuitive way to create an interface that maximizes available screen real estate.

One vital UX feature that has thankfully become more common in infinite scrolling websites is changing the URL as each section is scrolled to. Some do this with internal bookmarks within the page. Other sites, particularly news sites and blogs, update the entire URL when the user scrolls. This is important, as it allows users to link to exactly the content they want to link to, regardless of changes to the page itself.

Some web designers opt to create what could be considered a “hybrid” long scrolling site, with a “load more” button that loads content directly onto the same page. Some UI designers use this repeatedly on the page, while others opt to include it only once, and after that turn the site into a more traditional long scrolling format.

Besides these long scroll website-specific design considerations, other UI and UX best practices for creating good designs still apply to sites that employ infinite scroll.

Examples of Long Scroll Done Right

A website scroll animation enhances user experience.

The Story of Zohra site uses visual cues when you start to scroll.

Portfolios are a good opportunity for a one-page scrolling website.

The Merbis Photography & Filmmaking site is a great example of a portfolio site that uses infinite scroll.

A single page scrolling website.

The Windows of New York site loads all of the content right on the home page.

Parallax scrolling website techniques are often combined with long scroll.

The Like There is No Tomorrow site combines long scroll with parallax scrolling techniques.

A subtle website scroll animation increases user delight.

The Faces of New York Fashion Week website—a long feed of photos from the event—is a perfect candidate for the long scroll format.

An example of a unique infinite scroll website.

John Ball's website takes a slightly different approach: the background images infinitely scroll while the text content stays stationary.

Links to each letter on the right enhance UX on this one page scrolling website

The Fake It Digital website uses long scroll to display their humorous alternative definitions of common business, design, and marketing terms.

Then there’s this site, from Andrew McCarthy. While the design is unique, it infinitely scrolls with the same information over and over again. Since McCarthy is a designer, it’s likely a deliberate choice in order to stand out from the crowd.

Designers often have fun with long scroll formats.

And another example from Sam Rosen, who also keeps repeating the same content over and over again, although this site loops back to the top rather than re-loading all the content.

Infinity scroll techniques can vary widely between sites.

Conclusion

While long scroll websites are nothing new, they’re reaching a new level of maturity. Designers are no longer employing them as just the next “big” thing, and are instead paying attention to how the pattern impacts user experience.

Following best practices when creating infinite scrolling websites allows designers to create a UX that delights users rather than frustrates them. Concurrently, properly implemented long scroll websites can also help brands achieve their website goals.

Further reading on the Toptal Design Blog:

Understanding the basics

What is web scrolling?

Web scrolling is often used to refer to either parallax scroll or infinite scroll techniques being employed on a website. With infinite scroll, content continues to load on a single page as the user scrolls down, keeping them on the page longer and getting rid of the need for users to click to the next page.

What are scrolling pages?

Scrolling pages, more commonly referred to as long scrolling or infinite scrolling pages, are web pages that continue to load new content as the user scrolls down the page. This eliminates the need for the user to actively click to see more content, potentially keeping them on the site for longer.

What is a one-page website called?

There are a variety of types of one-page websites, but one of the most commonly seen is the infinite scrolling website. These types of sites continuously load more content as the user scrolls, rather than separating content onto different pages.

What is a multi-page website?

Unlike long scroll websites, which load new content as the user scrolls, multi-page sites separate content onto different pages. Multi-page websites are better suited for specific types of sites, like those that are task- or goal-oriented.