When you’re working with big lists, a number of issues could arise. These issues can range from performance issues to usability issues. As a UX designer, it is important to consider solutions to lists that are getting too long.
Two of these possible solutions are pagination and infinite scroll. Both have their own pros and cons and thus are best used in specific scenarios. Both UI and UX designers need to know what pagination and infinite scroll are and when to use them when working with a design system.
Table of Contents
In this post, we’re going to take a look at both options, what they are, and when to use them. But first, we have to take a look at why a long list is a potential usability and performance problem.
Also, a long list has to be generated and displayed on-screen. The longer the list gets, the more performance is required. This will increase loading times, which might hurt your SERP rankings and user experience.
In addition, longer lists are more difficult to remember for your users. Just imagine your user finding a pair of shoes she wants to buy. The shoes are item number 37 in a list of over 200 items. It will be very frustrating when your user accidentally clicks somewhere and the list is gone. This is just one example of many cases where long lists can hurt your user experience.
What is pagination in UX?
When a list is getting too long, one way of shortening the list is by dividing the list into multiple smaller lists, spread out across multiple pages. A smaller list as a number of benefits for the user, including the list being better scannable and having a lower interaction cost. It is also better for the performance of your application or webpage.
If you put it all together, chances are you will achieve a better, more fitting UX for your users.
What is infinite scroll in UX?
If you go the other way, infinite scroll is a popular option. You’ll most probably have encountered infinite scroll on social media platforms like Facebook, Instagram, and Twitter.
You might be thinking, isn’t infinite scroll still a very long list. Yes, that’s true. The difference with any ordinary list is that infinite scroll lists keep building up once you reach the end of the page. This delays performance issues significantly.
Another great plus is that it will not require users to click on pagination-related elements like next and previous buttons. Users also do not need to keep page numbers in mind in case they want to return to an item on another page.
The downside is that in time your list might become too long again. Another issue is that it is difficult to reach the bottom of the page since the list keeps growing whenever you reach the bottom of the page. One way to fix that is by adding a ‘load more’ button that loads an additional number of items instead of doing that automatically every time you reach the bottom of the list.
Clicking a link in the footer of a page becomes almost impossible.
Should I use pagination or infinite scroll?
Now that we have the pros and cons of pagination and infinite scroll down the only question that remains is which of the two you should use.
As is the case with any UX and UI design dilemma, the answer is that it depends on your specific situation. In general, infinite scroll is best suited for applications where one of the main goals is to let your users browse, scan, and filter through large amounts of content. This is most commonly seen in social media platforms.
On the other hand, pagination is best suited for applications that require users to make a specific choice, like a webshop or online registration form.
There you have it. When making the choice between pagination and infinite scroll in UX, ask yourself if your users just want to browse or if they have to complete a specific task. Infinite scroll is great for the former, while pagination usually works best for the latter.
Pagination and infinite scroll both are commonly used UI elements, just like radio buttons and checkboxes. They also have their own specific uses. Make sure you know what they are!
Was this post helpful to you? Share it with others!