Unlimited drop-down or paging?

Source: Medium-nick Babich Translations: Nuggets translation Program-Ruixi Original: http://design.jobbole.com/121314/

"Should I choose infinite dropdown mode or paging mode for my project?" "Some designers are still struggling with what the project should choose between these two models. Each model has their advantages and disadvantages, and in this article we will outline both of these patterns and decide which one to choose for our project.

Infinite drop-down mode

The infinite dropdown mode allows the user to make the page endless when browsing a large amount of information, and it is not complex to implement, as long as the user updates the page when it falls. It sounds tempting, but this model is not a surefire plan for all websites or apps.

Unlimited drop down

Advantage #1: User engagement and content discovery

When you use scrolling as the primary way to retrieve data, it may allow users to stay on your page longer, and user participation increases. With the popularization of social networks, a great deal of information is consumed; infinite pull-down provides an effective way to navigate the sea of information without waiting for the page to preload.

Unlimited drop-down is a must-have feature for almost every discovery interface . In situations where users do not search for specific content, they need to read huge amounts of information to discover things they are interested in.

Pinterest's massive pins

You might use the Facebook news feed as an example of the benefits of an unlimited pull-down model. Obviously, because the content is refreshed more frequently, users know that they don't see everything in the flow. By using the Unlimited dropdown mode, Facebook tries to present as much information as possible to the user, while the user browses and consumes the stream.

Facebook News Feeds keep users from slipping to refresh content

Advantage #2: Pull-down is easier to operate than clicks

the user is more familiar with the drop-down relative to the click . The mouse wheel or touch screen makes the pull-down (action) easier and quicker than clicking. For continuous and lengthy content, such as a tutorial, the drop-down mode provides better usability relative to dividing text into several different screens or pages.

Click events: Each time a content refresh requires an additional click action, and the time to wait for the page to load. Drop-down: Content refresh requires only a drop-down action. Image source: Designbolts

Advantage #3: Drop-down applies to mobile devices

the smaller the screen, the longer it pulls . The popularization of mobile browsing is another important support of long pull-down. The gesture of the mobile device makes the drop-down (action) intuitive and easy to use. As a result, users can enjoy a truly responsive experience, regardless of the device they are using.

Source: dribbble

Disadvantage #1: Page performance and device resources

page loading speed means everything for a good user experience . Several studies have shown that slow loading can lead people to leave your site or uninstall your app, which means low conversion rates. This is a bad thing for people who use the infinite pull-down pattern. The more users pull down, the more content is loaded on the same page. As a result, page performance is getting slower .

Another problem is the performance limitations of the user device. In many sites that have unlimited pull-down, especially those with a lot of pictures, devices with limited performance, such as the ipad, can be slowed by the amount of data that is being loaded.

Disadvantage #2: Project Search and positioning

Another problem with infinite pull-down is that when a user selects a point in the stream, they cannot mark it and return to it later. Once you leave the site, they lose all of their progress and have to pull back to their original location. The inability to determine the location of the dropdown will not only cause annoyance or confusion for the user, but will also result in damage to the overall user experience.

2012 Etsy took some time to realize the infinite pull-down interface, but found that the new interface does not work as a paging mode interface. Despite the strength of the trading volume, user engagement has been reduced-and now people are using search less frequently.

Etsy's unlimited drop-down search interface. The current version has paging.

"People would want to go back and look at the list of search results to check the items they've just seen and compare them to what they see elsewhere in the list," Dmitry Fadeyev points out. The infinite pull-down mode not only destroys this dynamic, but also makes it difficult to move the list up and down, especially when you return to the page at another time, but find that you have to start over again, have to swipe down the list again, and wait for the results to load. In this case, the infinite dropdown mode is actually slower than the score page mode. ”

Disadvantage #3: Irrelevant scroll bars

Another annoying thing is a scroll bar that does not reflect the amount of data actually available. You might be happy to slide the page, thinking you're getting close to the bottom, which may make you slip a little bit more, and the result will be just doubled when you arrive. From the point of view of accessibility (accessibility), it is really bad to affect the user's use of the scroll bar.

The scroll bar should reflect the actual page length

Disadvantage #4: missing the bottom bar

There's a reason for the bottom line: they contain information that users sometimes need--once they find something or want to get more information, they often look for the bottom of the fence. But because of the infinite pull down, the user touches the bottom of the same time, there will be more data loading, each time the bottom bar to push out of sight.

When LinkedIn introduced an infinite drop-down in 2012, it intercepted the screen before the user loaded the new content.

For sites that use unlimited drop-down, you should have the bottom bar pinned to the bottom of (the Web page) or the link moved to the top bar or sidebar .

Facebook has moved all bottom links (such as "Legal notices" and "careers") to the right sidebar.

Another solution is to load more buttons as needed by using a load. New content does not load automatically unless you click Load more buttons. This makes it easy for users to reach your bottom bar without chasing.

Instagram uses the "Load more" button to allow users to touch the bottom bar.

Paging mode

Paging mode is a user interface model that decomposes content into separate pages. If you pull down to the bottom of the page, you see a bunch of numbers--that's the page for this site or app.

Page out

Advantage #1: Excellent conversion effect

Paging mode is useful when users need to retrieve specific content in the search results list, rather than just browsing through the stream.

You might use Google search as an example of the advantages of the paging model. Looking for the best search results, short only takes a few seconds, and long hours, depending on what you search for. But when you decide to stop searching for Google in the current mode, you know the exact number of search results. You can decide where to stop or how many search results you need to read.

Google Search Results data

Advantage #2: Sense of control

Infinite pull-down like an endless game? No matter how long you've been down, you'll feel like it's never going to end. Users are more able to make more informed decisions when they know the number of search results, rather than when they are left to face an infinite dropdown form. According to David Kieras's study of the psychology of human-computer interaction, "Reaching the end provides a sense of control." _”。 The study also clarified that when users are limited but there are still relevant results, it is easy for them to make sure that they are looking for the end.

When a user sees the total number of results (when the total number of results is not unlimited), they will be more likely to look for a long time to find the time they need.

Advantage #3: Project location

A paged interface gives the user a sense of the approximate location of the project. They may not know the exact page number, but they will remember the approximate location, while the pagination link makes the process easier.

When paging is used, users can control their browsing, because they know which page they can click to go back to where they previously browsed.

The paging mode is ideal for websites and applications of e-commerce nature. When users shop online, they want to go back to where they left off and continue shopping.

MR Porter Web site uses paging mode

Disadvantage: Extra action

In paging mode, if you want 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.

Click to get Content

The main problem here is that most Web sites only display very limited content for users on a single page. Only if you make your Web page longer and do not affect the load speed, you can enable users to get more content on a single page without clicking the paging button.

When do I use the infinite dropdown/paging mode?

In only a few situations, the infinite dropdown mode will be quite useful. It's great for websites and apps that users generate content (Twitter, Facebook) or visual content (Pinterest, Instagram). Paging mode, on the other hand, is a safe choice and an excellent solution for websites and applications that meet the user's goal-oriented activities (goal-oriented activities).

Google's experience at this point is a good example. Google Pictures has an unlimited dropdown mode, because users are faster than text to browse and understand images. It takes longer to read the search results. That's why Google search still uses paging mode.

Conclusion

Designers need to make a choice after weighing the pros and cons of both models. The choice depends on how you communicate your design context and content. In general, the infinite pull-down mode applies to websites like Twitter, where users consume a constant stream of information, do not need to look for something specific , and the paging mode is useful for search pages where users need to find specific items and have browsed records .

Source: Medium-nick Babich Translations: Nuggets translation Program-Ruixi

"Should I choose infinite dropdown mode or paging mode for my project?" "Some designers are still struggling with what the project should choose between these two models. Each model has their advantages and disadvantages, and in this article we will outline both of these patterns and decide which one to choose for our project.

Infinite drop-down mode

The infinite dropdown mode allows the user to make the page endless when browsing a large amount of information, and it is not complex to implement, as long as the user updates the page when it falls. It sounds tempting, but this model is not a surefire plan for all websites or apps.

Unlimited drop down

Advantage #1: User engagement and content discovery

When you use scrolling as the primary way to retrieve data, it may allow users to stay on your page longer, and user participation increases. With the popularization of social networks, a great deal of information is consumed; infinite pull-down provides an effective way to navigate the sea of information without waiting for the page to preload.

Unlimited drop-down is a must-have feature for almost every discovery interface . In situations where users do not search for specific content, they need to read huge amounts of information to discover things they are interested in.

Pinterest's massive pins

You might use the Facebook news feed as an example of the benefits of an unlimited pull-down model. Obviously, because the content is refreshed more frequently, users know that they don't see everything in the flow. By using the Unlimited dropdown mode, Facebook tries to present as much information as possible to the user, while the user browses and consumes the stream.

Facebook News Feeds keep users from slipping to refresh content

Advantage #2: Pull-down is easier to operate than clicks

the user is more familiar with the drop-down relative to the click . The mouse wheel or touch screen makes the pull-down (action) easier and quicker than clicking. For continuous and lengthy content, such as a tutorial, the drop-down mode provides better usability relative to dividing text into several different screens or pages.

Click events: Each time a content refresh requires an additional click action, and the time to wait for the page to load. Drop-down: Content refresh requires only a drop-down action. Image source: Designbolts

Advantage #3: Drop-down applies to mobile devices

the smaller the screen, the longer it pulls . The popularization of mobile browsing is another important support of long pull-down. The gesture of the mobile device makes the drop-down (action) intuitive and easy to use. As a result, users can enjoy a truly responsive experience, regardless of the device they are using.

Source: dribbble

Disadvantage #1: Page performance and device resources

page loading speed means everything for a good user experience . Several studies have shown that slow loading can lead people to leave your site or uninstall your app, which means low conversion rates. This is a bad thing for people who use the infinite pull-down pattern. The more users pull down, the more content is loaded on the same page. As a result, page performance is getting slower .

Another problem is the performance limitations of the user device. In many sites that have unlimited pull-down, especially those with a lot of pictures, devices with limited performance, such as the ipad, can be slowed by the amount of data that is being loaded.

Disadvantage #2: Project Search and positioning

Another problem with infinite pull-down is that when a user selects a point in the stream, they cannot mark it and return to it later. Once you leave the site, they lose all of their progress and have to pull back to their original location. The inability to determine the location of the dropdown will not only cause annoyance or confusion for the user, but will also result in damage to the overall user experience.

2012 Etsy took some time to realize the infinite pull-down interface, but found that the new interface does not work as a paging mode interface. Despite the strength of the trading volume, user engagement has been reduced-and now people are using search less frequently.

Etsy's unlimited drop-down search interface. The current version has paging.

"People would want to go back and look at the list of search results to check the items they've just seen and compare them to what they see elsewhere in the list," Dmitry Fadeyev points out. The infinite pull-down mode not only destroys this dynamic, but also makes it difficult to move the list up and down, especially when you return to the page at another time, but find that you have to start over again, have to swipe down the list again, and wait for the results to load. In this case, the infinite dropdown mode is actually slower than the score page mode. ”

Disadvantage #3: Irrelevant scroll bars

Another annoying thing is a scroll bar that does not reflect the amount of data actually available. You might be happy to slide the page, thinking you're getting close to the bottom, which may make you slip a little bit more, and the result will be just doubled when you arrive. From the point of view of accessibility (accessibility), it is really bad to affect the user's use of the scroll bar.

The scroll bar should reflect the actual page length

Disadvantage #4: missing the bottom bar

There's a reason for the bottom line: they contain information that users sometimes need--once they find something or want to get more information, they often look for the bottom of the fence. But because of the infinite pull down, the user touches the bottom of the same time, there will be more data loading, each time the bottom bar to push out of sight.

When LinkedIn introduced an infinite drop-down in 2012, it intercepted the screen before the user loaded the new content.

For sites that use unlimited drop-down, you should have the bottom bar pinned to the bottom of (the Web page) or the link moved to the top bar or sidebar .

Facebook has moved all bottom links (such as "Legal notices" and "careers") to the right sidebar.

Another solution is to load more buttons as needed by using a load. New content does not load automatically unless you click Load more buttons. This makes it easy for users to reach your bottom bar without chasing.

Instagram uses the "Load more" button to allow users to touch the bottom bar.

Paging mode

Paging mode is a user interface model that decomposes content into separate pages. If you pull down to the bottom of the page, you see a bunch of numbers--that's the page for this site or app.

Page out

Advantage #1: Excellent conversion effect

Paging mode is useful when users need to retrieve specific content in the search results list, rather than just browsing through the stream.

You might use Google search as an example of the advantages of the paging model. Looking for the best search results, short only takes a few seconds, and long hours, depending on what you search for. But when you decide to stop searching for Google in the current mode, you know the exact number of search results. You can decide where to stop or how many search results you need to read.

Google Search Results data

Advantage #2: Sense of control

Infinite pull-down like an endless game? No matter how long you've been down, you'll feel like it's never going to end. Users are more able to make more informed decisions when they know the number of search results, rather than when they are left to face an infinite dropdown form. According to David Kieras's study of the psychology of human-computer interaction, "Reaching the end provides a sense of control." _”。 The study also clarified that when users are limited but there are still relevant results, it is easy for them to make sure that they are looking for the end.

When a user sees the total number of results (when the total number of results is not unlimited), they will be more likely to look for a long time to find the time they need.

Advantage #3: Project location

A paged interface gives the user a sense of the approximate location of the project. They may not know the exact page number, but they will remember the approximate location, while the pagination link makes the process easier.

When paging is used, users can control their browsing, because they know which page they can click to go back to where they previously browsed.

The paging mode is ideal for websites and applications of e-commerce nature. When users shop online, they want to go back to where they left off and continue shopping.

MR Porter Web site uses paging mode

Disadvantage: Extra action

In paging mode, if you want 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.

Click to get Content

The main problem here is that most Web sites only display very limited content for users on a single page. Only if you make your Web page longer and do not affect the load speed, you can enable users to get more content on a single page without clicking the paging button.

When do I use the infinite dropdown/paging mode?

In only a few situations, the infinite dropdown mode will be quite useful. It's great for websites and apps that users generate content (Twitter, Facebook) or visual content (Pinterest, Instagram). Paging mode, on the other hand, is a safe choice and an excellent solution for websites and applications that meet the user's goal-oriented activities (goal-oriented activities).

Google's experience at this point is a good example. Google Pictures has an unlimited dropdown mode, because users are faster than text to browse and understand images. It takes longer to read the search results. That's why Google search still uses paging mode.

Conclusion

Designers need to make a choice after weighing the pros and cons of both models. The choice depends on how you communicate your design context and content. In general, the infinite pull-down mode applies to websites like Twitter, where users consume a constant stream of information, do not need to look for something specific , and the paging mode is useful for search pages where users need to find specific items and have browsed records .

Unlimited drop-down or paging?