Our website uses cookies to improve your user experience. If you continue browsing, we assume that you consent to our use of cookies. More information can be found in our Cookies Policy and Privacy Policy.

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.

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 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 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 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 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.

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

The physical stores were supported by a new online shop – amazon.com/mycalvins – where additional products were available. In-store consumers were able to engage with a range of new Amazon technology, including instant access to online product reviews. All very cool, high-tech… a great fit for both brand and retailer.

Latest

According to a newly-published study published by Pew, nearly three-quarters of Facebook users polled said they didn’t know that Facebook generates and stores data about their interests and traits, and, when they came to learn this, over half indicated that they were uncomfortable with Facebook’s practice.

Mastercard, the third-largest credit card processor in the US, has announced a new policy that will make it more difficult for some businesses to automatically convert free trials into recurring subscriptions.

The water industry has faced huge change in recent years. A rising tide of challenges including climate change, population growth, ageing infrastructure, changing customer expectations and regulatory intervention from Ofwat mean water companies are under pressure to perform.