Optimise performance

Enhancing list performance can lead to more efficient and faster operations, which is crucial for applications dealing with large datasets or requiring frequent list manipulations. Lets look at few patterns to consider when aiming to optimise list performance.

Pagination

Pagination allows you to browse through the list in manageable chunks and easily locate
specific items. This approach reduces the initial load time by fetching and rendering a limited number of items at once.

 

 

 

Pagination with page indicators

Pagination with page indicators is a progressive loading design approach. It loads a new segment of content whenever you reach the end of the currently loaded section.

 

 

 

 

Load more button

The load more button pauses the constant flow of new content and enables full access to the whole section of a page.

 

 

 

 

Infinite scroll

Infinite scroll loads a subset of items initially and fetches additional items as you scroll down. This approach avoids overwhelming you with a large amount of content upfront, resulting in smoother performance.

 

 

 

 

Pros and cons

However, there are pros and cons for each approach. Consider the following table when choosing the most appropriate user experience for your product.

UX pattern

Pros

Cons

Pagination

✅ Divides the list into sections, showing a limited number of items per section.

 

✅ Provides navigation controls such as page numbers, next/previous buttons, or a dropdown menu, allowing your user to navigate between pages.

🚩 Introduces small interruptions which makes the experience less seamless.

 

🚩 Increases interaction costs

 

🚩 View more requires new loads

Pagination with page indicators

✅ Provides page indicators that act as valuable landmarks that helps your user to navigate and locate content more easily

 

✅ Enables your user to jump between sections and skip over the content when necessary.

🚩 May not reach the end of the page or scrollable content, potentially leaving some content undiscovered.

 

🚩 As it is a relatively new design approach (2023), your users might initially find it confusing until they become familiar with its functionality.

Load more button

✅ Placing the button at the bottom of the page indicates clearly that there's more content.

 

✅ Avoids the illusion of completeness

🚩 Increases interaction cost. It might prompt your users to work on other tasks in stead.

 

🚩 Not equipped to efficiently manage a large number of results because they are displayed in a single webpage.

This can lead to issues such as slow loading times, decreased performance, or difficulties in navigating through the extensive list of results.

Infinite scroll

✅ Loads more items as your users scrolls down the page.

✅ Seamless browsing experience without the need for pagination and the ability to explore a large number of items without page refreshes.

🚩 Challenging to reach specific items or navigate back to a previous position in the list.

 

🚩 Risk for "loading fatigue" due to unclear result size.

🚩 Not equipped to efficiently manage a large number of results.