Published in


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 on 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.




Recommended from Medium

My Ironhack Journey. Episode 5. Usability Case Study and Redesign

Understanding User Experience Design (UXD)

The egg chair

Betero Product Update

In Her Words

Usability Evaluation on Tesla Model S Dashboard

Designing a world for everyone — final projects that make a difference

Designing a Digital Learning Lab

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andrew Coyle

Andrew Coyle

Building @mockvisual (YC S19) • Formerly @Flexport @Google @Intuit • Interested in platforms

More from Medium

How to transition from ui to ux

Design Process Venn Diagram

UX Design in China

Error Messages and Confirmation Messages.

Building a Sketch Design System: Tips & Tricks