Where the UX benefits of Infinite Scrolling bottom out
(June 3, 2013)


Infinite scrolling websites are all the rage at the moment in web design. But are they good usability models? Or should they be avoided?

If you’re Twitter yes, if not, at least think twice!

Twitter was one of, if not the first to use this type of pagination. Since then Facebook and Pinterest, to name only two, have joined. In all three cases the UX benefit and the roll this type of scrolling plays is a perfect fit! Big win! But not every site fits these models.

When it works

On the Twitter and Facebook models you can seemingly scroll forever. You think you’re getting to the end and more, and then even MORE posts are shown. If all systems are working properly it’s unlikely that you’ll ever see the Footer of these websites.

The UX benefit is the concept of your Facebook life or Twitter stream going back in history for as long as you have existed online. There is no break; you didn’t switch to another page. This experience mirrors real life. The translation to the web works. Our lives, those of our friends and families evolve everyday so it works for use to see something new in the same place every time we visit. The same can be said for Twitter. We want to see what has happened since our last visit and from time-to-time we revisit a time a little further back in our lives.

These sites are the epitome of scannability! Once the page has loaded (lazy loading helps with this) you don’t have to click through pages and you can scroll past the parts that don’t interest you. Because of the quantity of images on the pages, an enormous amount of content can be scanned without great cognitive effort.

A-pinterest-board-(1).jpg

Standard Pinterest board - overload

Pinterest is just such a case. They deal with what people say are the best of the images on the Internet. As there are so many images on the net, I suppose it’s cool that people are taking the time to group and organize them in some usable manner. I’m not 100% sold on how usable. But I certainly can consume a great deal of information quickly on this site.

For sites with a business model based on serving ads, many more ads can be served below the fold. The time on the page and quantity of content can help sell your site. Just ask Mashable why they’ve changed their design.

The other benefits:

  • These models are perfect for touch devices. That in terms of development (if not for the user per se) is a big gain!
  • These days some web-based news organizations are using this technique to deliver more content. They are following the model of blogs – to which I give the title of inventor of infinite scrolling. In this model, more time spent below the fold means more ads can be served.

The positive use cases for infinite scrolling include:

  • Content based on images
  • Content that has a real timeline – created or displayed in a chronological order.
  • User generated content (UGI)
  • Business models based on serving as many ads as possible
  • Microsites that seek to generate some buzz and offer a fun experience.

When it doesn’t work

Of the reasons to avoid infinite scrolling, the biggest UX concern is the absence or “inaccuracy” of the scroll bar. Scroll bars, whether we’re aware of it or not, are one of our compasses when browsing. They let us know how much information there is to get through and where we are on a page.

Pagination elimination. Essentially that’s what infinite scrolling does. Pagination being and important landmark for users means that we need to find other methods to help the user stay focused and know where they are. If we are expected to interact and not simply consume, we will need to know at which point was that super interest point made and where was that beautiful red sweater.

It is worth noting that on the mobile app, Twitter does offer a marker for when you load new tweets. The jagged broken page line is a very helpful UX feature that could be deployed more often by Twitter. Any feedback when you're loading more content is a very important UX gain. 

On their website, back button confusion happens when having clicked on a link, you are sent to the top of the page where new tweets have now been loaded and you have to scroll and search out where you were. Bing has a huge error in their UX when you click on an image and then use the back button, you need to scroll back down and hopefully find where you left off.

Interestingly enough, in its latest update, Google+ immediately changes the header portion once you begin to scroll back to the top so that you can have some controls at hand. This is a definite improvement in UX for that hopefully will be picked up by other sites.

G-small.jpg

G+ menu minimizes itself on scroll down.

G-big.jpg

G+ menu returns to full size on scroll up.

Search. Staying with Google for a second, they have implemented infinite scrolling on G+ and when you search for images but not in standard search. I would argue that this is a business decision related to page rank being part of their band and the fact that delivering search results with pagination has probably tested as a better experience than without. Most searchers, 96% are apparently satisfied with the first 10 results anyway, one supposes it’s because of relevance.

Google-page-rank.jpg

Google search result = pagination and relevance

Bookmarking is another important user need on the web. We want to share links or return to something at a future date. In the case of Twitter, it’s rare that we want to go back to a specific point in time. They do offer us Favorites and if you’re on the app, sometimes you do see the torn page breaker.

Some of the first sites to deploy infinite scrolling were ecommerce sites. They believed that users would LOVE being able to see a ton of articles at once. On that point they are probably right. But their business is to convert to the shopping cart, to sell!

Esty has offered its experience with implementing this type of pagination and their decision to dump it. Dan McKinley, the engineer for the project has shared his experience in a cautionary tail here. It would appear that when faced with too many or seemingly endless choices, we often make none.  As Susan Weinschenk, Ph. D. explains in her books and presentations, we can only deal with 3 or 4 choices at a time.

FB-footer.png

Elusive Facebook footer

The footer. I remember in the early days of Facebook, when I found the link to Facebook’s advertising pages in the footer. I was excited, began using the service and loved it. I told clients about it and then a few months later, when I had the proof of how it worked and a client asked me to implement it, I couldn’t find how to get back there to do so. I was in a panic, until one day our Internet connection got slow and there was the footer again. Phew!

I would argue that a footer on a website is if not 100% necessary, it’s expected by users.

The drawbacks:

  • If you’d like to convert users you will have a problem with focus and conversion.
  • Pagination and landmarks are lost.
  • If you want users to bookmark a point in your site they can’t do that.
  • If you require showing some sort of relevancy, there is no point because there is no hierarchy.

Technical stuff

There are of course technical issues to be considered such as load time and JavaScript being turned off. Some people believe that nothing should rely too heavily on JavaScript unless you have a standard build to start with to cover what can be lost – like pagination.

Conclusion

A general rule of thumb would be, if your users are mostly consuming information it can work. But if you wish to convert users then don’t implement infinite scrolling.  When in doubt, give me a load more button like Google image search.

Keep the navigation bar fixed to the top of the page to give users some control. 

Do your best to have graceful degradation for users with older browsers, if you’re thinking some sort of hybrid – make it configurable, and return users to their exit point when they use the back button. 

Last thought. Test to see what your users think of it. UX test to eliminate the majority of the issues or if it’s a fit at all. Once it’s live, check your stats and modify if you see problems. As with anything new, have a fallback plan at the ready. 

Comments
Blog post currently doesn't have any comments.