Loading Products

Question 1

What is optimizing load performance?

Answer 1

Making products load in as fast as possible (or at least make them appear to do so) without unnecessarily taxing the user’s device and internet connection, and the site’s servers.

Question 2

What type of Pagination is a superior implementation then pagination pages and endless scrolling?

Answer 2

Test sessions found ‘Load more’ buttons combined with lazy-loading to be a superior implementation resulting in a more seamless user experience.

Question 3

What does the Pagination Method mean?

Answer 3

The pagination method is used to refer to any product loading technique that fetches products in increments.

Question 4

What are the three dominant pagination methods?

Answer 4

1. Pagination: Where the list items are broken into separate pages that are presented as links the user can click.
2. Endless scrolling: Where once the user approaches the end of the initially loaded list more products are automatically fetched and appended.
3. Load more: Where a single button appears at the end of the initially loaded product list which the user can click to fetch and append additional products to the list

Question 5

What is Per page?

Answer 5

The term ‘items per page’ is used to denote each new set of products loaded, this term is used regardless of whether the items are loaded as a separate page (i.e. pagination) or appended onto the current page (i.e. ‘endless scrolling’ or a ‘load more’ button)

Question 6

How does maintaining a user’s position in the product list after navigating to a product page affect their browsing experience?

Answer 6

Maintaining a user’s position in the product list after navigating to a product page is crucial for a seamless browsing experience. When users are returned to the same point in the list, they can easily resume scanning downwards knowing that they have already viewed the products above. However, if they are not returned to that same point, they must spend extra time scrolling to find the product they just investigated, leading to frustration and potentially deterring further exploration. Therefore, ensuring users are returned to their previous position in the product list is essential for optimizing user experience and encouraging continued engagement.

Question 7

How does being taken to the top of the product list after visiting a product page affect users?

Answer 7

Being taken to the top of the product list after visiting a product page can disorient users and disrupt their browsing experience. Users must then expend effort to relocate their previous position in the list, which can be tedious and time-consuming. This task becomes particularly challenging if the product list contains similar items with subtle differences, making it difficult for users to remember their exact previous location. Depending on the structure of the website and the number of items in the list, refinding the correct position can range from moderately inconvenient to extremely frustrating for users.

Question 8

How does returning users to the correct place in the product list enhance the browsing experience?

Answer 8

Returning users to the correct place in the product list enhances the browsing experience by making product finding more efficient. Users can seamlessly resume scrolling through the list without wasting time refinding the item they last viewed. This functionality streamlines the browsing process, allowing users to focus on exploring additional products rather than repeating their previous search efforts.

Question 9

What technical implementation detail is crucial for ensuring users are returned to the correct place in the product list?

Answer 9

To ensure users are returned to the correct place in the product list, “Back” button support through ‘history.pushState’ is critical. This implementation detail allows the browsing history to be updated dynamically, enabling users to navigate back to the list without losing their position.

The HTML5 History API allows sites to honor users’ expectations of where they’ll end up when going back from a product page to a product list. More specifically, the history.pushState() function allows a site to invoke a URL change without a page reload, meaning the site can align the browser “Back” button behavior to match user expectations. The URL needs to be altered on each “Load More” click so the correct product list content can be loaded when a user moves backwards.

Question 10

What should happen when users press their browser’s “back” button after navigating to a product details page from a product list page?

Answer 10

The user should be taken back to the same location in the product list they were at before navigating to the product page

Question 11

What would happen if a suboptimal product-loading method is used?

Answer 11

Users may have difficulty loading more results or may be overwhelmed by the number of products loading.

Question 12

What is the most optimal product loading method for category-based product lists and search results?

Answer 12

Load More (combined with lazy-loading). Make sure that the “Back” button is correctly supported when navigating back and forth between product lists and product pages.

Question 13

What are the benefits of using a “Load More” product schema?

Answer 13

1. Users can compare all items on one page
2. Access to the footer is easy
3. There’s a natural stopping point to encourage users to consider the next steps.
4. It’s the best choice for mobile

Question 14

Why is it important that users get access to the footer easily?

Answer 14

Site footers often hold links to vital “Help” pages and other information, and maintaining easy access to them is important.

Question 15

Why is it important to give users a natural stopping point in the product list?

Answer 15

Users become overwhelmed by the number of products being automatically added to the list.

Question 16

What are the benefits of a load more button when it used as a natural stopping point?

Answer 16

Users will pause and consider the existing items more closely before adding more to the list. Some will find sufficient items to start a comparison, while others may decide to redefine the list by, choosing different filters, updating the search term, or choosing a different sorting criterion.

Question 17

What is the most suitable loading schema for touch interfaces?

Answer 17

Load more.

Question 18

What is lazy-loading?

Answer 18

Defers loading of images outside of the viewport at page load time and loading them at the moment of need) This means that 10-30 products should be displayed on initial page load and then another 10-30 should be lazy-loaded products until reaching 50-100 products. Then display a “Load more” button.

Once users click the button, another 10–30 products should be loaded in, resuming the lazy-loading until the next 50–100 products have loaded in, at which point the “Load More” button once again appears. (The number of products to load is purposely written as intervals as the ideal figure depends on your site context and industry

The “Load More” button threshold is used to determine when the user should be interrupted, while the lazy-loading threshold is merely a performance optimization to reduce load times and server load.

Question 19

What do users rely on the most as a way to compare products rather than trying to perform a comparison in the product list?

Answer 19

Users rely more on the cart, save feature, as well as comparison features for spec-driven products.

Question 20

What are the 2 implementation details to follow when using the pagination product list schema?

Answer 20

1. Ensure pagination links are highly visible
2. Ensure sufficient sizing and spacing on mobile sites
3. Pagination links need to stand out from surrounding clutter

Question 21

Why is it recommended that you avoid “Endless Scrolling”?

Answer 21

When products are loaded automatically, some users will be overwhelmed by the number of products loading or may overlook suitable items.

When users find that more products have been loaded unexpectedly, some will feel that their control over the content of product lists has lessened.

Question 22

What are the three issues observed during testing when sites used “Endless Scrolling”?

Answer 22

1. Users can get overwhelmed when too many products are loading
2. It’s very difficult to access the footer
3. There’s no natural stopping point in the list

Question 23

What issues occur with endless scrolling on mobile?

Answer 23

Users complained that there were too many products loading.
Because of the smaller viewport, users can get disoriented more easily than on desktop, which in turn reduces their sense of control and unexpected loading of products will only exacerbate this feeling, and could well reduce the focus on products.

Likewise, the smaller viewport means that mobile users have less of an overview of where they are in the list — especially if they hadn’t noted the number of products loaded (see #531 and #377) at the top of the page. They’ll have little idea of how many more products might be loaded — which only adds to the sense of a lack of control. All in all, mobile users are more easily distracted and affected by unexpected occurrences and are therefore more likely to be negatively affected by the addition of more products to the list that they hadn’t initiated.

Question 24

With dynamic product loading in place, how many products should you load on desktops?

Answer 24

100-150

Question 25

With dynamic product loading in place, how many products should you load on desktops for spec-driven lists?

Answer 25

50-100

Question 26

With dynamic product loading in place, how many products should you load on mobile?

Answer 26

50-30 items at once regardless of the list type

Question 27

How many products should you show by default?

Answer 27

Testing showed that participants had no trouble browsing over 100 products at once on desktop, especially on sites with visually driven products like appeal. So it’s a matter of balancing page performance and the point at which users should be prompted to load more products.

Page performance can be optimized with a smart loading implementation, while the question of when to nudge users to load more products depends on the type of products in the list and whether users are on a desktop or mobile site.