Infinite scrolling is a user interface trend popping up on many websites. It allows users to scroll without having to click the pagination and wait for a new page. Instead, all users have to do is scroll to the bottom of the page and new content will automatically load on their current page.

This not only cuts the clicking, but it also cuts the need to load new pages. This new and efficient way to browse content has many advantages. However, implementing this interface technique doesn’t come without its best practices. Here are a few best practices to follow to make sure that your infinite scrolling meets user expectations.

Keep the navigation bar persistently visible

When you scroll down a normal web page, the navigation bar gradually loses its visibility. However, with infinite scrolling it’s best to keep the navigation bar persistently visible. This allows users to navigate to new categories, do a new search or login at any time, no matter where they’re at on the page. If your navigation bar isn’t persistently visible, users will have a difficult time scrolling all the way back up when they’re deep within the page. Keep your navigation bar persistent, so that navigating to different areas of the site is fast and easy for users.

Give users feedback when loading new content

When new content is loading, users need a clear sign that the website is doing this. Letting users know when new content is loading allows them to prepare for a longer page and new content to display. The last thing you want is a confused or surprised user. Keep them informed by using a progress indicator to show that new content is loading and will soon appear on the page.

Show how much content has loaded and how much is left

With infinite scrolling, users will inevitably load a lot of content on their page. Therefore, it’s a good idea to let users know how much content has loaded and how much is left. This helps users keep track of their progress, so that they can pick up where they left off if they decide come back. This also lets users know how large the site is, how much content they have consumed and when to stop scrolling. By knowing where they are and where the end is, users will feel secure and comfortable with the process. They’ll also feel like they’re making progress.

Use a More button if you have a footer

If your site has a footer and you’re going to use infinite scrolling, use a More button to load new content. New content won’t automatically load until the user clicks the More button. This way users can get to your footer easily without having to chase it down. Without the More button, users would only have a few seconds before the footer disappears off the page. This makes getting to the footer difficult. With a More button users, users would have control over content and the footer.





Bring users back to their previous spot when they click back

When users click back they not only expect to land on their previous page, but their previous spot on the page. After endlessly scrolling through content, losing their spot on the page forces users to have to endlessly scroll through content they have already seen. This inconveniently gives users more work than they need. It can cause users to give up on your site and move on. If you bring users back to their previous spot on the page, they can go back to browsing through content without any hassle. A Back link on the corner of the page can also make clicking back easy and convenient.

Infinite scrolling has its benefits when it’s done right. These best practices will steer you in the right direction so that your infinite scrolling will delight, and not fright users. With an interface technique as new as this, these best practices are crucial for delivering a friendly browsing experience.

Toolkits