- UX: Infinite Scrolling vs. Pagination
- The Nuggets translation Project
- Translator: Ruixi
- Proofread by :Velacielad, Wild-Flame
“Should I choose infinite drop-down mode or paging mode for my project?” Some designers still struggle with which of these two modes a project should implement. Each model has its advantages and disadvantages, and in this article we will outline the two models and decide which one to choose for our project.
Infinite drop-down mode
The infinite drop-down mode allows the user to make the page endless while browsing through a large amount of information, and it’s not complicated to implement, as long as the page is updated as the user slides down. Tempting as it may sound, this model is not a foolproof solution for every website or app.
Advantage #1: User engagement and content discovery
When you use scrolling as your primary method of retrieving data, it’s likely to keep users on your site longer, and user engagement increases. With the popularity of social network, a lot of information is consumed; Infinite dropdowns provide an efficient way to swim through a sea of information without waiting for a page to preload.
Infinite pull-down is an essential feature of almost every discovery interface. In situations where users are not searching for specific content, but need to read a lot of information to find things that interest them.
You might point to the Facebook News Feed as an example of gauging the benefits of infinite drop-down. Obviously, because content is refreshed so frequently, users know they won’t see everything in the stream. By using an infinite drop-down model, Facebook tries to show users as much information as possible, while they browse and consume the information stream.
Advantage #2: Easier to pull down than click
Users are more familiar with dropdowns than clicks. A mouse wheel or touch screen makes pulling down easier and faster than clicking. For continuous and lengthy content, such as a tutorial, the drop-down mode provides better usability than dividing the text into several different screens or pages.
designbolts
Advantage #3: Pull-down works on mobile devices
The smaller the screen, the longer the pull. The popularity of mobile browsing is another important support for long dropdowns. Gestures on mobile devices make pull-downs intuitive and easy to use. The result is a truly responsive experience, regardless of the device being used.
Dribbble
Disadvantage #1: Page performance and device resources
Page loading speed means everything to a good user experience. Multiple studies have shown that slow load times cause people to leave your site or uninstall your app, which means lower conversion rates. This is bad for people who use infinite drop-down mode. The more users pull down, the more content is loaded on the same page. As a result, page performance gets slower and slower.
Another issue is the performance limitations of user devices. On many sites with infinite pull-down capabilities, especially those with lots of images, devices with limited performance, such as the iPad, can be slowed down by heavy data loads.
Disadvantage #2: Project search and targeting
Another problem with infinite pull-downs is that when users select a point in the stream, they cannot mark it and return to it later. Once they leave the site, they lose all progress and have to drop back to the original location. Being unable to determine the location of the dropdown can not only cause annoyance or confusion for the user, but can also cause damage to the overall user experience.
Etsy spent some time implementing an infinite pull-down interface in 2012, only to find that the new interface didn’t work as well as the paged-mode interface. While transactions are holding up, user engagement is down — people aren’t using search as much anymore.
Dmitry Fadeyev points out: “People will want to go back and look at the list of results to check the items they just saw and compare them to what they saw elsewhere in the list. The infinite drop-down mode not only breaks this dynamic, but also makes it difficult to move the list up and down, especially if you return to the page at other times only to find that you have to start all over again by sliding down the list and waiting for the results to load. In this case, infinite drop-down mode is actually slower than page mode.”
Disadvantage #3: Irrelevant scrollbars
Another annoying thing is scrollbars that don’t reflect the actual amount of data available. You might deliciously swipe the page, thinking you’re near the bottom, which might cause you to slide a little too far, only to have it double by the time you arrive. In terms of accessibility, it’s really bad that it affects users’ use of scrollbars.
Disadvantage #4: Lack of a bottom column
The bottom bars are there for a reason: they contain information that users sometimes need — they often turn to the bottom bars if they can’t find something or want more information. But because of the infinite pull-down, more data is loaded as the user hits the bottom, pushing the bottom bar out of sight each time.
For sites with unlimited pull-down, keep the bottom bar fixed to the bottom or move links to the top bar or sidebar.
Another solution is to load as needed by using a load more button. New content does not load automatically unless the load more button is clicked. So that users can easily reach your bottom column without chasing.
Paging mode
Paging mode is a user interface model for breaking up content into separate pages. If you scroll down to the bottom of the page and see a string of numbers — that’s a page for the site or application.
Advantage #1: Excellent conversion
Paging mode is used when the user needs to retrieve specific content in the list of search results, rather than just browsing through the information stream.
You might point to a Google search as an example of gauging the advantages of paging patterns. Finding the best results can take anywhere from a few seconds to hours, depending on what you’re searching for. But when you decide not to search Google in the current mode, you know the exact number of results. You can decide where to stop or how many search results you want to see.
Advantage #2: Feeling in control
Infinite dropdowns feel like an endless game — no matter how far you’ve gone, it feels like it will never end. Users are better able to make informed decisions when they know the number of search results, rather than being left with an infinite drop-down list. According to David Kieras, who studies the psychology of human-computer interaction: “Arriving at an endpoint provides a sense of control. _ “. The study also illustrates that when users are limited but still have relevant results, they can easily determine if what they are looking for is actually there.
When users see the total number of results (when the total number of results is not infinite) they overestimate how long it will take them to find them.
Advantage #3: Project location
A paginated interface gives the user a sense of the approximate location of items. They may not know the exact page number, but they will remember the general location, and paginated links make this process easier.
Paging mode is suitable for e-commerce sites and applications. When users shop online, they want to go back to where they left off and continue shopping.
Disadvantages: Extra movement
In paging mode, to go to the next page, the user needs to find the target link (such as “next page”), hover over it, click, and wait for the new page to load.
The main problem here is that most sites only display a very limited amount of content to the user on a single page. You can get more content on a single page without hitting the paginate button, but only if you make your pages longer without affecting loading speed.
When do you choose infinite drop-down/paging mode?
There are only a few situations in which the infinite pull-down mode works well. It’s perfect for sites and apps that have user-generated content (Twitter, Facebook) or visual content (Pinterest, Instagram). Paging mode, on the other hand, is a safe choice and an excellent solution for sites and applications that cater to users’ goal-oriented activities.
Google’s experience is a good example of this. Google Images uses an infinite drop-down mode because users can view and understand images faster than text. It takes longer to read the search results. This is why Google searches still use paging mode.
conclusion
Designers need to weigh the pros and cons of these two models and make a choice. The choice depends on your design context and how the content is delivered. In general, the infinite pull-down model works for sites like Twitter, where users consume a never-ending stream of information and don’t need to look for anything in particular; Paging mode is suitable for search pages where the user needs to find a specific item and where browsing history is important.
In future articles we will cover best practices for infinite drop-down mode and paging mode. Stay tuned!