Best Practices When Using An Infinite Scrolling Design

Facebook

0

Twitter

Google+

0

Pinterest

0

Linkedin

0

StumbleUpon

0

Fairly recently, infinite scrolling has become a commonly used design pattern.

Since many popular social platforms have been using infinite scrolling it has become quite popular with many site designers. Although, infinite scrolling has been widely adopted, each design type has its associated weaknesses and strengths that we need to consider.

A poorly implemented infinite scrolling site will have a poor user experience, and results in a site that users will quickly exit. If you implement it properly, you will create a site with a great UX, that will be popular and enjoy great success.

Why Does Infinite Scrolling Improve Engagement?

When considering a design pattern, it is important to evaluate the benefits and risks associated with various scenarios. What may have resulted in improved engagement for another type of site, may result in less engagement from your site visitors.

When you are considering using infinite scrolling, its usefulness will depend upon the kind of content you want your users to engage with.

A determination of the content type and goals you have in mind for your site visitors, will give you insights into the type of design that will be suitable for your site. This is particularly important if you are considering using infinite scrolling.

Content With High Engagement

Content that has the goal of capturing and maintaining the interest of a user for a prolonged time period, or that is interactive, is not usually suitable for an infinite scrolling design. If you want your visitors to share, like, and read each post, displaying numerous posts to them at one time may overwhelm them.

Content With Low Engagement

Infinite scrolling normally works best if you have content that doesn’t require much user engagement. Social sites like Facebook and Twitter are good examples.

Most users of these sites scroll through a list of content and aren’t normally interacting with the majority of it. Although, these kinds of scenarios don’t provide a lot of user engagement, they do serve the purpose of maintaining the interest of users for longer time periods.

Indeterminate Content Type

At times, the kind of content you will publish on your site is clear. However, what about instances with this is not so clear cut? There may be instances when you may have content that could have either low or high engagement goals.

Although this scenario may not occur often, it does present an obstacle, since infinite scrolling would then only be helpful to a portion of your visitors.

The solution, in this scenario involves minimising the options a user has to interact with each post. This will permit users that want to engage with a content piece to focus on one post, and it also provides low engagement visitors with the ability to consume a lot of content without being forced to engage with it.

Hybrid Solutions

Many designers select a hybrid infinite scrolling implementation. Users are prompted to load additional content when they arrive at the bottom of a page.

This gives the user control in deciding the amount of content they wish to load, which is very useful on mobile devices. A hybrid solution also maintains a server load that is consistent.

After a number of pages are loaded, which you pre-define, a prompt will appear asking the user if they want to load more content.

Infinite Scrolling Best Practices

Similar to many design types, there are normally some best practices that are good to adhere to. These aren’t strict guidelines, but merely what most successful implementations have done.

• When loading additional content, provide a visual indicator. This will inform your visitors of what is happening. If you don’t include this, users with slower connections will think the page has locked-up on them.

Provide a fall-back for users that don’t have JavaScript installed. First, design your site with pagination and then utilise JavaScript to hide it and have your infinite scrolling implementation.

• Maintain back buttons on your page. Even though a lot of implementations don’t do this, it’s a good idea to maintain the basic functionality of a browser. When a site visitor browses from your site and then returns, they don’t want to reload your site at the top of your page.
• Try and load content in advance of your user. The intent of infinite scrolling is to provide a continuous content stream. While you should implement a loading indicator, it’s best if most of your users never need it.
• Maintain visible navigation. Although, for the most part, users will desire to consume content, at times they may desire to navigate to additional portions of your site. If you force them to scroll back to the top of your page, they may decide to exit instead.
• Open links within a new window. By making links open in a new tab or window, you prevent your visitors from navigating away from your page accidentally and losing their place within your page.
• Eliminate footers. Quite often, an infinite scrolling implementation will mean eliminating a site footer. It can annoy users when they are trying to look at a footer while more posts are being loaded automatically. However, if you really want to maintain a footer, make use of hybrid loading which will permit you to keep a footer that is accessible to your users.

Conclusion

While infinite scrolling is a popular design trend that can provide your site visitors with a constant stream of content, you must use it properly.

You desire to have your users exposed to more content, but you don’t want to reduce the value of each piece of content or make visitors feel that they are overwhelmed. Keep in mind that your visitors are at your site to consume content, not to experience your scrolling functionality.

Infinite scrolling can be quite useful, but its use will hinge upon the type of content you want to present to your users. It can result in better engagement, or worse engagement, depending on the type of content you are presenting to your site visitors.

You might want to check out this video to learn how to implement infinite scrolling: