Subscribe
Subscribe to our newsletter for
more transformative digital insights
Infinite Scrolling vs Pagination Navigation
Infinite Scrolling vs Pagination Navigation
How do UI/UX design choices, specifically navigation, impact brand expression?
Brand attributes can be expressed in many ways. When brands want to develop a new product experience, they often have to reevaluate existing user habits and make fundamental changes. This, however, does not mean that brands must rebuild their platform, product or service from scratch.
When Tinder came up with the “Swipe”, a breakthrough of its kind, the UI feature transcended beyond its original function and became enshrined as a pop culture reference. The feature design is not a product of the company’s goal to connect people, but rather is an innovation that resulted from utilization of simple and traditional UI/UX design principles that provide a tailored UX for the app’s 9.6 million daily users.
This is not to say that this type of innovative UI/UX design is suitable for all brands and their products or services. For example, if a similar “Swiping” feature were to be adopted in online retail stores, swiping to indicate dislike towards a certain product might adversely affect sales. Therefore, it is important to consider what interaction mechanisms best suit your brand.
In this article, we will explore the two most common navigation web designs and how they each help to develop your brand when utilized correctly.
Infinite Scrolling
The first type of web-design pattern is called infinite scrolling. Infinite scrolling loads content automatically as the user continues to scroll down the page. Pinterest and Google Image are wellknown examples that utilize infinite scrolling.
Infinite scrolling is best suited when your prime focus is on the exploration of content. Without the need to manually click or pause in between loads, users are more likely to stay longer on your website. This encourages users to consume greater amounts of content, as evidenced by the adoptaion of infinite scrolling by most social media platforms today:
Scrolling is more user-friendly than clicking, especially when it comes to browsing on mobile devices. Regardless of the hardware, scrolling requires only a small movement of the mouse or a simple swipe on a touch screen. Clicking, on the other hand, requires the conscious movement and positioning of the cursor or the finger, which exerts more energy. Doubled with the physical limitation of screen size, infinite scrolling is the clear choice when it comes to navigation pattern.
Infinite scrolling does, however, have its disadvantages.
Bookmarking
Skipping back and forth between content can be difficult on infinite scrolling. When content loads automatically, it is troublesome for users to revisit a previous piece of content without scrolling all the way back to the start. This becomes a taxing exercise and can therefore result in decreased user satisfaction.
Lost Efficacy of the Scrollbar
When content loads under infinite scrolling, it is difficult for users to identify exactly where they are in a page due to the absence of the vertical scrollbar. Therefore, it is difficult for users to know the quantity of content they have consumed and decide when to stop scrolling for more.
To illustrate, users on Pinterest are unable to effectively determine how much content they have viewed and how much content remains. They can only make an approximate guess according to the distance between where they are currently at and where the next automatic load will occur.
Absence of Footers
Because of the nature of infinite scrolling, footers cannot be placed at the end of the web page. Although most user usually don’t pay attention to footers, it is still a useful place to show important information or messages. Some brands deftly work their way around this flaw by making the footer a part of a “permanent” column, often located on the right side of the web page. This technique is most prominently used by Facebook:
Aimless Browsing
Although infinite scrolling presents a convenient way to scroll through content, the sheer quantity of it appearing on screen can cause users to simply not know when to stop scrolling. In situations like these, users then become drawn to search for certain key words or elements in order to narrow their search.
Therefore, infinite scrolling is more suitable in scenarios where order and rank do not play significant roles. In response to this, we can observe that desktop versions of e-commerce websites more often use pagination to display their products and relevant information.
On the mobile end, most e-commerce websites adopt automatic pagination but where content still automatically loads (similar to infinite scrolling). Scrolling provides the most user-friendly experience on mobile devices, and is therefore incorporated into automatic pagination. Additionally, this navigation type also provides other shortcuts such as “My Footprint” as well as “My Browsing History” to reconfigure product listings.
Limitation of System Storage
When users scroll through large quantities of content, the data loaded to view a page gradually increases. As the amount of data loaded approaches the system limitation, page loading might gradually become slower.
In summary, infinite scrolling is most applicable to the following scenarios: when users don’t need to browse items individually and when it is difficult to determine the quantity of content needed to complete the search. This encourages users to slowly discover content, as shown by the social media and content sharing platforms today, such as Pinterest, Dribble and Medium.
As shown below, infinite scrolling was created for ETRO’s WeChat e-commerce store homepage by MADJOR. Users are able to browse through items by scrolling leftwards and rightwards, thereby encouraging customers to discover more products. Additionally, by using the ‘Filter’ section, users are still able to see ETRO’s product categories. Clicking ‘More’ on the right side redirects users to the infinite scrolling page of a specific product category. These combined create an immersive browsing experience for the consumer.
Pagination
The second type of navigation is pagination.
When users browse through documents, the system does not always show information all at once. Rather, documents first need to be sorted into groups before they are presented. This is due to system requirements as well as its ability to provide users with a smooth browsing experience. Below are some examples of the pagination method:
One of the major advantages of pagination is that it clearly displays the quantity of content in a page. This makes up for infinite scrolling’s biggest flaw and prepares the user for the amount of content to be viewed. Pagination also allows users easily determine how much content they have previously browsed.
This type of navigation is especially suitable for search engines, where users wish to know how much content they have viewed so that they could determine exactly when to stop. Search engines such as Baidu, Bing and Google all adopt the pagination method where most users only browse until the second or third page.
Pagination also prioritizes information. When users search for a specific term, pagination can effectively rank and prioritize content according to their degree of relevance to the user. This eliminates the need for users to filter information themselves. On Google, for example, 75% of user never scroll past the first page of results. This not only shows how effective Google’s algothirm is in prioritizing information, but also how pagination helps to appropriately display information.
Of course, pagination is not perfect. When compared to scrolling, clicking is inherently counterintuitive. Users have to exert more energy when navigating under pagination. When the clickable range of the page is too small, which is not uncommon, even a single click can become an annoyance to users as they have to constantly adjust their cursor positions before proceeding with the next step.
Another disadvantage of pagination is that it is not as immersive. The nature of pagination mean that there are going to be pauses in the process. As a result, users may stop the search process halfway, thinking that they have already browsed enough content. Therefore, under pagination, users tend to browse fewer quantities of content when compared to browsing using infinite scrolling.
The following scenarios call for the adaptation of pagination: when content needs to be pre-organized (i.e. e-commerce websites) and when content needs individual attention and not aimlessly explored. Products where a step-by-step usage guide is required serves as a good example when pagination functions better as the choice of navigation. MADJOR’s work on Restoria’s website exemplifies the effective design of pagination. Through clicking either the arrows or the page numbers, users can quickly go to their desired destination.
Another common application of pagination is the email interface. When the page displays around 10 to 20 results, users can quickly grasp the quantity of incoming mail and identify which ones need to be prioritized.
Conclusion
Through the comparison between infinite scrolling and pagination, it is clear that a seemingly simple decision can have great effects on brand expression and user experience. For UI/UX designers, it is important to work along with strategists and clients to better understand their needs as well as the brand’s positioning to ensure the end product can successfully achieve both business and brand objectives. Recognizing how different design choices interact with each other not only leads to a successful UI/UX design, but can also translate to success for the brand as a whole.