Infinite Scrolling for Responsive Site

Infinite Scrolling for Responsive Site

I’m working on a responsive intranet where I have suggested using infinite scrolling without hesitation. However, I now realize that I may not have put enough thoughts into it. So I’m embarking into the task of discovering infinite scrolling, when to use it and when not, and how to use it gracefully.

Infinite scrolling is a way of presenting long list of contents by refreshing data every time the user scroll to the bottom of the page rather than using pagination. It has become popular thanks to the raise of social media sites such as Facebook and Twitter. It’s sort of trending features but has its own downfalls and needs to be used mindfully. I have read few blogs about it and I want to summarize here what I’ve learned.

When to use it

  • When the contents in the list have the same level of importance, same granularity, and are short snippets like Twitter.
  • For touch devices, such as smart phone and tablets. Swiping upwards to scroll down is a well-established convention in the touch environment, and requires less precision than tapping on links or buttons.
  • For Higher engagement. Users are potentially more likely to explore content if it’s easier for them to do so, regardless of the device they’re on. If you’ve ever lost track of time perusing a stream of Twitter or Facebook updates, you’ll know what I mean by this.

When not to use it

  • Not recommended for goal oriented finding task such as e-commerce websites, as it may be more difficult to find specific content.
  • Infinite Scrolling requires Javascript, therefore needs to be avoided on devices with limited scripting capabilities such as Consoles, Gaming handhelds.
  • Infinite scrolling make the task of getting to the footer hard, therefore avoid when the footer is an important part of the site.
  • With infinitely long pages, people may feel paralyzed by the sheer volume of content or the number of choices and not click anything. People may view but not act. Infinite scrolling may support browsing behavior, but it can cause inaction and lower conversions, which is the opposite of what most website makers want.

How to use it

To archive a strong infinite scrolling experience the following issues should be considered:

  • Give users immediate access to exclusive data
    When implementing infinite scrolling, identify what data is exclusive to your website and elevate it to the top of the page, and filter less relevant information.
  • Make the users feeling in control.
    Infinite scrolling sabotages that feeling of control. Add a smart progress indicator, a fixed menu or a map.
  • Users often look for landmarks when scrolling
    When scrolling through long lists, users expect to be able to easily distinguish between new and viewed data. Add landmarks along the interface to keep users oriented. Like Facebook:
  • Consider conventional pagination or a hybrid solution
    Good old pagination is always an alternative to infinite scrolling. And if that doesn’t fit the context, then a hybrid solution, using a “load more” button, could greatly enhance the interface.
  • Provide interesting content without an ambiguous interface
    Having to traverse a never-ending list is logical only if the user leaves feeling that it was worthwhile.
  • Users often expect a footer.
    If footer-type information is functional to the interface, then it should appear at the bottom of the page. A fixed footer is usually the way to go with infinite scrolling.
  • An infinite list is still a list
    Infinite scrolling still needs to meet common interface standards. Whether users take their eyes off the screen for a moment or click a link and then click “Back,” they expect to return to the exact point where they left off. Whatever your interface, make sure it meets users’ expectations.
  • Effects are nice to have but not a must
    Many infinitely scrolling interfaces have various effects to show more data (whether by sliding in new content or another method). Be mindful not to focus more on effects than on presenting data in the most effective way possible.
  • Knowing the amount of data
    They should know what the total amount of data is and be able to easily navigate the list. Infinite scrolling has to be implemented in the best possible way so that users can always find their way.
Advertisements