UI Design8 minute read

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

While infinite scroll has become a popular and common design pattern, there are some potential pitfalls UI designers should watch out for when designing a site that uses long scrolling.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

While infinite scroll has become a popular and common design pattern, there are some potential pitfalls UI designers should watch out for when designing a site that uses long scrolling.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.
Cameron Chapman

Cameron Chapman

Design Blog Editor

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

Expertise

Share

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

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 (e.g., eCommerce 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

One option some eCommerce 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

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

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


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


A single-page scrolling website


Parallax scrolling website techniques are often combined with long scroll


A subtle website scroll animation increases user delight


An example of a unique infinite scroll website


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

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.

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.

Hire a Toptal expert on this topic.
Hire Now

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

Join the Toptal® community.