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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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…”).
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.
Learn UX Design
Take all our online courses. Pay a flat fee. Get industry-recognized Course Certificates (see example) Self-paced…
Thank you!
Follow UX Planet: Twitter | Facebook
Originally published at babich.biz
