For many, pagination is a typically forgotten page element, an afterthought, or something not taken seriously when constructing the page layout for product listing pages.
In fact, the best practice treatment of the pagination page element contributes to creating amazing online experiences.
If you want to know why and how it contributes, read on.
Product listing page defined:
A product listing page is defined as the page on an ecommerce site where the retailer presents all products within a specific category. This page typically comprises…
- Thumbnail images of specific products
- Specific content on each product (product title, pricing, review rating etc…)
- Filtering and sorting options
- And in most cases, this page contains some form of pagination
An example of this page in action can be seen on Boohoo.com in Figures 1 (desktop) and 2 (smartphone):
Figure 1 – Boohoo product listings page on desktop
Figure 2 - Boohoo product listings page on smartphone
If the pagination method is constructed within the realms of best practice, there are many ways this page element contributes creating great experiences. This article addresses three:
- Sticking to convention
- Offering consumers multiple options to engage
- Delivering a visual frame of reference
Sticking to convention:
Google has been using and continues to use, pagination for all its results pages. It’s irrelevant that users rarely go to page two.
Figure 3 - Google on desktop
Figure 3a - Google on smartphone
The constant exposure to this form of results presentation contributes to creating pagination as convention.
Presenting convention within consumer journeys is the foundation of creating usable (and great) experiences. Convention provides consumers the ability to recognise page elements and their functional behaviour without exerting any mental effort.
Sticking to convention throughout the consumer’s journey provides consumers with a sense of being in full control, an important aspect of creating great experiences.
When discussing the top mistakes in web design, NNGroup has this to say on how convention contributes to creating amazing experiences….
Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen. Instead, they know what will happen based on earlier experience.
The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it. And the more the system breaks users’ expectations, the more they will feel insecure.
UX Magazine (UXMag.com) has this to say about leveraging standard convention:
Users that are dumped into a website will be looking for familiar elements to interact with. If users get confused during an experience, they will look for standard conventions for guidance.
Users often have to understand many different elements and how they work together quickly. If a user isn’t able to understand the conventions used within a couple seconds, statistics show they’re likely to leave.
Standard conventions do not need to look the same, its more about utilising the same mental model.
Standard conventions are literally intuitive micro-experiences in their own right and needs to be thought of in this way. Creating new innovative experiences can work, however, it’s the splicing together of innovative design with standard convention that ensures an experience is intuitive and usable.
Offering consumers multiple options to engage:
Providing consumers multiple options to engage with content provides consumers a sense of control. Anthony Mayfield writes in Forbes about the importance of consumers having full control of their journey referring to them as the “empowered customer”.
Presenting multiple pagination options delivers another layer of control. Some examples of what pagination elements can be offered and is considered best practice:
- Adjusting the number of products to be viewed per page
- Easy for consumers to move forward and backwards from one page to another
- Providing consumers the ability to view all products on a single page
House of Fraser is a good example of pagination in action (see Figure 4 below):
Figure 4 – House of Fraser product listings page on desktop
The House of Fraser pagination elements deliver the following:
- Consumers can select different volumes of products to view per page
- Consumers have an option to view all products
- Consumers can view products in a grid pattern of 3 or 4 per row
- Consumers have a very simple method to moving both forwards and backwards between pages
House of Fraser translates the pagination elements to smartphones the following way.
Figure 4a – House of Fraser product listings page on smartphone
The mobile pagination options shown in Figure 4a are reduced to emphasise the filter and sorting options. However, when the consumer scrolls down to the bottom of the page he/she is delivered with two options (that are great finger targets) (see Figure 5 below):
- “Show More”
- “Back To Top” (this remains on the screen throughout scrolling)
Figure 5 – House of Fraser ‘show more’ on smartphone
The “Show More” element is how House of Fraser has translated pagination for smartphones. While this is an obvious action, the output of this action comes with ambiguity. The consumer’s mental effort increases because he/she needs to think about what is going to happen if “Show More” is selected.
It’s obvious “Show More” means show more products, but how many more products? The consumer needs to assume, by viewing “Showing 1 – 30 of 5358” (in Figure 5), they will be presented with another 30 products. This assumption gathering is mental effort.
If House of Fraser does not wish to present the pagination flexibility as seen in their desktop experience, why not consider changing “Show More” to “Show Another 30 Products” at the very least? It’s more obvious and less mental effort is required.
A good example of conventional pagination treatment on smartphones is Boohoo.com which presents pagination both at the top and bottom of their product listing pages (see Figure 6, below, to show what the pagination treatment at the bottom of the page for Boohoo looks like):
Figure 6 – Boohoo pagination elements on smartphone
Figure 7, below, shows how John Lewis treats the pagination element at the bottom of its smartphone page, its use of convention is similar to Boohoo.com:
Figure 7 – John Lewis pagination elements on smartphone
Debenhams takes convention and modifies it slightly to introduce a more concise and yet still intuitive pagination element at the bottom of their smartphone product listing pages (see Figure 8 below).
Figure 8 – Debenhams pagination on smartphone
This is a great example of utilising the pagination “mental model” and making it easier for consumers to move forward and backwards on smartphone screens.
Consumers understand there are 35 pages of products, and are presented with an easy and obvious method to move to page 2. Once the consumer moves to page 2, they are presented with both “Next” and “Previous” page elements at the bottom of the page (see Figure 8a below).
Figure 8a – Debenhams ‘previous’ and ‘next’ buttons on smartphone
Delivering a visual frame of reference:
Retailers and their digital teams work to engineer intuitive forward moving experiences, but few consider and develop elegant back step experiences.
The notion that consumer journeys only flow in a forward pattern is not real life.
To create amazing online experiences, planning and consideration is required to develop elegant forward and backward steps throughout designed journey paths.
The region of a retail site where back steps are most common are on product listing pages. Consumers commonly move from the product listing page to a product detail page and back again.
This back and forth behaviour is known as “pogo sticking”.
The hub-and-spoke pattern of navigation from a routing page – search-engine results page, product-category page, or similar – to a deeper page in the site’s hierarchy, then immediately back to the routing page is referred to as pogo sticking.
Pogo sticking increases a consumer’s effort to find what he/she is looking for resulting in an “increased interaction cost and a decrease in engagement over time”.
When retailers are analysing consumer paths in and around their product listing pages and sees high engagement, this is not necessarily a good thing.
Retailers need to acknowledge this behaviour and work to support this behaviour by improving the intuitive standard of these back-and-forth experiences when they occur.
This consumer behaviour is relevant to this narrative because of the consumer’s need for a frame of reference when he/she moves from a product detail page back to the product listing page. Pagination delivers on this need for visual validation as to where he/she is within a specific category.
The ‘fear of missing out’ – FoMO:
The frustration brought on by pogo sticking is compounded for those consumers influenced by the psychological heuristic known as the fear of missing out (FoMO).
A “heuristic” is a decision-making shortcut people adopt to simplify and speed up decision making, these govern automatic judgements and influence behaviour.
FoMO can influence consumer behaviour for those in the early stages of buying. This from Dr. Dan Sherman who has written a book on this behaviour:
FoMO is experienced as a clearly fearful attitude towards the possibility of failing to exhaust available opportunities and missing the expected joy associated with succeeding in doing so.
It all begins with a growing awareness of the virtually endless selection of attractive options for the consumer to choose from. Then there’s the consumer’s conceived ability to exhaust as many of the options that she would like to.
Dr Sherman’s comment on the “virtually endless selection of attractive options” is a real problem for consumers in today’s world. Consumers are now confronted with many options when landing on category pages comprising thousands of products to choose from.
FoMO is the catalyst behind pogo sticking behaviour.
FoMO in the context of product listing pages and pagination
When consumers are in the middle of a pogo sticking behaviour and head back to the product listing page (from a product page), they need a clear frame of reference to verify they are in the exact same place where they originally left.
It’s obvious when consumers are on page 1 of a product listing page but imagine (for a moment) a consumer on page 10 of 20 pages. A frame of reference in this scenario adds value and reduces a consumer’s mental effort.
Pagination (if visually treated properly) serves as this frame of reference.
Pagination can quickly validate the consumer is back in the right region of the category giving them confidence they have not missed out on viewing other products.
User research has found consumers coming back to the middle of a product listing page will scroll up or down to view the pagination element.
Boohoo.com, shown in Figure 9 below, is a good example of the best practice visual treatment of pagination in action.
Figure 9 – Boohoo pagination to eliminate FoMO
Figure 10 shows good treatment of pagination at the bottom of the page:
Figure 10 – Boohoo pagination in desktop
Those of you reading this may be thinking consumers can use the product they clicked on as another frame of reference. Yes, this is true, but is not the solution all of the time.
Consider a consumer who uses filters to present a specific style and colour of a garment/product? Or a consumer looking at a similar type of electronics product such as a digital camera or washing machine?
In figures 9 and 10 (above) the consumer has over 10 pages of black boots to review. The suggestion of asking consumers to use their memory to assist in developing a frame of reference increases their mental effort.
Users needing to remember information on one page and apply it to a different one requires cognitive effort.
Reducing this type of effort (mental) contributes to making a site more “usable”.
Conclusion – Balancing both Physical and Mental effort:
Retailers and UX practitioners supporting other forms of product presentation (“continuous scrolling”, “lazy loading”) do so because it reduces a consumer’s physical effort. There is less physical clicking to see more content. (Side note: scrolling is still physical effort)
While in concept these methods appear beneficial, there this little consideration for the consumer’s mental effort.
To create amazing, intuitive and usable experiences requires the cost of interaction, by the consumer, to be as low as possible. Lowering “interaction cost” requires the reduction of both physical and mental effort.
While it’s impossible to completely extinguish interaction cost, it is the job of the retailer to reduce it as much as possible. To achieve this requires the lowering of both physical and mental effort.
A consumer is comfortable in applying more physical effort if it makes intuitive sense (in essence, reducing their mental effort).
Human nature demands hierarchy and structures that are easy to navigate. Infinite scrolling leaves users feeling disoriented as they travel down a page that never ends.
Infinite scrolling often causes a consumer’s position to get lost when “pogo sticking”. The scroll position is lost when navigating to the product page forcing consumers to scroll back down the page each time.
Etsy.com implemented infinite scrolling only to find it led to fewer clicks and fewer purchases. Once all the data proved this to be true, they went back to pagination (see Figure 11).
Figure 11 – Etsy has reverted back to pagination after experimenting with infinite scroll
Further reading for Econsultancy subscribers: