Image credit: designshack

Infinite Scrolling Best Practices

by Nick Babich

Infinite scrolling, sometimes called endless scrolling, is a technique that allowing users to scroll through a massive chunk of content with no finishing-line in sight. This technique simply injects new content to the bottom when users scroll down.

Infinite scrolling

The technique allow user to scroll the list of items without any interruption or additional actions — items simply appear as the user scrolls down the page. This technique is used in Facebook feeds and Google image search results . Tempting as it may sound, the technique isn’t a one-size-fits-all solution for every site or app.

Five Rules For Good Infinite Scroll

Making good infinite scroll isn’t impossible task. In order to complete it you should remember and follow these guidelines.

1. Keep The Navigation Bar Visible

When you keep the navigation bar persistently visible, you create better navigation experience for users. Why? Because if navigation bar is out of reach, users will have to scroll all the way back when they’re far down the list.

Facebook’s top navigation bar is visible all the time

Mobile devices only: Because a mobile screen is much smaller, navigation bar can take up a relatively largely portion of the screen. If the screen is a scrolling feed, the navigation bar can be hidden on scroll and revealed if users start pulling down trying to get back to the top.

Facebook saves some vertical space by hiding the navigation bar based on the scrolling direction. Image credit: lmjabreu

2. Use a “Load More” Button If You Have A Footer

Infinite scrolling impedes the user’s access to the page footer. Reaching footer becomes a challenge—since items continually load as the user approaches the bottom of the page, the user will see the footer for a second or two until the next set of content is loaded and pushed the footer out of view. This prevents the user from reaching the footer.

Take Bing Images, for instance. The footer contains links like “Learn More” and “Help,” but user aren’t going to be able to actually click on any of these links until the page stops infinite-scrolling, which takes a while.

Image credit: Bing Images

If your site or app has a footer and the footer contains important actions or information for your users, you should use the “Load more” approach. New content won’t automatically load until the user clicks the “Load More” button. This simple design decision allows your users to have on-demand loading of additional items. Instagram uses “Load more” button in order to provide an easy access to the footer and doesn’t force the user to click “Load more” button again and again.

A “Load more results” button, as used by Instagram, offers many of the benefits of infinite scrolling while keeping the footer accessible

3. Back Button Bring Users Back To Their Previous Spot

Another usability challenge of the infinite scroll if the problem of scroll position. The scroll position isn’t recorded as a ‘state’. If users follow the link from the list and then clicks the Back button, they expect to return to the same point on the original page. But when the user’s position in the list of results is not tracked, the browser’s back button will generally reset the scroll position to the top of the page. It’s not surprising that users get frustrated quite fast by not having a proper “back to list” functionality.

Back button in Safari

Don’t make your users lose their place in the list of items just because they used the Back button. After a user has visited a particular item page from the list, they should be able to go back to the same spot on that list upon clicking the browser’s back button.

Flickr matching the browser’s back-button behavior to the user’s expectation. The app remember the user’s scroll position, so when the user press Back button he returns to the original position.

Image credit: Flickr

4. Allow Users To Bookmark Particular Items

One of the most often cons of infinite scroll is that it’s impossible to bookmark items from the list of items. A simple bookmark results action (“save for later” of “add to favorite”) can be a very powerful tool for your users. Pinterest, for instance, uses a bookmarking tool that helps users save creative ideas.

Pinterest users can bookmark or share the item from the list

5. Provide a Visual Feedback When Loading New Content

When new content is loading, users need a clear visual sign that the site is doing this. Keep users informed by using a progress indicator to show that new content is loading and will soon appear on the page.

Since loading new content is a fast action (it shouldn’t take longer that a few seconds) you can use looped animation to offers feedback that the system is working.

Subtle animations (such as Tumblr’s loading indicator) tell the user “I’m loading some more content for you.”

It can also be helpful to add additional clarity for the user by including text that explains why the user is waiting (e.g. “Loading comments…”).

Spinning wheel animation

Conclusion

When infinite scrolling is implemented well, it can make for an incredibly smooth and seamless experience. Hopefully you’ve received some clues as to what makes good infinite scrollling and this will help you to establish perfect user experience.

Learn how to design user interfaces

Interactions between computers and humans should be as intuitive as conversations between two humans. Interaction Design Foundation will help you to learn how to design for efficiency and persuasion.