User-Friendly Infinite Scrolling

infinite scrolling

So why would users want to be able to use infinite scrolling? Consider for a moment how you currently interact with a traditional paginated list, by clicking on the “next” button to move to the next page. In some cases you have to click on a Page number, but the action is pretty much the same. The user is forced to click on something in order to continue to the next page and then sit and wait for the page to fully load.

While this may only be somewhat annoying on a desktop or laptop computer, those using mobile devices find this extremely frustrating, particularly on a device with a very small screen, where the page numbers are so small it is difficult to accurately click the correct area.

On the other hand though, infinite scrolling allows the user to continually scroll to see the next section. This is particularly effective on devices that consist of a touch screen.

So who can benefit from using infinite scrolling? The world of social media very quickly recognized the benefits of infinite scrolling and adapted their websites accordingly. As anyone who regularly uses social media sites are aware, updates can number in the thousands, so trying to keep abreast of all of the postings of your friends, family and other interesting people you follow can become a nightmare on the smaller screen of a mobile device.

Although not everyone has realized the benefits of infinite scrolling, some smart ecommerce websites have implemented it. The ease with which visitors (and therefore potential customers) can choose categories and items by scrolling is a distinct advantage. Anything that makes the users experience more pleasant has an impact on how comfortable they are with a site, and potentially encourages not only sales on their initial visit but also bookmarking for repeat visits. Infinite scrolling improves the end user experience. See an example of infinite scrolling on an ecommerce site at Flipkart.com http://bit.ly/17rz6CR

The primary reason that users disliked infinite scrolling is that the seemingly never-ending list of results left them feeling “lost”. They found that it was extremely difficult, and at times almost impossible, to tell where they were in the list, and worse still they could not tell where the list ended.

Using traditional browsing methods a user is presented with a list and clicks on one result to explore that result further. Once finished the user would then click the back button to return to the list and choose another result. Sadly, this is where infinite scrolling strongly disappoints. With infinite scrolling, when a user chooses a result and clicks on it the end result is the same as with a traditional method, but when using the back button the user’s previous location is completely lost. This is extremely frustrating and requires the user to scroll through the list of results again to find their prior location.

So how can infinite scrolling be improved? It is not uncommon for users to initially criticize a new technique until they have worked with it long enough to get used to it. Smart developers know that these criticisms are useful for improving the end-user experience, as they are able to address the problems and create effective solutions.

Co-founder of Discourse (an infinite scrolling user) Robin Ward wrote a great article about it and was quick to point out that while most people could see the benefits of scrolling they were not happy with the way their browser became broken from using it. Read more of his thoughts at http://eviltrout.com/2013/02/16/infinite-scrolling-that-works.html

Not being able to keep track of where a user is within a huge list of items is a big problem. Fortunately there is a solution and it comes from HTML5’s history API. See it here at http://diveintohtml5.info/history.html Essentially what happens is that the URL updates your location continually as you scroll down. An example would be that http://forum.com/discussion-on-html/page1 will then become http://forum.com/discussion-on-html/page2 and so on as you continue to scroll down.

Where this is particularly beneficial is that the user’s browser history is updated by the history API as well. This fixes the entire problem of not being able to get back to the previous location within the list. When the user uses the back button, instead of being cast adrift anywhere within the list, the user is taken straight back to where they previously were.

Of course the Bookmarking problem still needed to be addressed, but this problem is also solved with the above solution. The user is returned to the precise location / page as they were on when they created the bookmark as per the updated URL.

Now that these two problems have been solved, you would think the user would have all the control they require, right? While the history API does a great job of “fixing” these problems, updating the URL may not be enough. If a user implements a floating’ tab they are given many more options to move back and forth within the list.

Other options that could be made available are additional filtering and sorting choices. Sites such as ecommerce sites would have the ability to allow their visitors to sort by rating, popularity, price and more. Being able to filter results would also make the end-user experience better. The user would first filter by one choice and then further sort by another choice. This would give the user so much more control over the item list, and would make navigating the list much easier. Take a look at flipkart.com and see it in action.

Contents