Product Lists & Filtering

Question 1

Which of the following design patterns were observed to be effective when attempting to visually separate mobile product list items?

Answer 1

1. Using lines and border
2. Using white space
3. Using alternating background shading

Question 2

Hierarchy-based breadcrumbs fulfill which of the following functions?

Answer 2

1. They help users orient themselves within the site’s structure
2. They provide users with an efficient way to navigate down the site’s hierarchy and narrow the scope of the product list
3. They provide users with an efficient way to navigate up the site’s hierarchy to broaden the scope of the product list

Question 3

What type of product list layout would be appropriate for an apparel site?

Answer 3

A grid layout, so that the product images can be emphasized

Question 4

What type of product list layout would be appropriate for a mass merchant site (e.g., Walmart, Amazon)?

Answer 4

Either layout can be used, but only one layout should be used throughout the site

Question 5

Spec-driven products

Answer 5

are those products where one spec or a set of specs (beyond price) are vital to the user’s product selection, evaluation, and purchasing processes. Examples of typical spec-driven products and categories are electronics, home appliances, tools, automotive, office, and industrial equipment – products where certain specs are of great importance and often correlate directly to the price.

Question 6

Visually-driven products

Answer 6

are those products where the product’s aesthetics is the user’s primary decision parameter, which is typical for apparel, home decoration, furniture, etc.

Question 7

When is it appropriate to subdivide a product list (i.e., into multiple sections or categories)?

Answer 7

Sites should always avoid subdividing product categories

Question 8

When list items take up too much vertical space in the viewport users lose overview of their options, often missing out on clearly better options in the list, and may become disoriented.

Answer 8

Never have list items taller than half the screen height on a currently available standard smartphone in portrait mode.

Question 9

What issue were observed to arise when mobile product list items were too tall on mobile devices?

Answer 9

Users have a difficult time getting an overview of the product available in the product list

Users have a difficult time comparing products to one another within a product list

Users might incorrectly assume that they are looking at a product details page

Question 10

Ads above or within the product list can distract users, cause them to overlook suitable items, and slow product finding.

Question 11

Avoid placing ads above or within product lists.

Answer 11

Ads for internal promotions and features can — when linking to relevant content — be helpful to users. However, during testing, a large number of the participants were led astray by poorly placed ads. Specifically, ads placed above and within product lists slowed product finding and made it harder for users to start assessing list items.

Question 12

Which of the following locations are appropriate when placing banner ads in product lists?

Question 13

Which of the following locations are appropriate when placing banner ads in product lists?

Answer 13

At the bottom of the product list, if they are primarily graphical (e.g., not a list of text links)

In a left- or right-hand sidebar

Question 14

What is dependent on when to nudge users to load more products?

Answer 14

It depends on the type of products in the list and whether users are on a desktop or mobile site.

Question 15

What is one reason why websites often load only a limited number of products at once?

Answer 15

Concerns over slow-loading pages drive websites to load fewer products simultaneously. This approach reduces the amount of data that needs to be downloaded and decreases the number of graphics that users’ devices must render. As a result, the impact on the performance of the average page visit is substantially reduced.

Question 16

What challenges can arise from loading a large number of products on websites?

Answer 16

Loading a large number of products can pose significant challenges for users’ devices and internet connections. The extensive data and graphics involved can strain devices, particularly older or less powerful ones. Moreover, on slower internet connections, the process can be time-consuming, leading to frustration for users who expect quick access to website content.

Question 17

Why might some users hesitate to load additional products on a website?

Answer 17

Some users may be reluctant to load additional products due to various factors. Many perceive loading more products as a commitment to the current scope, requiring effort, patience, and further scanning to review newly loaded items. As such, they often wait until they feel confident they’ve found the “right” scope of products or product categories before investing time in loading additional items.

Question 18

What potential negative impact can loading fewer products at once have on users’ ability to find products on a website?

Answer 18

Loading fewer products at once can negatively affect users’ product-finding abilities in several ways. When only a limited number of products are loaded, users may not be presented with a representative set of products from the entire range available on the website. Consequently, during testing, some participants abandoned sites with relevant products because they underestimated the extent of the product range. This indicates that loading too few products can be detrimental to users’ ability to effectively find the products they are looking for.

Question 19

What is dynamic fetching?

Answer 19

Dynamic fetching is a technique where content is loaded asynchronously as it’s needed rather than all at once when a page or application is first loaded. This can include loading data, images, scripts, or other resources based on user interactions or other specific conditions.

Implementation
Lazy Loading: One common method of dynamic fetching. Content (like images or sections of text) only loads when it enters the viewport or when a user scrolls to that part of the page. This reduces initial load times and saves bandwidth.
Infinite Scrolling: Another implementation where, as the user scrolls down a page or list, more content is dynamically fetched and appended to the bottom. This technique is often used in social media feeds and content-rich sites.
Ajax Requests: Ajax (Asynchronous JavaScript and XML) allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means a part of a web page can be updated without reloading the whole page, enhancing the user experience by making the application feel smoother and more responsive.

Question 20

What is the ultimate goal when determining the number of products to display on a website?

Answer 20

The ultimate goal is to strike a balance, aiming for the “sweet spot” where users are exposed to a sufficient number of products. This number should allow them to comfortably scan a reasonably representative set of products without feeling overwhelmed by an excessive amount.

Question 21

On desktop sites, approximately how many products should be loaded at once?

Answer 21

Between 50 and 150 products, depending on the type of product

Question 22

On mobile sites, approximately how many products should be loaded at once?

Answer 22

Between 15 and 30 products, depending on the type of product