Infinite Scroll

No end in sight

Infinite scrolling works by continuously loading content as a user scrolls down a page, making it seem like it has no end.

This pattern is often used on websites and apps that have a multitude of content with little hierarchical importance. The list is usually sorted with the most recent or relevant content on top.

Benefits, tradeoffs, and considerations.

Unlike pagination, infinite scroll works well on touch devices because it doesn’t require tapping to view additional content. It is often hard for users to precisely tap small pagination links.

Infinite scroll leads to higher engagement. This is because it limits barriers to exploration. It is easy to get lost in a sea of Twitter or Facebook posts. Using infinite scroll is a bad idea if your app requires finding content quickly.

A user shouldn’t have to scroll back to the top of the page. Sticky navigation should be incorporated when using infinite scroll so a user doesn’t get lost in the ocean of content. The ability to navigate or search for new categories should always be easily accessible.

A loading indicator should be incorporated so users understand that new content will be displayed if there is any delay. The indicator can be enhanced by showing how many items have been loaded and how many are left in the list.

If a user navigates from the list and then clicks back, they should arrive at the same place where they left the list.

Google Images infinite scroll is broken up with a “show more results” button.

Many sites that use infinite scroll do not have a footer because a user will never reach it. However, a footer can still be incorporated successfully if the infinite scroll is broken up with a “show more” button. When a user clicks this button another set of content is loaded. This allows a user to reach the footer. Another way to keep the footer visible is to keep it fixed to the bottom of the view. This method is usually only a good idea if the footer is short and unobtrusive.

Avoid infinite scroll if productivity and precision are important. This pattern is best for showing lots of content that is egalitarian in nature.