List Items: Interface & Hit Areas Flashcards
Product Lists & Filtering
What is the purpose of List Items?
To allow users to easily and accurately determine which products to investigate further.
Essentially whether a list item’s product page is worth opening or if it should skipped.
What is the common behavior of users when scanning through items in product lists, and what elements do they typically examine to gather product information?
When users are scanning through items in product lists, they typically review both the list item info and thumbnails to gather product information.
How can product attributes in list item info be made easily distinguishable for users, facilitating quick scanning and comparison?
To enable users to readily identify product attributes in list item info, it’s essential to ensure that each element is visually distinct. For instance, presenting product specs in bullet points facilitates easy scanning and comparison. Alternatively, combining font style variations and spacing can enhance the visibility of elements, making them easier for users to pick out.
Which of the following is not an appropriate method for visually distinguishing separate pieces of list item information?
Listing a product as “out of stock” when it’s temporarily unavailable could prompt users to abandon their purchase journey, seeking alternative sources to buy the item.
How can the user experience be improved for temporarily unavailable items in list items, and what information should be considered for inclusion in such cases?
To enhance the user experience for temporarily unavailable items in list items, consider providing the estimated delivery date or the anticipated date when the items will be back in stock.
What potential consequence may arise from failing to differentiate between products that are permanently discontinued and those experiencing temporary delays, and how might this impact sales?
Failing to distinguish between permanently discontinued items and those facing temporary delays could result in missed sales opportunities.
What are some common reasons for products to become temporarily unavailable, and how might restricting users from purchasing or reserving these items impact their ability to obtain suitable products?
Temporary unavailability of products can result from various factors such as delivery delays, manufacturing slowdowns, or sudden spikes in demand, with items potentially becoming available within days or weeks. Restricting users from purchasing or reserving these items may cause them to miss out on perfectly suitable products, especially if rapid delivery is not a priority for them.
What perspective should be prioritized when managing temporarily unavailable items, and why is it advantageous to adopt the user’s point of view in such situations?
When handling temporarily unavailable items, prioritizing the user’s perspective over the site’s viewpoint is essential. This approach enables a focus on meeting user needs and expectations, ultimately enhancing the overall user experience.
What is users’ typical expectation regarding waiting to receive an item, and how can sites capitalize on this expectation to fulfill orders for temporarily unavailable products?
Users generally anticipate waiting to receive an item, particularly if they have specific reasons for purchasing it from a particular site, even if there’s a longer-than-usual delivery time. Leveraging this built-in wait time presents an opportunity for sites to fulfill orders for temporarily unavailable products by simply adjusting the delivery date of the item.
What additional information should be provided to users regarding temporarily unavailable products, and why is it important to offer the anticipated delivery date or delivery date range rather than just the date the products will be back in stock?
Instead of solely indicating the date when products will be back in stock, it’s crucial to provide users with the anticipated delivery date or delivery date range. This offers users a more accurate expectation of when they can expect to receive the items, enhancing their overall experience.
How can options like store pickup be emphasized to users as a means of obtaining products sooner, particularly in combination with location-based features such as mobile location requests or IP geotargeting on desktops
Options such as store pickup can be highlighted to users as a way to expedite product acquisition, especially when combined with location-based features like mobile location requests or IP geotargeting on desktops.
What insight did our testing uncover regarding user behavior with regards to the product details page, and why are many users hesitant to visit it, perceiving it as a significant commitment during their initial skimming of the product list?
Our testing revealed that many users are reluctant to navigate to the product details page, viewing it as a substantial commitment that they are unwilling to make while initially skimming the product list.
Why are sites that sell products directly typically in a better position to have access to restocking information, and what should be considered for mass merchants or other sites lacking this information?
Sites that directly sell products often have access to restocking information, distinguishing between temporarily out-of-stock and permanently discontinued items. However, for mass merchants or sites lacking this data, it’s worth exploring systematic access to such information. Without it, users may face difficulties purchasing desired items from the site.
What impact does the absence of prices have on users’ ability to efficiently evaluate the suitability of products listed, and how might this affect their decision-making process?
When prices are missing, users face challenges in efficiently scanning list items to assess product suitability, potentially leading them to discard products without adequate consideration.
For a product with variations that have different price ranges, what is the best strategy for conveying price on a product list item?
Display the range of prices for all variations (e.g., “$19.99 to $39.99”)
What issue can arise when single-color items are displayed in product lists alongside items offering multiple color choices, and how can this issue be addressed to prevent user confusion?
An issue can occur when single-color items are listed alongside products with multiple color choices, leading users to assume the single-color item is just one of many options. To avoid this confusion, if a product is only available in one color while others offer multiple colors, the single color should be indicated by a swatch in the product list. This approach helps users quickly understand the available color options without needing to navigate to the product details page.
When a product has more variations than can feasibly be displayed on a product list item, what type of design pattern should be used?
A few popular variations should be displayed alongside an indicator of how many additional variations can be found on the product page.
What is the core issue associated with displaying swatches in the mobile product list, and what is the recommended approach to address this issue effectively?
The core issue lies in limiting the number of swatches displayed in the mobile product list, which compels users to visit product pages to view all color options. To mitigate this, ensure that all swatches are accessible within mobile list items. Employ horizontal scrolling sections to display swatches or consider vertically expanding sections for lists containing 10 or fewer swatches.
What are the 2 ways to make all swatches available in list items that performed well for participants?
- Horizontal scroll areas
- Vertically expanding areas
What are the advantages of using a horizontal scrolling area to display all swatches on mobile devices?
Using a horizontal scrolling area for swatches on mobile offers several benefits. Users find it easy to navigate swatches using swipe gestures, a behavior they’ve honed through mobile device usage. Additionally, compared to desktop, horizontal scrolling on mobile is typically smoother, enabling users to scroll through multiple swatches quickly or navigate one swatch at a time based on swipe speed. Furthermore, unlike desktop where scrolling swatches can be cumbersome due to individual indicator arrows, mobile horizontal scroll areas can accommodate a large number of swatches without space limitations, ensuring all color options are accessible through scrolling.
What potential issue might arise if users fail to recognize that swatches in a horizontal scrolling area can be scrolled, and how can this issue be mitigated?
Users may overlook the ability to scroll swatches if they don’t notice scroll arrows or a truncated final swatch, leading them to assume that there are no more swatches available. To address this, scroll arrows, if provided, should be clearly visible at each side of the horizontal scroll area. Additionally, the rightmost swatch should be visibly truncated to indicate that action is needed to view the full swatch and that more swatches are available. Moreover, the initially visible swatches should be selected to display a diverse range of colors or the most popular options.
What alternative method, observed during testing, allows for displaying all swatches in list items, and what advantage does this approach offer?
An alternative method observed during testing involves displaying swatches in an area that expands downwards when a button is tapped. One advantage of this method is that it presents all swatches together without hiding any, facilitating easier color comparison for users compared to a horizontal scrolling area.
What potential drawback is associated with the method of displaying swatches in an expanding area, and under what circumstances might this approach be less effective?
One potential drawback of this method is its compatibility with a large number of swatches. When the section expands, the row below the current one is pushed down to accommodate the extra lines of swatches. If there are more than, for instance, 10 swatches available, the row below could be pushed out of the viewport, potentially causing other information such as price or user ratings to become hidden. Therefore, this method is best suited for products with a limited number of color options.
What is the primary purpose of product lists?
It’s for users to quickly and accurately determine which products to investigate further and which to discard.
What challenge arises when only a single thumbnail is provided for products, and how does this limitation affect users’ ability to assess the suitability of products?
The challenge emerges when only a single thumbnail is available for products, as this may not offer users adequate information to make an accurate assessment of their suitability.
What is a feature callout?
A close-up of a feature
How can the visual information available to users scanning list items be maximized, and what role do secondary thumbnails play in enhancing the user experience?
To optimize the visual information for users, primary thumbnails in list items should clearly depict the product and its purpose, be appropriately sized, and indicate the number of products in multipack items. Additionally, secondary thumbnails displayed on hover provide further context, detail, and additional visual information without cluttering the list items.
What guidelines can be followed when selecting default thumbnails for products, and how does the nature of the product type influence this decision?
A useful rule of thumb is to assess whether the product type is primarily visually driven or specification-driven. This consideration helps determine the most appropriate default thumbnail that effectively communicates the essence of the product to users.
What approach is recommended for visually driven product types when selecting default thumbnails, and how can additional visual information be provided to users through hover actions?
For visually driven product types, it’s advisable to use a “Lifestyle” thumbnail as the default, as it effectively showcases the product in context. Additionally, providing a “Cutout” or “Feature Callout” thumbnail on hover offers users further visual information and details about the product.
What purpose do “Lifestyle” thumbnails serve for users, and how do they contribute to users’ understanding of how a product will appear in various contexts?
“Lifestyle” thumbnails provide users with a visualization of how a product will appear in relation to other products or within a particular setting. By displaying the product in a contextual environment, users can gain insights into shapes, relative dimensions, textures, and how the product may complement or interact with other items.
What are the 3 benefits of “Lifestyle Thumbnails”?
- Promoting cross-sells
- Highlighting compatibility feature
- Being captivating and Inspirational
How does “Lifestyle” thumbnails help promote cross-sells?
Because “Lifestyle” thumbnails present the product in a setting with several other items, they are great ways of cross-selling related items. Users might be inspired by the thumbnail and “fall in love” with other products in the thumbnail - not just the main product. (It is of course essential that users are able to find and buy these other products, as described.)
How do “Lifestyle” thumbnails highlight compatibility features?
It can highlight how a product works and looks when used together with its related compatibility product(s) - for example, how a laptop fits snugly inside a backpack with an internal laptop pocket, or how a belt looks with a pair for trousers.
