Intro

The choice of how tables load, and display content is an important consideration that can greatly impact the user experience. There are many table loading behaviors, and each of them caters for different needs and preferences with their own advantages and drawbacks. These loading behaviors include:

• Infinite Scrolling,
• Infinite Scrolling with a “Load More”-Button,
• Pagination,
• and combinations of the mentioned behaviors.

Understanding when and how to choose each behavior can greatly enhance the user experience, making data exploration, and navigation smoother and more efficient for users.

In the following best practice, the advantages and drawbacks are examined from a user experience point of view.

Infinite Scrolling

Infinite scrolling is an approach to table loading that continuously loads content as users scroll down on a user interface. It is widely considered as modern, engaging, and lightweight, but also has drawbacks in certain scenarios.

Advantages

• Reduces interruptions and provides a seamless browsing experience.
• As the content loads continuously without the need to interact with any buttons, it lowers the interaction costs.
• It is very well suited for mobile devices and touch interactions.

Disadvantages

• Since there are no explicit orientation guides, it is difficult to find specific content again.

• It may cause an “illusion of completeness” as users might not realize that there’s more content to load.

• Reaching the footer of a website might be difficult to impossible, depending on the concrete implementation.

• It might cause accessibility issues for screen-reader and keyboard-only users:

  • Issues with screen readers: screen-readers might only read the initial content without triggering the loading of new content. This may result in users missing important information.
  • Infinite scrolling might require keyboard-only users to tab through a huge number of items which makes it both time-consuming and challenging to reach specific sections.
  • Issues with screen readers: screen -readers might only read the initial content without triggering the loading of new content. This may result in users missing important information.

• The page load time might be impacted negatively.

• Search Engine Optimization might be impacted as not all content could be indexed.

Recommendations

Use infinite scrolling…

• for content-heavy use cases with uniform content.
• for use cases where content exploration is priority, e.g., in social media contexts.
• for use cases in which are not of high importance to users.

Infinite Scrolling with a “Load More”-Button

Infinite scrolling with a “Load More” button combines continuous loading of content with improved user control.

Instead of loading new content automatically, users must click the “Load More” button to get additional content. This provides a better balance between continuous loading of content and user control.

Advantages

• Provides better user control over the loading of more content.
• Allows easy access to the footer of the website.
• Reduces an “illusion of completeness” by explicitly making users aware of more content.
• The page load time is improved over pure infinite scrolling.
• It’s a good compromise between infinite scrolling and user control.

Disadvantages

• Increased interaction cost as users are required to click the “Load More”-button to see more content.
• These increased interaction costs might cause in the browsing experience and thus cause users to leave the site.

Recommendations

Use infinite scrolling with a “Load More” button…

• for use cases with large amounts of content where users may need more control over content loading.
• to provide an engaging and dynamic browsing experience while alleviating some of the issues – including accessibility shortcomings — of pure infinite scrolling.

Pagination

In the pagination approach, large content is divided into separate pages to improve navigation and to manage large datasets better. Clear page indicators are provided, so that accessing specific content sections is made easy.

The “Results per Page” selector can be added to the pagination approach to enhance the user experience of this approach.

Advantages

• Provides clear orientation guides to remember the location of specific content.
• Enables quick navigation and comparison between different pages.
• Search Engine Optimization is not impacted negatively as all content of site can be indexed.
• Users can control the numbers of rows that are displayed if this approach is combined with the “Results per Page” selector.

Disadvantages

• Sometimes seen as less engaging.
• May interrupt the user flow as clicking is
• Increased interaction cost as users are required to click the pagination-buttons to see more content.
• These increased interaction costs might cause in the browsing experience and thus cause users to leave the site.

Recommendations

Use pagination…

• for use cases with organized and hierarchical content, e.g., search results, or large product catalogs in use cases where orientation guides might be important to users.
• when users want to access specific items, compare content between pages, or have higher requirements with regards to accessibility or Search Engine Optimization.

Combination: Pagination plus “Load More” button plus “Results per page” Selector

The combination of pagination, a “Load More” button, and a “Results per page” selector offers users extensive control over table loading and content visibility. Pagination allows users to navigate through pages which provides clear orientation guides and offers good traceability of content. The “Load More” button offers to load more rows incrementally if wanted. The “Results per page” selector offers users to customize the numbers of rows displayed on each page.

Advantages

• Users can control the numbers of rows that are displayed.
• The performance of the site may be improved by this loading behavior, especially for large data sets.
• This approach provides clear orientation guides to remember the location of specific content.
• Huge flexibility of this approach: users have the option to switch between pagination and the “Load More” functionality based on their preference.

Disadvantages

• Implementing and displaying pagination, “Load More” button, and “Results per page” might add complexity to users and developers as well.

Recommendations

Use the combined approach…

• for large datasets. The “Results per page” selector allows users to set the number of rows that are displayed, which enhances performance in such scenarios.
• to accommodate varying user preferences where some prefer continuous scrolling, while others prefer pagination.

Related Links