Product List Layout Flashcards

Product Lists & Filtering

1
Q

Why is the appropriate use of list vs. grid views important in product list design?

A

The appropriate use of list vs. grid views is crucial in product list design because it optimizes how the site’s products are presented, making it easier for users to quickly determine which items are relevant to their needs and which ones they can skip. Getting the product list view right is a key component of creating an effective and user-friendly list layout.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is another key aspect of a great product list layout, and why is it important?

A

Another key aspect of a great product list layout is helping users understand and evaluate their current scope—whether the category or search term is too broad, too specific, or just right. Without a clear understanding of the current scope, users may end up browsing through overly broad or overly narrow product selections, making it unnecessarily difficult for them to find relevant products. This confusion can even lead to site abandonment, as observed during testing.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Why is it important for users to navigate their product list scope easily, and what can help with this?

A

It is important for users to navigate their product list scope easily so they can adjust their scope, browse through the product list, dive into specific product pages, and traverse back up the hierarchy effectively. Hierarchy- and history-based breadcrumbs can greatly assist in this process by providing clear navigation paths and helping users understand their location within the site’s structure.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Why is a well-designed product list layout important for a great product browsing experience?

A

A well-designed product list layout is important because it serves as the foundation of a great product browsing experience by assisting users in comparing and contrasting information between list items, facilitating easy scanning, and reducing the need for users to ‘pogo-stick’ back and forth between the product list and individual product pages.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What are two specific issues with displaying product variations as separate list items in a product list layout?

A

The two specific issues with displaying product variations as separate list items are:

  1. It becomes difficult for users to get an overview of the product list or search results.
  2. It is challenging for users to locate all variations of products they are interested in.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is a major issue with displaying product variations as separate list items in a product list or search results?

A

A major issue with displaying product variations as separate list items is that it becomes difficult for users to understand the breadth of the product range. During testing, many participants became overwhelmed by the number of variations and found it challenging to determine how many unique products were actually available.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

How does listing product variations separately affect the ratio of unique products in a product list?

A

Listing product variations separately reduces the ratio of unique products in the list, making it appear cluttered. As a result, users have to spend more time scrolling through the list to identify unique products, especially if the variations are not grouped together.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Why might separate list items for product variations make it harder for users to find a product of interest?

A

If a user discards a product based on a particular variation, seeing other unwanted variations of the same product in the list makes it harder to find a product of interest. Users must sift through repeated instances of unwanted items, which can lead to frustration and potentially cause them to miss a suitable product that is further down the list.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

How could displaying too many variations of unwanted products affect a user’s perception of a product catalog?

A

Displaying too many variations of unwanted products could lead users to believe that the product catalog is less diverse than it actually is. For instance, if a user sees multiple variations of a few products on the first few pages, they might assume there are fewer options available and might not continue browsing to discover more products on subsequent pages.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What potential risk do smaller retailers, like direct-to-consumer (DTC) brands, face when listing product variations separately?

A

Smaller retailers, such as direct-to-consumer (DTC) brands, may risk misleading customers into thinking their product catalog is larger by listing product variations separately. This strategy can backfire, as it may clutter the list and overwhelm users, ultimately leading to a poor user experience and the perception that the catalog lacks diversity.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Why is the issue of clutter more severe on mobile devices when product variations are displayed as separate list items?

A

The issue of clutter is more severe on mobile devices because the smaller viewport allows fewer list items to be visible at once. This makes it harder for users to get an overview of the products, leading to difficulty in judging the diversity of the product catalog.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Why might some users not find the most suitable variation of a product when variations are listed separately?

A

Some users might not find the most suitable variation because they may not go to the product details page to see all variations and instead rely on the product list or search results. If the desired variation isn’t easily visible, users might assume it isn’t available and leave the site.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What is the advantage of combining product variations in a product list?

A

Combining product variations in a product list ensures that the list contains only unique products. This helps users get an overview of the available products more easily.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is the first step for sites that currently display separate list items for product variations?

A

The first step is to ensure that the variations are connected in the product database. Then, variations can be combined on the site with clear indications, and sites with multiple vendors should post-process product data to link variations of unique products.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Why is it beneficial to include swatches representing each product variation in list items?

A

Including swatches for each product variation in list items allows users to assess and compare products more thoroughly before visiting product pages. This is particularly important on mobile devices, but also beneficial on desktops, as it provides users with a fuller understanding of their options without needing to navigate away from the product list, reducing excessive movement between product lists and product pages.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What problems can arise when product variations are displayed as separate list items within a product list?

A
  1. Users may find it more difficult to find products of interest
  2. Users may think the product list is less diverse than it is
  3. Users may have difficulty locating the specific product variation they are interested in
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What navigational aids can help users understand their location within a site hierarchy and broaden the scope of a product list?

A

Clickable hierarchy-based breadcrumbs on category pages and in category product lists can help users understand their location within the site hierarchy and broaden the scope of the product list. Additionally, including “Sideways Breadcrumbs” can provide further navigational assistance.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What are hierarchy-based breadcrumbs, and what purpose do they serve?

A

Hierarchy-based breadcrumbs are navigational aids that indicate a user’s current location within the site hierarchy. They help users understand their position on the site and provide a way to navigate back to previous categories or broaden the scope of their search.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What are the two important functions of hierarchy-based breadcrumbs on a website?

A

The two important functions of hierarchy-based breadcrumbs are:

  1. They help users orient themselves by showing where the current category product list is within the site’s structure, helping users understand their location on the site.
  2. They provide a convenient and efficient way for users to navigate up the hierarchy, allowing them to broaden the scope of the current category product list to see more items. Without breadcrumbs, users may not know their location within the site structure or be able to easily widen the scope of the product list.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

How do hierarchy-based breadcrumbs benefit users on a website?

A

Hierarchy-based breadcrumbs benefit users by making it easier to broaden the scope of their navigation, allowing them to explore more items or categories. Additionally, they help answer the “Where am I now?” question, providing users with a clear understanding of their current location within the site hierarchy.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

How do hierarchy-based breadcrumbs function as a “progress indicator” for users on a website?

A

Hierarchy-based breadcrumbs act as a “progress indicator” by showing the increasingly narrow scopes of categories as users drill down through the site’s hierarchy. If users go too far and end up in a product list with a scope that is too limited, the breadcrumbs provide an easy way to navigate back to broader categories, allowing them to adjust their navigation path efficiently.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What are “Sideways Breadcrumbs” and how do they function?

A

“Sideways Breadcrumbs” are a navigational feature where users can click, hover, or tap on the breadcrumb that indicates their current location in the site hierarchy to view sibling categories. This allows users to easily explore related categories without having to backtrack in the navigation path.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Why are hierarchy-based breadcrumbs especially important on mobile websites or apps?

A

Hierarchy-based breadcrumbs are especially important on mobile websites or apps because it is often more difficult to start browsing through categories when in category product lists, as categories are typically hidden by default in hamburger-style menus. Additionally, search fields can be hard to find, making it challenging for novice users to start a search if the product list does not have a broad enough scope for their needs. Breadcrumbs provide a clear and accessible way to navigate the site hierarchy and broaden the scope of their search.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What is the difference between “Hierarchy” breadcrumbs and “History” breadcrumbs?

A

“Hierarchy” breadcrumbs help users understand their location within the site structure and allow them to easily navigate up the hierarchy to broader categories. In contrast, “History” breadcrumbs allow users to return to their previous location with any applied filters or sorting adjustments intact, providing a more personalized navigation experience.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Why is it important to visually separate list items on a product page on mobile?

A

It is important to visually separate list items on a product page on mobile to ensure users can clearly distinguish where one item begins and another ends. Without clear separation, users may accidentally discard products or navigate to product pages they did not intend to visit. Using separating lines, borders, white space, or “cards” helps clarify which information and thumbnail belong to each item in the list.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

What are the risks of not clearly separating list items on a product page?

A

The risks of not clearly separating list items on a product page include users dismissing items that could have suited their needs and users losing orientation while quickly scrolling through the list. This can happen because they are less likely to notice the separation points between list items, leading to confusion and potentially missing relevant products.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

What methods of visual separation were found to work well for distinguishing list items on a product page, and does one method work best?

A

The methods of visual separation found to work well for distinguishing list items on a product page are lines or borders, white space, and “cards.” Testing did not yield conclusive results as to which single method works best or whether a combination of multiple techniques is preferable. The best choice depends on the visual design of the website.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

Why should a “List View” be used for product lists and search results containing spec-heavy product types?

A

A “List View” should be used for product lists and search results containing spec-heavy product types because it allows for more product specs and attributes to be displayed. This enables users to fully compare products directly within the product lists or search results, without needing to navigate to individual product pages.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

What is a “spec-heavy” purchase?

A

A “spec-heavy” purchase is one where specific product specifications or a set of specs are crucial for the selection, evaluation, and purchasing decision of the product.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

What are examples of spec-heavy product types?

A

Examples of spec-heavy product types include consumer electronics, home appliances, tools, automotive components, office supplies, and industrial equipment. These are products where specific specifications are very important and often directly correlate with the price.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

What is the primary purpose of product lists and search results on e-commerce websites?

A

The primary purpose of product lists and search results is to allow users to make basic decisions about the suitability of products before narrowing down their selection for further comparison and eventually visiting individual product pages.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

Why should “List Views” be used instead of “Grid Views” for displaying spec-heavy products in product lists and search results?

A

“List Views” should be used for displaying spec-heavy products because they provide extra space to fit key specifications, allowing for both horizontal and vertical distribution of specs in each list item. This additional space and structure make it possible to display more specifications upfront, giving users a better foundation to determine which products are relevant and which to skip. Consequently, users have less need to visit individual product pages to get an initial understanding of the specs.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

Why is providing “List Views” for spec-heavy products particularly important on mobile devices?

A

Providing “List Views” for spec-heavy products is particularly important on mobile devices because navigating back and forth between lists and product pages to view specifications is more cumbersome than on desktop, due to the smaller screen size and lack of overview. Additionally, the issue worsens if users are not returned to the same place in the product list after visiting product pages. Unlike desktop users, who can open product pages in new tabs while keeping the product list open, mobile users do not have this option, making it even more challenging to compare products efficiently.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

Why should e-commerce sites dynamically adapt their product list and search results layout based on the type of product?

A

E-commerce sites should dynamically adapt their product list and search results layout to a “List View” for spec-driven products and a “Grid View” for visually driven products because using a single layout for both types creates difficulties for users in evaluating and comparing options. Adapting the layout to suit the product type improves the user experience by providing the most effective way to display relevant information, allowing users to make better comparisons and more informed decisions.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

Which type of product list view—”List View” or “Grid View”—is best suited for sites based on the type of products they offer?

A

“List Views” are ideally suited for sites that primarily offer spec-heavy products, while “Grid Views” are best suited for sites that primarily offer visually driven products.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

Why might mass merchants face challenges with a single product list layout, and what issue was observed during testing?

A

Mass merchants, which offer significant numbers of both spec-heavy and visually driven products, may face challenges with a single product list layout because it can be unsuitable for one type of product or the other. During testing, participants on sites with only one layout for product lists and search results were less able to assess and compare products effectively if the layout (either “List View” or “Grid View”) did not match the product type, making it harder to evaluate and choose the right products.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

What is a visually driven purchase?

A

A visually driven purchase is one where the product’s appearance is the user’s primary decision factor, alongside price.

This type of purchase typically includes products in the Apparel & Accessories and Furniture & Home Decor industries, among others

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

What are the characteristics of visually driven products, and what factors are most important in making initial product assessments?

A

Visually driven products typically contain only brief specifications. During testing, it was observed that the visual information conveyed by thumbnails, along with price, is the most important factor for users when making initial product assessments.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

Why are “Grid Views” particularly important for visually driven products on mobile devices?

A

“Grid Views” are particularly important for visually driven products on mobile devices because they maximize the size of thumbnails, which is crucial given the limited screen size of mobile viewports. This layout reduces the need for users to go back and forth between product lists or search results and product pages to view larger images, a process that is more cumbersome on mobile, especially if users are not returned to the same place in the product list.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

Why is it important to return users to the same place in product lists or search results after they navigate back from product pages?

A

It is important to return users to the same place in product lists or search results after they navigate back from product pages because if users have to refind their previous location, they may not find products of interest again, become frustrated at having to redo previous work, and potentially abandon the site.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

What problems arise when users are taken to the top of the product list or search results after visiting a product page?

A

When users are taken to the top of the product list or search results after visiting a product page, they become disoriented and must refind their previous location in the list. This is tedious because users have to redo all their previous work by scrolling through the list again. It can also be challenging to remember exactly where they were, especially if the list contains similar-looking items (e.g., a selection of blue dresses with slight variations or similar-looking office chairs). Depending on the site’s product-loading schema, the difficulty of refinding the previous location can range from moderate to extreme, causing frustration and potentially leading users to abandon the site.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

What are product-loading schemas?

A

Product-loading schemas refer to the methods and strategies used by e-commerce websites to load and display products in a list or search results.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

What are the 4 common types of product-loading schemas?

A
  1. Pagination: Products are divided into separate pages, and users must click a “Next” button or select a page number to view more products.
  2. Infinite Scrolling: More products are automatically loaded as the user scrolls down the page, creating a continuous list.
  3. Lazy Loading (Endless Scrolling) : Products are loaded only when they come into the user’s viewport, reducing initial loading times but requiring scrolling to see more items.
  4. Load More Button: Users can click a button to load additional products without navigating away from the current view, combining elements of pagination and infinite scrolling.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

What technical implementation detail is critical for ensuring users are returned to the correct place in a product list or search results after visiting a product page?

A

The critical technical implementation detail is “Back” button support through the history.pushState function of the HTML5 History API. This function allows sites to change the URL without reloading the page, enabling the browser “Back” button to behave as users expect. Each time the “Load More” button is clicked, the URL should be updated to ensure that the correct list content is loaded when a user navigates back from a product page, maintaining their position in the list.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q

What should be considered when choosing a product-loading method to optimize user experience?

A

When choosing a product-loading method, consider using the “Load More” button for category-based product lists and search results. Ensure that the “Back” button behaves as users expect by maintaining their position in the list, and include the number of results near or in the “Load More” button to help users manage the amount of content being loaded. This approach prevents users from being overwhelmed by too many products loading at once and ensures a smoother navigation experience.

47
Q

What are the advantages of using the “Load More” button as a loading schema for product lists and search results?

A

The “Load More” button as a loading schema offers several advantages for product lists and search results on both desktop and mobile devices. It combines the benefits of “Pagination” by allowing users to control the loading of additional products without the potential disadvantages, such as difficulties with seeing and using pagination links, especially on mobile devices. This method simplifies navigation and improves the user experience by reducing the need for precise clicks or taps on small pagination links.

48
Q

What are the four main benefits of using the “Load More” button for product lists and search results?

A
  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 next steps
    It’s the best choice for mobile
49
Q

How does the “Load More” button enhance the product comparison experience for users compared to “Pagination”?

A

The “Load More” button enhances the product comparison experience by appending new results to the current list instead of replacing them, as is the case with “Pagination.” This allows users to scroll through a larger set of results, including potentially the entire list, without navigating between pages. Users can easily compare items from the new selection with those already loaded by simply scrolling up and down, making the comparison process more seamless and efficient.

50
Q

Why is the “Load More” button preferred over “Endless Scrolling” regarding site footer accessibility?

A

The “Load More” button is preferred over “Endless Scrolling” because it preserves easy access to the site footer and the important links it contains, such as “Help” pages, FAQs, order management tools, and shipping and returns information. With “Endless Scrolling,” users may struggle to reach the footer as more products load continuously. In contrast, “Load More” allows users to reach the footer easily at any point, enabling them to quickly access essential information and address any concerns about returns or delivery while still browsing products.

51
Q

How does the “Load More” button impact user behavior compared to “Endless Scrolling”?

A

The “Load More” button encourages users to pause and consider the existing items more closely before adding more to the list. Some users may find enough suitable items to start a comparison, while others may choose to redefine the list by adjusting filters, updating the search term, or selecting a different sort order. The action required to load more items helps avoid the major drawback of “Endless Scrolling,” where users can become overwhelmed by the continuous addition of products to the list. Instead, users have more control over the browsing experience and can choose when to view additional products.

52
Q

Why is the “Load More” button considered the most suitable loading schema for mobile touch interfaces?

A

The “Load More” button is considered the most suitable loading schema for mobile touch interfaces because it provides a larger hit area, making it easier to use than small pagination links. This results in a simpler and more user-friendly interface. Additionally, “Load More” allows users to load additional products on the same page, enabling them to scroll directly from the first to the fifty-fourth product, for example. This is particularly advantageous on mobile sites, where fewer products should be displayed by default to enhance the browsing experience.

53
Q

What are three important implementation details to consider when using the “Load More” button in product lists and search results?

A
  1. Implement lazy-loading in category-based product lists
  2. Support expected “Back” button behavior
  3. Always show the number of products in or near the “Load More” button
54
Q

What is the recommended approach for loading products in product lists to enhance performance and user experience?

A

The recommended approach for loading products in product lists is to use a combination of a “Load More” button and lazy-loading. Initially, 10–30 products should be displayed when the page loads, and then another 10–30 products should be lazy-loaded as the user scrolls until reaching 50–100 products. After that, a “Load More” button should be displayed to allow users to load additional products as needed. This strategy improves performance by deferring the loading of images outside the viewport and ensures a smooth browsing experience.

55
Q

What is the purpose of the “Load More” button threshold, and how does it differ from the lazy-loading threshold?

A

The “Load More” button threshold is used to determine when the user should be interrupted to take action to load more products, enhancing the user experience by preventing information overload. In contrast, the lazy-loading threshold is a performance optimization technique designed to reduce load times and server load by only loading images and content as needed when they come into the user’s viewport.

56
Q

Why is it important to display the number of items in product lists or search results, and where should this information be placed on sites using the “Load More” button?

A

It is important to display the number of items in product lists or search results so that users can decide whether they need to expand the selection (by adjusting search queries or choosing a broader category scope) or narrow it (by applying filters or entering a more specific search query).

57
Q

Why should the number of items be displayed alongside or within the “Load More” button on sites using this loading method?

A

The number of items should be displayed alongside or within the “Load More” button to ensure that users do not overlook this information when deciding whether to load more items. By providing this information directly with the “Load More” button, users can make an informed decision about whether it is worth loading additional products based on how many items remain in the product list or search results.

58
Q

Which of the following are essential implementation details when using pagination as a product loading schema?

A
  1. Pagination links must be highly visible
  2. Pagination links must have sufficient size and spacing on mobile sites
59
Q

What are two distinct issues identified with divided product lists?

A
  1. Users often assume that a “section break” represents the end of the product list, leading to confusion and potentially missing additional products.
  2. It is difficult for users to get an overview of the full product list when it is divided into sections, making it harder to compare and evaluate all available options.
60
Q

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

A

Sites should always avoid subdividing product categories

61
Q

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

A

Users have a difficult time reaching the bottom of the product list

62
Q

Why should ads be avoided above or within product lists and search results?

A

Ads should be avoided above or within product lists and search results because they can distract users, cause them to overlook suitable items, and slow down the process of finding products. Keeping product lists and search results free of ads helps maintain user focus and improves the overall shopping experience.

63
Q

What two locations for ads caused issues during testing on e-commerce sites?

A
  1. Directly above product lists and search results.
  2. Within product lists and search results.
64
Q

What issues can arise from placing ads within product lists or search results?

A
  1. Users may find it difficult to get an overview of the full extent of the list, as the flow of list items is interrupted by ads.
  2. Some users might think that the ads signify the end of the list and overlook products below the ads, potentially missing out on suitable items.
  3. Ads can lead to a misinterpretation that products listed below them are less relevant than those above, causing users to overlook suitable products further down the list.
65
Q

How should ads be placed on product list pages to avoid distracting users and slowing down product finding?

A

To avoid distracting users and slowing down product finding, ads should not be placed directly above or within product lists or search results, where they might appear as part of the list content. Instead, ads can be placed in locations where they are less intrusive, such as in or adjacent to the main navigation or as sitewide banner ads, which users tend to ignore. Ads should not span the entire width of the list or be positioned directly below the page header, above the number of matching products, or top-aligned with filters in the sidebar, as these placements can cause users to mistakenly associate the ads with the main product list content.

66
Q

Where is a generally “safe” place for ads on product list pages, and what precaution should be taken?

A

The sidebar is generally a “safe” place for ads on product list pages, as it does not typically distract users from finding products. However, it is important to ensure that ads do not interfere with the process of applying filters by placing them below the filtering interface. This placement prevents ads from obstructing important navigation elements and maintains a smooth user experience.

67
Q

What type of ads should be avoided on a product list page, and why?

A

On a product list page, dynamic ads (which change content and attract user attention) and large ads should be avoided. The focus of the page should remain on the main content, such as the products and filtering and sorting options, rather than on ads. This ensures that users are not distracted from their primary task of browsing and selecting products.

68
Q

Why is it beneficial to avoid placing ads within or above product lists?

A

Avoiding ads within or above product lists is beneficial because it allows users to immediately start scanning list items and applying filters without distractions. This leads to a quicker and smoother product-finding process. Additionally, without ads, users can more easily gauge the size of the list and form an overview of its content, reducing effort and frustration. This creates a more pleasant browsing experience and sets a better tone for product finding and assessment.

69
Q

What locations are appropriate when placing banner ads in product lists?

A
  1. At the bottom of the product list, if they are primarily graphical (e.g., not a list of text links)
  2. In the left- or right-hand sidebar
70
Q

Why is it important to display the total number of items in product lists or search results, and where should this information be placed?

A

It provides users with crucial information about the relevance and quantity of items available.

This helps them make informed decisions about whether to adjust their search or filters.

The total number of items should be shown both above and below the list to ensure visibility and should be displayed in a size that is easy to discern.

71
Q

Why is the number of items in category product lists and search results important for users during a preliminary evaluation?

A

The number of items in category product lists and search results is important for users during a preliminary evaluation because it helps them determine whether the list is too large, too small, or appropriate for their needs. This allows them to decide whether to adjust their search or filtering criteria before inspecting items in detail.

72
Q

What is a core UX issue related to not showing how many products are in the list?

A

users are unable to quickly judge the extent of the list. This makes it difficult for them to assess the total number of items and determine if they need to adjust their search or filter criteria.

73
Q

What three details help optimize the display of the total number of results in product lists?

A
  1. Repeat the number of items at the bottom of the list
  2. Differentiate the number of results from pagination links
  3. Ensure the text showing the number of results is sufficiently large
74
Q

Why is it important to differentiate the number of results from pagination numbers on sites using the “Pagination” loading schema?

A

It is important to differentiate the number of results from pagination numbers on sites using the “Pagination” loading schema to avoid user confusion. For example, text like “1–10 of 10” could be misinterpreted by users to mean there are 10 pages instead of 1 page containing 10 items. Clearly labeling the number, such as “Showing 1–24 Results of 177,” both at the top and bottom of the results list, helps users understand the actual number of items and pages, ensuring a better user experience.

75
Q

Why is it beneficial to repeat the number of products at the bottom of the page on sites that do not use “Endless Scrolling”?

A

Repeating the number of products at the bottom of the page helps remind users of the total number of items before they decide whether to load more products or narrow down the list. This is especially helpful for users who perform an initial “scroll-and-scan” of the entire product list before making a closer inspection, as it provides a clearer sense of the list’s size and the relevance of the products. On sites that use the “Load More” method, displaying the total number of items within or adjacent to the “Load More” button further supports informed decision-making by the user.

76
Q

Why should the text displaying the number of results be large on a product list or search results page?

A

The text displaying the number of results should be large enough to be immediately noticeable so that it doesn’t get lost among other page elements. Making the text larger than any nearby text ensures that it is clearly distinguishable, allowing users to quickly understand the size of the product list or search results. This visibility helps users make more informed decisions about browsing, filtering, or loading more items.

77
Q

Which of the following are appropriate places to display the number of products in a product list?

A

At the top of the product list, and at the bottom of the product list

78
Q

What considerations should be made when placing “Featured Products” or sitewide promotions in product lists?

A
  1. Ensure they are not overly visually distracting to prevent users from being diverted from their product search.
  2. Make sure that “Featured Products” or promotions at the top of the list do not push other list items out of the viewport.
  3. Confirm that the “Featured Products” or promotions are relevant to the current list to maintain user focus.
  4. Minimize the likelihood of inadvertent mistaps that could lead to detours away from the product-finding process.
79
Q

How can “Featured Products” or sitewide promotions be beneficial in product lists and search results?

A

“Featured Products” or sitewide promotions can be beneficial in product lists and search results by drawing attention to potentially suitable items, alerting users to deals and bargains, and providing inspiration for their shopping choices.

80
Q

Under what circumstances can “Featured Products” or sitewide promotions be distracting to users in product lists and search results?

A

“Featured Products” or sitewide promotions can be distracting when they are overly prominent in mobile product lists and search results. During testing, it was observed that such placements disrupted participants and caused them to lose focus, going off track when trying to assess and compare products.

81
Q

What four specific implementations of “Featured Products” and sitewide promotions have been observed to cause issues in product lists and search results?

A
  1. Visually distracting “Featured Products” or sitewide promos
  2. “Featured Products” or sitewide promos that help push list items out of the viewport
  3. Promos that are out of place
  4. Poorly placed “Featured Products” or promos that can be accidentally tapped
82
Q

Why can “Featured Products” or sitewide promotions cause difficulties for users even if they are highly relevant to the current context?

A

“Featured Products” or sitewide promotions can cause difficulties for users if they are overly visually dominant, as they can distract from the main goal of most users on product lists and search results, which is to assess and compare items. Even when these promotions are relevant, their visual prominence can divert attention away from the primary task of evaluating products.

83
Q

Why should the risk of distraction from “Featured Products” or promotions be considered, and what are the potential drawbacks?

A

The risk of distraction from “Featured Products” or promotions should be considered because these elements can attract excessive attention, particularly if they are visually dominant, such as an animated GIF that takes up a full viewport. This can detract from other items that may be more suitable for the user, slowing down the process of comparing products if users focus on the promo for too long. The potential benefits to a small minority of users who might add “Featured Products” to their carts need to be weighed against the overall negative impact on the user experience for the majority.

84
Q

What issues can arise when “Install App” promos, promoted categories, and “Featured Products” push product list items out of the viewport?

A

Issues can arise when elements like “Install App” promos, promoted categories, and “Featured Products” push product list items out of the viewport. A very tall promo at the top of the product list can cause list items to be completely out of view when users first land on the page. This makes it difficult for users to get an overview of the list and can disorient them, as they might not immediately recognize the page as a product list or search results page.

85
Q

What problems can arise when promos in product lists highlight items from other categories?

A

Problems can arise when promos in product lists highlight items from other categories, especially when the promos are unlikely to be relevant to the user’s current context. For example, a promo for food in an apparel product list can distract users and lead them to tap the promo, causing them to detour to another site category. If users have already spent time refining the list by applying filters and rejecting unsuitable items, such unwanted diversions can result in wasted time and effort, particularly if their filter choices are reset.

86
Q

When might displaying seemingly unrelated promos in a product list be beneficial, and what caution should be taken?

A

Displaying seemingly unrelated promos in a product list might be beneficial if site analytics show that those items are of interest to users within a particular list. For example, if data indicates that men who buy clothing also tend to purchase deodorant, a promo for personal care items in a list of hoodies may increase sales. However, care must be taken to balance the potential sales benefits with the risk of distracting many users from their primary task, as this could negatively impact the overall user experience.

87
Q

What issues related to promos in product lists are specific to mobile devices that might not occur on desktop?

A

On mobile devices, users may occasionally tap areas of the product list by mistake. While an unintended tap on a list item will still bring users to a product page within the current scope, a tap on an irrelevant “Featured Product” or promo could take users to a completely unrelated product page. This can lead to unintended navigation and disrupt the user’s browsing experience more severely on mobile than on desktop.

88
Q

What issue was observed during testing when a user accidentally tapped on an irrelevant promo in a product list?

A

During testing, it was observed that a participant accidentally tapped on an irrelevant promo located behind a sorting drop-down and ended up on a product page for an item that had no connection to their product of interest. This unexpected navigation to a page outside their area of interest disoriented the user and disrupted their product-finding process.

89
Q

How can “Featured Products” or sitewide promos be beneficial to users when implemented correctly?

A

“Featured Products” or sitewide promos can be beneficial to users when implemented correctly by providing a helpful starting point in their exploration of the product catalog. For example, a “Featured Product” office chair could be useful to users looking for office chairs if it is not overly distracting and does not push other list items out of the viewport. Additionally, a “Featured Product” might save users time if it aligns perfectly with their purchasing intentions, although such a “perfect match” was not observed during testing.

90
Q

How can “Free Gift” or “Free Shipping” sitewide promos in product lists positively influence user behavior?

A

“Free Gift” or “Free Shipping” sitewide promos in product lists can positively influence user behavior by nudging them towards making a purchase, provided these promos are relevant to all products in the current list. If the promos do not dominate the viewport or distract users excessively, they can effectively alert users about potential savings, offering additional incentives to complete the purchase.

91
Q

What is a recommended approach for displaying “Featured Products” or sitewide promos to minimize user distraction?

A

A recommended approach for displaying “Featured Products” or sitewide promos is to show them only for a limited period of time and allow users to close them. This minimizes the potential distraction these elements could cause, ensuring that they do not persist permanently and allowing users to focus on the primary content of the product list.

92
Q

What mobile-specific issue arises with “Featured Products” or sitewide promos in product lists, and what considerations should be made?

A

A mobile-specific issue with “Featured Products” or sitewide promos in product lists is their relative size compared to the viewport. On mobile devices, these promos can dominate the screen, making them hard to ignore and increasing the likelihood of accidental taps. This is less of an issue on desktops, where such promos typically occupy a small fraction of the window and are easier to ignore. Therefore, it is important to carefully consider the benefits of including “Featured Products” or promos in mobile product lists and search results. If they are used, steps should be taken to minimize their height so that they do not dominate the viewport and ensure that list items remain visible.

93
Q

Why should ads for external sites be avoided in product lists?

A

Ads for external sites should be avoided in product lists because they can distract users from their primary goal of finding and evaluating products. Additionally, there is a risk that users may not return to the site after tapping on such ads, potentially leading to lost sales and a disrupted user experience. While ads for external sites can sometimes be beneficial when placed elsewhere, they are generally not appropriate within product lists.

94
Q

Why is it important to optimize product lists and search results for users browsing on large screens?

A

Optimizing product lists and search results for users on large screens is important because it allows for a richer content experience by taking full advantage of the available screen space. This can be done by scaling up product thumbnails or inserting additional columns, making it easier for users to view more products at once and improving their overall browsing experience. Failing to do so is a missed opportunity to enhance usability and visual appeal.

95
Q

Why is it important for product lists and search results to adapt to larger screens, and what issues arise if they do not?

A

It is important for product lists and search results to adapt to larger screens because the quality and amount of information visible on screen are crucial for users to effectively assess and compare products. If these lists are crammed into designs optimized for smaller screens and do not adapt to the increased space available on larger screens, users may spend more time than necessary evaluating products. This represents a missed opportunity for sites to provide richer content and a better user experience by utilizing the additional screen space more effectively.

96
Q

What are the two clear benefits for users of larger screens on sites that employ “Responsive Upscaling”?

A
  1. Larger thumbnails
  2. More columns in product lists and search results
97
Q

How can “Responsive Upscaling” benefit users with larger screens on product lists and search results pages?

A

“Responsive Upscaling” can benefit users with larger screens by displaying product thumbnails in larger sizes, which allows users to discern more details directly from the list, such as stitching, fabric, and detailing on apparel. This helps users better assess product suitability without needing to frequently navigate to individual product pages to view larger images. Larger thumbnails can be further enhanced by showing secondary images on hover, providing even more detail and improving the overall browsing experience.

98
Q

How does adding columns to product lists and search results benefit users with larger screens?

A

Adding columns to product lists and search results benefits users with larger screens by allowing more items to be displayed in each viewport. This reduces the need for scrolling to view the entire list and enables users to compare more items at once, speeding up the process of assessing product suitability and improving the overall browsing experience.

99
Q

What factors should be considered when deciding between larger thumbnails or more columns with “Responsive Upscaling”?

A

When deciding between larger thumbnails or more columns with “Responsive Upscaling,” the primary consideration is the type of products available. For products that rely heavily on visual appearance, such as apparel, larger thumbnails are more beneficial because they allow users to see finer details. For more spec-driven products, additional columns may be more advantageous, as they enable users to view more items at once, provided that the standard thumbnail sizes are sufficient for assessing the products.

100
Q

How many products should be loaded at once on desktop and mobile sites for optimal user experience?

A
  1. On desktop sites, load 100–150 items at once for visually driven product lists or search results and 50–100 items for spec-driven lists.
  2. On mobile sites, load 15–30 items at once, regardless of the list type.
101
Q

What are the potential issues with loading too few or too many products at once in product lists and search results?

A

Loading too few products at once can prevent users from getting a sense of the breadth of product lists and search results, making it harder for them to understand the variety of available options. Conversely, loading too many products at once can overwhelm users and potentially cause performance issues, such as slower page load times and decreased responsiveness.

102
Q

What factors should be considered when deciding on the number of products to load at once in product lists and search results?

A

When deciding on the number of products to load at once in product lists and search results, it is important to balance optimizing page performance with making the process of scanning, comparing, and choosing products as convenient as possible for users. Loading too few products can limit users’ ability to see a variety of options, while loading too many can overwhelm users and negatively impact page performance.

103
Q

What issues did participants experience during testing when too many or too few products were loaded in product lists?

A

During testing, participants experienced issues that slowed down product finding and sometimes overwhelmed them when too many or too few products were loaded. Loading too few products limited their ability to see a range of options, while loading too many products made it harder to focus and navigate, leading to a less efficient and more frustrating experience.

104
Q

What are the issues with loading too few products at once in product lists or search results?

A
  1. Users may fail to grasp the full range of products available, as they often scroll through the list to understand the variety of items within the current scope.
  2. If the list contains too few items, users may struggle to determine whether they are likely to find suitable products or if they need to navigate to a broader scope or submit a broader search term.
  3. Displaying an insufficient number of products per page can interrupt users’ scanning process by forcing them to load the next set of products too frequently, leading to a less efficient and more frustrating browsing experience.
105
Q

What issues can arise from loading too many products at once in product lists or search results?

A
  1. Some users may feel overwhelmed by the sheer number of items on the page, making it difficult to focus and effectively browse through the options.
  2. Page loading and scrolling can be slowed down if too many images are being downloaded and held in memory, impacting performance.
  3. Users generally have little patience for slow page loads, and frequent delays can lead to frustration, increasing the risk that users will abandon the site altogether.
106
Q

What are the potential drawbacks of loading too many products at once on a product list page?

A
  1. User Overwhelm: Some users may feel overwhelmed by the large number of items displayed on the page, making it challenging to focus on evaluating and selecting products.
  2. Performance Issues: Loading and scrolling can become sluggish if too many images are downloaded and held in memory, leading to slow page performance.
  3. User Frustration and Abandonment: Studies have shown that users have little patience for slow-loading pages. If slow page loads occur frequently, there is a heightened risk that users will become frustrated and abandon the site.
107
Q

Why is it possible to load more visually driven products at once compared to spec-driven products?

A

More visually driven products can be loaded at once because users scanning these lists focus primarily on thumbnails, which can be assessed more quickly than text. This allows users to scan and consider a larger number of visually driven items and search results before losing focus.

108
Q

Why do users experience fatigue more quickly with long product lists and search results on mobile devices compared to desktop?

A

Users experience fatigue more quickly with long product lists and search results on mobile devices because the smaller viewport allows only 2 or 3 items to be visible at once, requiring much more scrolling than on a desktop. If a large number of products are loaded by default, users need to exert more effort to view all the items, leading to quicker fatigue compared to viewing a comparable list on a desktop, where more items are visible simultaneously, and less scrolling is needed.

109
Q

What issues can arise from long product lists on mobile sites, based on testing observations?

A

Long product lists on mobile sites can cause several issues due to slower site reactions to user inputs, which results in scrolling taking significantly longer than on desktop. As a result, users may find scrolling through a long list of 100 items tedious and may pay less attention to items towards the end of the list, potentially missing relevant products.

110
Q

What are the key considerations for implementing a loading technique that dynamically loads items in a product list?

A
  1. Timing of Fetching Items: Items must be fetched at the right time to ensure they are likely to have finished loading by the time the user reaches them, providing a smooth browsing experience.
  2. Reserving Space for Items: The space that the items will occupy should be reserved before they are loaded to avoid sudden page jerks and maintain a stable layout.
  3. Maintaining Smooth Scrolling: The page should not contract or expand as items are dynamically loaded. To maintain a smooth scrolling experience and allow users to quickly jump to specific points on the page (such as the footer), white space should be added equivalent to the size of the items yet to load. These items should replace the white space as they load, preventing any disruption to the scrolling experience.
111
Q

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

A

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

111
Q

What is an alternative approach to dynamically loading product list items, and what are its benefits?

A

An alternative approach to dynamically loading product list items is to load all the list items at once and then load the product thumbnails asynchronously. This method provides most of the performance benefits of dynamic loading, such as reduced initial load time and smoother scrolling, while also being easier to implement. By loading thumbnails asynchronously, the content structure is immediately visible, and images load as they become needed, enhancing the user experience without the complexity of dynamic content loading.

112
Q

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

A

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

113
Q
A