Product List Layout Flashcards
Product Lists & Filtering
Why is the appropriate use of list vs. grid views important in product list design?
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.
What is another key aspect of a great product list layout, and why is it important?
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.
Why is it important for users to navigate their product list scope easily, and what can help with this?
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.
Why is a well-designed product list layout important for a great product browsing experience?
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.
What are two specific issues with displaying product variations as separate list items in a product list layout?
The two specific issues with displaying product variations as separate list items are:
- It becomes difficult for users to get an overview of the product list or search results.
- It is challenging for users to locate all variations of products they are interested in.
What is a major issue with displaying product variations as separate list items in a product list or search results?
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 does listing product variations separately affect the ratio of unique products in a product list?
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.
Why might separate list items for product variations make it harder for users to find a product of interest?
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 could displaying too many variations of unwanted products affect a user’s perception of a product catalog?
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.
What potential risk do smaller retailers, like direct-to-consumer (DTC) brands, face when listing product variations separately?
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.
Why is the issue of clutter more severe on mobile devices when product variations are displayed as separate list items?
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.
Why might some users not find the most suitable variation of a product when variations are listed separately?
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.
What is the advantage of combining product variations in a product list?
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.
What is the first step for sites that currently display separate list items for product variations?
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.
Why is it beneficial to include swatches representing each product variation in list items?
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.
What problems can arise when product variations are displayed as separate list items within a product list?
- Users may find it more difficult to find products of interest
- Users may think the product list is less diverse than it is
- Users may have difficulty locating the specific product variation they are interested in
What navigational aids can help users understand their location within a site hierarchy and broaden the scope of a product list?
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.
What are hierarchy-based breadcrumbs, and what purpose do they serve?
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.
What are the two important functions of hierarchy-based breadcrumbs on a website?
The two important functions of hierarchy-based breadcrumbs are:
- 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.
- 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 do hierarchy-based breadcrumbs benefit users on a website?
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 do hierarchy-based breadcrumbs function as a “progress indicator” for users on a website?
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.
What are “Sideways Breadcrumbs” and how do they function?
“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.
Why are hierarchy-based breadcrumbs especially important on mobile websites or apps?
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.
What is the difference between “Hierarchy” breadcrumbs and “History” breadcrumbs?
“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.
Why is it important to visually separate list items on a product page on mobile?
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.
What are the risks of not clearly separating list items on a product page?
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.
What methods of visual separation were found to work well for distinguishing list items on a product page, and does one method work best?
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.
Why should a “List View” be used for product lists and search results containing spec-heavy product types?
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.
What is a “spec-heavy” purchase?
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.
What are examples of spec-heavy product types?
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.
What is the primary purpose of product lists and search results on e-commerce websites?
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.
Why should “List Views” be used instead of “Grid Views” for displaying spec-heavy products in product lists and search results?
“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.
Why is providing “List Views” for spec-heavy products particularly important on mobile devices?
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.
Why should e-commerce sites dynamically adapt their product list and search results layout based on the type of product?
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.
Which type of product list view—”List View” or “Grid View”—is best suited for sites based on the type of products they offer?
“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.
Why might mass merchants face challenges with a single product list layout, and what issue was observed during testing?
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.
What is a visually driven purchase?
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
What are the characteristics of visually driven products, and what factors are most important in making initial product assessments?
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.
Why are “Grid Views” particularly important for visually driven products on mobile devices?
“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.
Why is it important to return users to the same place in product lists or search results after they navigate back from product pages?
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.
What problems arise when users are taken to the top of the product list or search results after visiting a product page?
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.
What are product-loading schemas?
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.
What are the 4 common types of product-loading schemas?
- Pagination: Products are divided into separate pages, and users must click a “Next” button or select a page number to view more products.
- Infinite Scrolling: More products are automatically loaded as the user scrolls down the page, creating a continuous list.
- 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.
- 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.
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?
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.
What should happen when users press their browser’s “back” button after navigating to a product details page from a product list page?
The user should be taken back to the same location in the product list they were at before navigating to the product page