| A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Primary Topic | Name | Platforms | Issue | Advice | Judgement | Notes | ||||||||||||||
2 | List Layout | Banners and Ads Must be Carefully Designed and Positioned #279 | Desktop | Poorly placed and designed ads can greatly confuse users. | Avoid placing ads above product lists and only place highly graphical ads below them. | Adhered High | |||||||||||||||
3 | List Layout | Show the Total Number of Items in the Product List #531 | Desktop, Mobile App, Mobile Web đ | If users donât know the number of items in the product list, they lack important information on the relevance and quantity of list items. | Show the total number of items in the product list â both above and below the list. Ensure that the size, placement, and styling of the number of items makes it easy to discern by users who need to know the number, but at the same time is not distracting for other users. | Violated High | |||||||||||||||
4 | List Layout | When to Use a List View, a Grid View, or Both #533 | Desktop, Mobile App, Mobile Web đ | A suboptimal product list view lowers list item scannability and comparability, making it more difficult for users to evaluate their available options. | Use a âList Viewâ for spec-driven product verticals (unless a âGrid Viewâ is able to provide sufficient list item information) and a âGrid Viewâ for visually driven ones, ideally switching automatically between the two views depending on the content of the list. | Adhered High | |||||||||||||||
5 | List Layout | Adopt Novel Navigation Methods Cautiously #535 | Desktop | Non-standard navigation methods are difficult for users to control and can distract from the actual list items. | Be cautious when adopting non-standard navigation methods. Will the added navigational friction be fully outweighed by the more immersive experience? (Product lists should always rely on standard navigation.) | Not Applicable | |||||||||||||||
6 | List Layout | Consider âResponsive Upscalingâ of Product Lists on Larger Screens #536 | Desktop | Failing to take full advantage of a userâs large screen is a missed opportunity to provide richer content. | Consider scaling up product thumbnails or inserting additional product list columns when users browse the site on large screens. | Violated High | |||||||||||||||
7 | List Layout | Have Hierarchy-Based Breadcrumbs in Category Product Lists #537 | Desktop, Mobile App, Mobile Web đ | Users often struggle to work out where they are within the site hierarchy, especially when arriving from off-site, and find it difficult to broaden the scope of the product list. | Provide clickable hierarchy-based breadcrumbs on category pages and in category product lists, and consider including âSideways Breadcrumbsâ as well. | Violated High | |||||||||||||||
8 | List Layout | Verify Product Data for Consistent Structure and Correct Tagging #541 | Desktop, Mobile App, Mobile Web đ | Lack of data and data structure severely impedes the userâs ability to find relevant products as well as their desire to purchase those items once found. | Develop automated and manual data-structure verification processes to resolve the two most common product data issues â lack of consistently structured product data and incorrect product tags. | Not Rated | |||||||||||||||
9 | Loading Products | Return Users to the Same Place in the Product List when Returning from the Product Page #1024 | Desktop, Mobile App, Mobile Web đ | If users have to refind where they were in a product list after returning from a product page, they may not find products of interest again and will become annoyed at having to redo previous work, and could abandon. | Return users to the same place in the product list after they return from product pages. | Adhered High | |||||||||||||||
10 | Loading Products | Use âLoad Moreâ Instead of Endless Scrolling and Pagination #501 | Desktop, Mobile App, Mobile Web đ | When an inappropriate product-loading method is used, users may have difficulty loading more results, may be overwhelmed by the number of products loading, or may lose focus on the most relevant list items. | Avoid âPaginationâ and âEndless Scrollingâ on both desktop and mobile sites. Instead, use âLoad Moreâ combined with lazy-loading for category-based product lists, and use âLoad Moreâ for search results. Make sure that the âBackâ button is correctly supported when navigating back-and-forth between product lists and product pages. | Violated High | |||||||||||||||
11 | Loading Products | How Many List Items to Load at Once #502 | Desktop, Mobile Web đ | When too few products are loaded at once users are less likely to get a feel for the breadth of the product list, while loading too many products encourages excessive scanning. | With dynamic product loading in place, on desktop sites load 100â150 items at once for visually driven product lists and 50â100 items for spec-driven lists. On mobile sites load 15â30 items at once regardless of the list type. | Violated High | |||||||||||||||
12 | Loading Products | Adjusting âItems Per Pageâ is Excessive #503 | Desktop | Options to adjust âitems per pageâ introduce needless complexity. | Donât confuse users with options to adjust the number of items shown per âpageâ (although a âView Allâ feature can be acceptable). Instead use the dynamic loading technique and a contextually dependent number of loaded products. | Violated High | |||||||||||||||
13 | Loading Products | Make Pagination Links Highly Visible and Easy to Use #504 | Desktop | If users overlook pagination links, they may underestimate the size of the product catalog or be significantly slowed in finding suitable products. | Place pagination links both above and below product lists, ensure that they are close to the lists, avoid surrounding the links with clutter, and ensure good color contrast between link text and the background color. Also, offer 7 or fewer links, ensure links have good sized hit areas and spacing, and improve perceived loading time when users click on pagination links by using load indicators, dimming thumbnails on the current page, or displaying skeleton screens. | Violated High | |||||||||||||||
14 | Loading Products | Improve the Perceived Load Time for Pagination #505 | Desktop | Users can get frustrated while they they are waiting for the product list to load, and some will give up if it feels like the process is taking too long. | Prefetch 5â10 products from the next page of the product list and show them immediately when the user requests the page. Display load indicators or screen skeletons when items are loading. | Not Rated | |||||||||||||||
15 | List Items: Product Info & Thumbnails | Always Include âEssentialâ and Category-Specific Product Attributes in List Items #440 | Desktop, Mobile App, Mobile Web đ | Without sufficient and relevant list item information users are likely to discard perfectly suitable products. | Make sure each list item includes price, a product thumbnail, a product title or type, product variations, and user ratings, along with 1â3 category-specific attributes. | Violated High | |||||||||||||||
16 | List Items: Product Info & Thumbnails | Combine Variations of Products into One List Item #421 | Desktop, Mobile App, Mobile Web đ | Users are likely to be overwhelmed if product variations are depicted as separate list items, and could abandon if unable to find suitable variations. | Combine product variations in one list item and show the number of variations clearly. | Violated High | |||||||||||||||
17 | List Items: Product Info & Thumbnails | Include and Present Product Attributes Consistently Across List Items #443 | Desktop, Mobile App, Mobile Web đ | If users canât compare similar items when in product lists, theyâll have to detour to product pages to find missing information, or may miss out on suitable products. | Make sure list items in the same product list always include the same information (with an exception for contextual search snippets in search results), and that itâs uniformly presented. | Adhered High | |||||||||||||||
18 | List Items: Product Info & Thumbnails | Display âPrice Per Unitâ For Multi-Quantity Items #446 | Desktop, Mobile App, Mobile Web đ | Without being able to compare prices accurately, users may miss out on the best prices or may reject good-value items. | Display âPrice Per Unitâ in any product list where the quantities vary across the list items. Consider a âPrice per Treatmentâ or similar for products that are of the same type but have different compositions. For products sold by unit weight, also display the estimated weight or weight range and estimated total price or price range. | Not Applicable | |||||||||||||||
19 | List Items: Product Info & Thumbnails | Include Both the User Rating Average and Number of Ratings #441 | Desktop, Mobile App, Mobile Web đ | Many users rely on ratings and reviews to select products but the star average by itself provides insufficient information. | Always include both the ratings average and the number of ratings in product list items, ensure that the ratings average is easy to discern on both desktop and mobile devices, and consider including the ratings average numeral in addition to the ratings average stars. | Violated High | |||||||||||||||
20 | List Items: Product Info & Thumbnails | Consider Having Comparison Features for Spec-Driven Industries #495 | Desktop | Comparing a set of products across a wide range of specs can be difficult for users if they have to visit multiple product pages to do so. | Consider having comparison features on desktop for spec-driven product verticals or if selling to âexpertâ users or âprofessionalsâ â but only after ensuring product data integrity and that essential list item information is available in the product list. Show comparison checkboxes only on hover, highlight differences between products, and provide explanations for technical terms using tooltips. On mobile sites, consider not implementing comparison features. | Not Applicable | |||||||||||||||
21 | List Items: Product Info & Thumbnails | Facilitate Scanning Of Comparison Tables #2142 | Desktop, Mobile App, Mobile Web đ | Without careful design, comparison tables can make it hard for users to find and understand product information. | If providing comparison tables, make it easy to discern attributes that differ across items by providing the ability to show only differences or by highlighting rows that contain differences. Group attributes by category, persist column headings, and use horizontal styling to define rows. | Not Applicable | |||||||||||||||
22 | List Items: Product Info & Thumbnails | Ensure Product Data Used for Comparison Tables Is Complete #2145 | Desktop, Mobile App, Mobile Web đ | If data is missing from comparison tables, the ability to successfully compare products is considerably reduced. | Develop automated and manual data-structure verification processes for both vendor-supplied data and internal databases. If data in comparison tables is incomplete, explain why data is missing. | Not Applicable | |||||||||||||||
23 | List Items: Product Info & Thumbnails | Provide Inline Help in Comparison Features for Technical Specs #2148 | Desktop, Mobile App, Mobile Web đ | Usersâ ability to compare spec-driven products is severely restricted if they canât understand every spec in the comparison table. | Use tooltips, using underlining or recognizable icons, to explain all specs and attributes used in comparison tables that may not be understood by all users. | Not Applicable | |||||||||||||||
24 | List Items: Product Info & Thumbnails | Consider Sparsely Highlighting Unique Purchasing Attributes #447 | Desktop, Mobile App, Mobile Web đ | Unique-purchasing attributes such as âSaleâ and âNewâ lose their uniqueness when theyâre ubiquitous, and labels signifying unique-purchasing attributes lose their effectiveness when theyâre difficult to read or understand. | Consider highlighting unique-purchasing attributes such as âOn Saleâ, âBest Sellerâ, and âNewâ in the list item â but only if the labels are applied sparingly and are easy to read and understand. Unique-purchasing attributes highlighted in the product list should also be available as filters and through search. | Neutral | |||||||||||||||
25 | List Items: Product Info & Thumbnails | Consider Making Brands Easy to Identify in List Items When They Are of High Importance #444 | Desktop, Mobile App, Mobile Web đ | Brand-conscious users could miss out on suitable items if they canât identify brands in product lists. | When brands are important for users in making purchasing decisions, consider displaying logos in list items, or display the brand name as a separate element in the list item info if thereâs a concern logos will detract from the scannability or aesthetics of the product list. | Not Applicable | |||||||||||||||
26 | List Items: Product Info & Thumbnails | Always Have Thumbnails for All List Items #455 | Desktop, Mobile App, Mobile Web đ | A blank space or thumbnail placeholder in a list item signifies to many users that the product is unavailable or incomplete, and if there are many products that are missing thumbnails users may develop a negative perception of a site. | Always provide thumbnails for all list items, even for products that are less visual in nature (e.g., information products). | Violated High | |||||||||||||||
27 | List Items: Product Info & Thumbnails | Ensure List Item Thumbnails and Info Make It Clear Whatâs Included in the List Item Price #445 | Desktop, Mobile App, Mobile Web đ | Users have a very difficult time evaluating products when it isnât clear whatâs included in the price. | Ensure list item thumbnails accurately depict the components, quantities, and accessories included in the purchase price of a product, reassess the category taxonomy if necessary to avoid mixing product types, and ensure the list item info supports whatâs depicted in thumbnails. | Violated Low | |||||||||||||||
28 | List Items: Product Info & Thumbnails | The Product Type, and Certain Product Variations, Must Always Be Clear from the List Item Thumbnail #457 | Desktop, Mobile App, Mobile Web đ | Users rely on list item thumbnails to determine product type and distinguish among certain product variations, and are therefore easily misled by ambiguous images. | Make it clear what the product type, and relevant product variations, is in list item thumbnails by depicting unusual items in a use context, omitting or deemphasizing products that are not included in the item, and visually differentiating product variants when itâs otherwise difficult or impossible to tell the differences between them. | Not Applicable | |||||||||||||||
29 | List Items: Product Info & Thumbnails | Consider Having Both âLifestyleâ and âCut Outâ Thumbnails #463 | Desktop | Without suitable context in thumbnails some users may not be inspired, while the lack of a simple and clear thumbnail could lead to a lack of clarity about the product. | Consider implementing both plain âCut Outâ and âLifestyleâ list item thumbnails. Show one thumbnail type consistently by default and the other type on mouse hover. | Violated High | |||||||||||||||
30 | List Items: Product Info & Thumbnails | Thumbnail Sizes Should Reflect the Userâs Need for Visual Product Information #456 | Desktop | If users are not able to adequately assess a product from its list item thumbnail they will have a hard time finding relevant products in visually-driven industries. | Ensure users have sufficient visual product information by following one or more of the 4 verified design patterns. | Adhered High | |||||||||||||||
31 | List Items: Product Info & Thumbnails | Highlight Vital Product Features in the List Item Thumbnail #458 | Desktop, Mobile App, Mobile Web đ | Users often visually evaluate list items and may therefore discard relevant products if their thumbnail fails to indicate key product features. | Highlight vital product features in the list item thumbnail, relying on focal point, angle, shot variety, and perspective to highlight any key aspects. | Adhered High | |||||||||||||||
32 | List Items: Product Info & Thumbnails | Be Cautious of Showing Products Only in Their Packaging #459 | Desktop, Mobile App, Mobile Web đ | When product list thumbnails are ambiguous, users might have difficulty deducing exactly what the product actually is or misinterpret whatâs included in the price. | Display products outside of their packaging, alongside their packaging, or both, if displaying products only in their packaging hides key attributes or may lead to misinterpretation. | Violated Low | |||||||||||||||
33 | List Items: Product Info & Thumbnails | Visually Homogeneous Products Should Have Uniform Thumbnails #462 | Desktop | Users will try to visually compare aesthetically identical products if they use different thumbnails. | Present visually homogeneous products with uniform list item thumbnails (same angle and crop) to encourage users to perform non-aesthetic comparisons of them. | Not Applicable | |||||||||||||||
34 | List Items: Product Info & Thumbnails | Include List Item Information Based on Applied Filters and Sorting #480 | Desktop | Users canât properly evaluate list items without insight into the product aspects that are of importance to them. | Dynamically include list item information based on the userâs applied sorting direction and any multi-value and scale attribute filters. | Not Rated | |||||||||||||||
35 | List Items: Product Info & Thumbnails | Consider Highlighting in the Product List any Product Already in the Userâs Cart #484 | Desktop, Mobile App, Mobile Web đ | If users canât distinguish items already in the cart from other items, product recognition and refindability are needlessly difficult. | Highlight any list items that have already been added to the cart. On mobile, ensure that the list item changes donât make the item too tall. | Violated High | |||||||||||||||
36 | List Items: Product Info & Thumbnails | Adjust Thumbnails to Reflect Usersâ Applied Filters #482 | Desktop, Mobile App, Mobile Web đ | If thumbnails donât reflect a preference specified by applying a filter option, users may dismiss potentially suitable products. | If a filtered-for product attribute has a visual dimension, and a thumbnail exists that can highlight this visual filter attribute, adjust thumbnails to match usersâ applied filters (e.g., change all thumbnails to match the color a user has filtered for). | Not Applicable | |||||||||||||||
37 | List Items: Interface & Hit Areas | List Item Info Elements Should Be Visually Distinct #448 | Desktop, Mobile App, Mobile Web đ | If product name, type, brand, and features lack visual distinction, users have a difficult time scanning and accurately interpreting product list items. | Avoid displaying separate list item info elements without any visual distinction (e.g., a single undifferentiated list item title); instead, use font style variations, line breaks, bullets, and spacing to make list item info elements visually distinct, and do so consistently across list items of the same product type. | Not Applicable | |||||||||||||||
38 | List Items: Interface & Hit Areas | Avoid âOut of Stockâ and Provide an Expected Delivery Date Instead for Product List Items #528 | Desktop, Mobile App, Mobile Web đ | Listing a product as âout of stockâ when itâs simply temporarily unavailable leads to abandonments as users search elsewhere to purchase the item. | For product list items, provide the estimated date when users can expect a product to be delivered (consider only displaying this on items that are temporarily unavailable), avoid âout of stockâ labels in the list items, and minimize products that have been discontinued. | Violated High | |||||||||||||||
39 | List Items: Interface & Hit Areas | Ensure Prices Are Clear in List Items #452 | Desktop, Mobile App, Mobile Web đ | When prices are missing or hard to discern, users will be unable to efficiently scan list items to evaluate the suitability of products, and could discard them. | Always display prices in list items and ensure they are easy to discern by styling the new price to be more prominent than discounts, old prices, and nonessential list item info. Make sure discount offer text is instantly understandable and unambiguous, and always match prices on the product list and the product page. | Violated High | |||||||||||||||
40 | List Items: Interface & Hit Areas | Use Swatches to Indicate Color Variations #450 | Desktop, Mobile App, Mobile Web đ | Color is often a crucial product variation but can be easily overlooked or misinterpreted. | Use swatches to indicate color variations in list items (and a single swatch or text if thereâs only one color), ensure swatches are large enough to provide users with sufficient visual information, and if all color variations canât be shown clearly indicate the total number (e.g., â+11â). | Not Applicable | |||||||||||||||
41 | List Items: Interface & Hit Areas | How to Implement Interactive Swatches on Mobile (if Needed) #994 | Mobile App, Mobile Web đ | Interactive swatches can perform well, but there are several issues to be aware of, including sizing, spacing, and reduced usefulness if all variations are not shown in list items. | If using interactive swatches, ensure that they conform with size and spacing guidelines for mobile, and that all swatches can be accessed in the list item. | Not Applicable | |||||||||||||||
42 | List Items: Interface & Hit Areas | Numeric Product Specs Need Proper Labels and Units #449 | Desktop, Mobile App, Mobile Web đ | If users canât determine what numeric product specs represent, they may dismiss suitable items or spend too much time trying to understand the numbers. | Always include labels and units for all numeric product specifications in product list items. | Not Applicable | |||||||||||||||
43 | List Items: Interface & Hit Areas | Generally Avoid Multipath List Items #525 | Desktop | When there are multiple paths from list items, users can take unwanted detours and product finding can be slowed, and itâs more difficult to maintain an overview of the product list. | Generally avoid multipath list items and use single-path list items instead. If multiple paths are necessary, synchronize hover effects for elements that have the same link destination or function. Highlight entire single-path list items on hover. | Adhered High | |||||||||||||||
44 | List Items: Interface & Hit Areas | Display a Secondary Thumbnail on Hover #527 | Desktop | Users need as much visual information as they can get about products in the product list, and displaying only a single static image is a missed opportunity to provide additional visual details. | In addition to a standard âCutoutâ thumbnail, show a secondary thumbnail on hover. Depending on the product type, consider displaying a âLifestyleâ thumbnail, a âCompatibilityâ thumbnail, a âFeature Calloutâ thumbnail, or a âProduct Variationâ thumbnail. | Violated High | |||||||||||||||
45 | List Items: Interface & Hit Areas | Generally Avoid âQuick Viewsâ #529 | Desktop | Some users might mistake âQuick Viewsâ for the product page and therefore miss out on product information and features. | Generally avoid âQuick Viewsâ. If they must be used, make sure users can easily distinguish the âQuick Viewâ from the product page, that it is difficult to unintentionally open the âQuick Viewâ, and that clicking the browser âBackâ button simply closes the overlay. | Adhered High | |||||||||||||||
46 | List Items: Interface & Hit Areas | When to Include Nonessential List Item Elements and Info #530 | Desktop, Mobile App, Mobile Web đ | List item elements that are not required for product browsing or that are not unique to each product can clutter list items and slow down the process of scanning product lists, yet can be helpful for a subset of users. | On desktop, generally show nonessential elements on hover only; on mobile, avoid âAdd to Cartâ (except in some specific circumstances) and analyze usage rates of other elements to determine whether to include them. For both desktop and mobile, only show nonessential list item info when itâs relatively unique and highly valuable to users, and design the nonessential elements and info to be relatively inconspicuous. | Adhered High | |||||||||||||||
47 | List Items: Interface & Hit Areas | Consider Showing Additional List Item Information on Hover #526 | Desktop | Displaying peripheral information in the list items can clutter the product list yet it can also provide the user with relevant product insights. | Consider showing additional list item information on hover to provide users with supplementary product details without cluttering the product list. | Not Applicable | |||||||||||||||
48 | Filtering: Available Filters | Always Allow Filtering By Price, User Ratings, Color, Size, and Brand #1167 | Desktop, Mobile App, Mobile Web đ | Users need to be able to quickly tailor the product list to include only the most suitable items. | Always provide filters for price, user ratings average, color, size, and brand (except on single-brand sites). | ||||||||||||||||
49 | Filtering: Available Filters | Provide Category-Specific Filters for All Key Product Specs #409 | Desktop, Mobile App, Mobile Web đ | If users canât tailor product lists by all key specs or attributes, product finding will be severely hampered. | Provide category-specific filters for each product type offered. | Violated High | |||||||||||||||
50 | Filtering: Available Filters | Provide âThematicâ Filters for Relevant Product Types and Categories #413 | Desktop, Mobile App, Mobile Web đ | Usersâ browsing patterns from physical retail arenât supported by filters based solely on physical product attributes. | Offer âThematicâ filters for relevant product types specific to the siteâs context and product catalog. | Not Applicable | |||||||||||||||
51 | Filtering: Available Filters | Have a âSalesâ or âDealsâ Filter Type #1191 | Desktop, Mobile App, Mobile Web đ | Users often want to find products on sale, but nonsale items shown in the product list can slow product finding. | Provide a âSaleâ or âDealâ filter type, and ensure that it is always visible in the filter interface (e.g., donât hide it in a âPriceâ filter type). | Violated High | |||||||||||||||
52 | Filtering: Available Filters | Always Have Compatibility Filters for Products that Are Compatibility Dependent #418 | Desktop, Mobile App, Mobile Web đ | If users canât identify compatible products, they may be unable to proceed with a purchase. | Have compatibility-based filters for all compatibility-dependent products. | Not Applicable | |||||||||||||||
53 | Filtering: Available Filters | Allow Users to Filter by âProduct Statusâ Where Relevant #417 | Desktop, Mobile App, Mobile Web đ | Product statuses that donât align with a userâs needs can render otherwise relevant products completely irrelevant, and users may be forced to browse long lists of products that include many products they wonât be interested in. | Provide âProduct Statusâ filters (e.g., âOut of Stockâ, âNewâ, â1-day Shippingâ, etc.) | Violated High | |||||||||||||||
54 | Filtering: Available Filters | Accessory Products Should Be Filterable #540 | Desktop | Accessory products often âpolluteâ the product list and render price sorting useless. | Make sure accessory products can be excluded from any product list, and possibly also singled out. | Not Applicable | |||||||||||||||
55 | Filtering: Available Filters | Have âRecipientâ Filters When the Buyer Isnât the End User #410 | Desktop | When users are buying products for others, they may not always know which items would be suitable. | Have âRecipient Filtersâ such as age and gender for sites where the site visitor isnât the recipient of the product (typically â but not limited to â toys, flowers, and gift sites). | Not Applicable | |||||||||||||||
56 | Filtering: Available Filters | Allow User-Defined Ranges for All Numeric Filtering Values #416 | Desktop, Mobile App, Mobile Web đ | Predefined numeric range filters rarely match each individual userâs needs, and singular numeric filtering values are unsuitable for viewing a range. | For numeric filtering values, provide both predefined and user-defined range filters, and allow users to enter only the maximum or minimum value of the numeric range. | Not Applicable | |||||||||||||||
57 | Filtering: Available Filters | Have a âNew Arrivalsâ Filter #415 | Desktop, Mobile App, Mobile Web đ | Users often want to see only âthe latestâ products, but are instead forced to scroll through long product lists of general items, which slows product finding. | Provide a âNew Arrivalsâ filter as a top-level filter type that is visible by default in the filtering interface. | Violated High | |||||||||||||||
58 | Filtering: Available Filters | Provide âSymptomâ Filters for Certain Product Types #408 | Desktop, Mobile App, Mobile Web đ | For certain product types, the majority of users will rarely know the specific product name or description, and may have difficulty finding the right products. | Provide âSymptomâ filters for relevant products. | Not Applicable | |||||||||||||||
59 | Filtering: Scope & Logic | Always Allow Users to Combine Multiple Filter Options of the Same Filter Type #427 | Desktop, Mobile App, Mobile Web đ | When users are unable to choose more than one filtering option within a single filter type, they will have to redo their entire filtering flow for each filtering value they are interested in. | Allow users to combine multiple filtering options within the same filter type. | Adhered High | |||||||||||||||
60 | Filtering: Scope & Logic | Always Explain Industry-Specific Filters #433 | Desktop, Mobile App, Mobile Web đ | Filter types and options that contain industry jargon are difficult to use and can be misleading. | Avoid or explain industry-specific filters (e.g., via tooltips), and provide visual examples for visual filters. | Not Applicable | |||||||||||||||
61 | Filtering: Scope & Logic | Consider âTranslatingâ Compatibility Filters to Something Users Understand #423 | Desktop | Users often donât know or are unsure about the technical details of their products. | Consider turning spec-based compatibility filters into something that novice users have an easier time understanding and recognizing, typically the name of the product they already own. | Not Applicable | |||||||||||||||
62 | Filtering: Scope & Logic | Update Filter Availability Based on Current User Scope #428 | Desktop | Users are confused if the same selection can be made multiple consecutive times. | Update filter availability based on userâs current scope and selections. | Not Applicable | |||||||||||||||
63 | Filtering: Scope & Logic | Ensure Filter Options Are Always Inclusive #429 | Desktop | Excluding filters are so rare and complex that they overcomplicate most filtering interfaces. | Ensure that filters are inclusive. If an excluding behavior is important to the specific site context, consider preselecting all filtering options by default for relevant filter types, allowing users to deselect those options they arenât interested in. | Adhered High | |||||||||||||||
64 | Filtering: Scope & Logic | Post-Process Product Data to Harmonize Branded Filters #436 | Desktop, Mobile App, Mobile Web đ | Branded feature names make recognition and comparison of filter options difficult for users who arenât domain experts, and thus make it more difficult for users to get a product list that contains only items of interest. | Post-process product data to harmonize filtering options for branded feature names and colors. | Not Rated | |||||||||||||||
65 | Filtering: Scope & Logic | Consider Pre-Selecting the Filtered Product Variation #439 | Desktop | Many users expect the product variation theyâve filtered by to be selected on the product page. | Consider pre-selecting, on the product page, any product variation that the user has specifically filtered for in the product list (e.g., pre-selecting the red color variation if the user has filtered by this color). | Not Applicable | |||||||||||||||
66 | Filtering: Scope & Logic | Display Applied Filters in an Overview #488 | Desktop, Mobile App, Mobile Web đ | If users canât easily see which filters are applied, and canât quickly deselect them, they will have to spend more time than necessary narrowing the product list to a suitable selection. | On desktop, display an applied filters summary above the product list or the filtering sidebar, or below the horizontal filtering toolbar. On mobile, use horizontally scrolling lists with obvious truncation to show applied filters, or stack the applied filters in multiple rows, but consider truncating the rows after 2â3 lines and allowing users to âSee Allâ applied filters. Spec-heavy product types should have the filter type displayed in addition to the filter option, while visually driven product types only generally need the filter option. | Adhered High | |||||||||||||||
67 | Filtering: Scope & Logic | Filter and Sorting Changes Should be Separate Entries in the Userâs Browsing History #492 | Desktop | The technical implementation of what is a new page often doesnât match the userâs expectations, breaking the expected back-button behavior. | As users apply filters and change sorting direction, update the URL and browsing history accordingly to support their expectations for the browser back-button behavior. | Violated High | |||||||||||||||
68 | Filtering: Scope & Logic | Avoid Unnecessarily Resetting Filtering and Sorting Settings #493 | Desktop, Mobile App, Mobile Web đ | A lot of time can be wasted and the scope of product lists misunderstood if usersâ filtering and sorting choices are reset. | Persist any applied filters and sorting direction as users apply additional values, go back-and-forth between the product list and product pages, or reload the page. | Violated High | |||||||||||||||
69 | Filtering: Scope & Logic | Live-Update the Product List as Filters are Applied #486 | Desktop | If users canât quickly apply multiple filter options, product finding will be delayed. | Live-update the product list without a full page reload each time the user selects a filtering option. Display a load indicator while the list updates; ensure that clicking the âBackâ button undoes the last filter change; and allow users to access filter options as the list updates. | Violated High | |||||||||||||||
70 | Filtering: Interface & Layout | Visually Indicate Hierarchical Relationships for Categories in the Sidebar #468 | Desktop | Itâs difficult for users to get an accurate overview of category filters if subcategories arenât indicated visually. | Visually indicate the category hierarchy in sidebars by indenting subcategories and make sure parent categories are clickable. | Not Applicable | |||||||||||||||
71 | Filtering: Interface & Layout | Consider Promoting Important Filters #474 | Desktop, Mobile App, Mobile Web đ | Unless users are made aware of important filters in large product lists, they may spend too much time narrowing the list to items of interest, or may not apply any filters at all â ending up with an overwhelming number of list items to consider. | For categories where an initial filter selection will benefit most users, consider promoting those filtering values above the product list, while also keeping them in the normal filtering interface. Show any applied âPromoted Filtersâ above the product list. | Not Applicable | |||||||||||||||
72 | Filtering: Interface & Layout | Truncate Filters with 10+ Values #470 | Desktop | Long lists of filter options push other available filter types out of view, while dedicated inline scrollable areas are difficult for users to control. | Truncate filter options if there are more than 10, and make sure that the âView Moreâ link is easy to discern. Avoid both inline scrollable areas and untruncated lists with 10+ filter options. | Adhered Low | Lists with less than 10 filter options are truncated | ||||||||||||||
73 | Filtering: Interface & Layout | Visually Relate Filters to the Product List #464 | Desktop | Often users donât instinctively connect the sidebar of filters with the products displayed. | Ensure that the filtering sidebar and product list align horizontally. In particular, consider placing banners and promoted content atop both the product list and filtering sidebar, and consider stretching the page header to cover both product list and filtering tools. | Adhered High | |||||||||||||||
74 | Filtering: Interface & Layout | Show the Number of Matches for Each Filter Option, and Update Them as Filters Are Applied #467 | Desktop, Mobile App, Mobile Web đ | When the number of matches for filtering options arenât shown, users wonât know the effect of applying the filters. | Show the number of matches for each filtering option, and live update the numbers as filters are applied or deselected. | Violated High | |||||||||||||||
75 | Filtering: Interface & Layout | Hiding vs. Disabling Dead-End Filtering Values #475 | Desktop | Disabled values can confuse and frustrate users, while hidden values may lead users to think the siteâs product selection is smaller than it actually is. | As filtering values become unavailable, display them as greyed out options. If clicked, show a dialog describing why the value is unavailable and how to re-enable it. | Not Applicable | |||||||||||||||
76 | Filtering: Interface & Layout | Always Provide Checkboxes for Filter Options #479 | Desktop | If users overlook or misinterpret the function of filter options, they will be unable to filter product lists. | Always display a checkbox for each filter option, and consider styling options using the siteâs default link styling. Consider also adding a hover effect to filter options, and differentiating filter types and options using spacing and text styling. | Violated High | |||||||||||||||
77 | Filtering: Interface & Layout | Consider a Horizontal Unified Sorting and Filtering Tool #476 | Desktop | Filtering tools are often overlooked or confused with the sorting options. | If your users only need very few filter types, consider using a unified horizontal filtering and sorting bar above the product list (ditching the vertical sidebar filtering approach entirely). | Not Applicable | |||||||||||||||
78 | Filtering: Interface & Layout | How to Present Filtering Options in a Drop-Down Interface #465 | Desktop | If filtering options in a drop-down interface are hidden and difficult to select, product finding will be needlessly slowed. | When displaying filtering options in a drop-down interface, use a custom interface and not the browserâs native drop-down. Make sure that users can select more than one option from each type, and ensure that applied values are displayed outside the interface. | Not Applicable | |||||||||||||||
79 | Filtering: Interface & Layout | Order Untruncated Filter Options by âPopularityâ #471 | Desktop | Users often overlook the most relevant filter options and may misinterpret the filter type when the untruncated options are listed by number of matches. | When filter options are truncated, order the options visible by default by popularity; for example, by the combined sales for each option. When the list of filter options is shown in full, the options should be ordered alphabetically or numerically (depending on the filter type). | Not Rated | |||||||||||||||
80 | Filtering: Interface & Layout | Ensure Range Sliders Have Input Field Fallbacks #472 | Desktop, Mobile App, Mobile Web đ | Sliders are often misinterpreted and can be difficult to interact with. | Always provide input fields for numeric-range sliders. Additionally, ensure slider handles are large relative to the underlying range bar and sufficiently contrast with the surrounding background, and use nonlinear slider scales where appropriate. | Not Applicable | |||||||||||||||
81 | Filtering: Interface & Layout | Consider Indicating Sub-Values of Selected Hierarchical Filters #485 | Desktop | Relevant product nuances can be needlessly difficult for the user to discern when they arenât highlighted. | Consider indicating sub-values (typically sub-categories) for each list item if the user has applied hierarchical filters (often a category). | Not Applicable | |||||||||||||||
82 | Sorting | Diversity-Based âRelevanceâ Should Be the Default Sort Type #510 | Desktop, Mobile App, Mobile Web đ | Users quickly judge whether a category is likely to have what theyâre looking for based on the first few products in the list, and, if the products arenât representative of the list as a whole, some will assume the list doesnât contain products of interest. | Ensure that the first 10 to 20 products reflect the diversity of all major product types within the category (i.e., have âRelevanceâ as the default sort type and implement it as a diversity-based matrix). | Violated High | |||||||||||||||
83 | Sorting | Allow Users to Sort the Product List by âPriceâ, âUser Ratingâ, âBest Sellingâ, and âNewestâ #511 | Desktop, Mobile App, Mobile Web đ | âHardâ filter boundaries can cause users to miss out on relevant products that fall just outside their parameters, and irrelevant sort orders make it harder for users to find products that match their needs. | Always offer âPriceâ, âUser Ratingâ, âBest Sellingâ, and âNewestâ sort types for product lists. Consider offering additional category-specific sort types that reflect the 1â3 most important product attributes. Avoid alphabetical sort types such as âProduct titleâ, âNameâ, and âProduct descriptionâ. | Violated High | |||||||||||||||
84 | Sorting | Avoid Most Alphabetical Sorting #539 | Desktop | Users cannot predict the first character of the siteâs product titles or descriptions. | Donât offer alphabetical sort types such as âProduct titleâ, âNameâ, and âProduct descriptionâ, as they nearly always lead to failure (with âBrandâ sorting being a notable exception). | Violated High | |||||||||||||||
85 | Sorting | Always Use a Drop-Down for the Sorting Tool #514 | Desktop | Separate sorting links are often overlooked by users and tempt sites to implement too few sort types. | Always use a native or custom-designed drop-down UI for sorting. | Adhered High | |||||||||||||||
86 | Sorting | Sorting Directions and Naming of Sort Types #513 | Desktop | Seemingly miniscule naming details of the sort types and direction can make the sorting options unclear. | Use â(low to high)â terminology for bi-directional sort types, but aim for more natural phrasing of one-directional ones. Also, only make sort types with a singular preference one-directional (e.g., âCustomer Ratingsâ, âBest Sellersâ, and âDate Added to Siteâ). | Violated High | |||||||||||||||
87 | Sorting | Suggest Category Scopes Within the Sorting Drop-Down #509 | Desktop | Sorting of higher-level categories (and site-wide search results) often leads to very poor matches listed first. | For site-wide search results and in higher-level scopes, suggest category scopes directly within the sorting drop-down. | Not Applicable | |||||||||||||||
88 | Sorting | Avoid Having âSort Byâ as a Sorting Option #521 | Desktop | Having a default âSort byâ option makes it needlessly difficult for users to deduce how the current product list is sorted. | Never have âSort byâ as a sorting option. However, provide a âSort byâ label for the sorting drop-down. | Adhered High | |||||||||||||||
89 | Sorting | Use Both Ratings Average and Number of Ratings when Sorting by âUser Ratingsâ #517 | Desktop, Mobile App, Mobile Web đ | While a product with a single 5-star rating technically has a higher average than a product with a 4.7-star average based on 18 ratings, most users would consider the latter better rated â yet many sites fail to meet this expectation, which limits the usefulness of sorting by âuser ratingâ. | Ensure sorting by âUser Ratingsâ takes the number of ratings into account instead of relying solely on the rating average. | Not Rated | |||||||||||||||
90 | Sorting | Place an Additional Sorting Drop-Down at the Bottom of the Product List #515 | Desktop | Loading more products isnât always the best next step if the user has already scrolled through the 100 most relevant items. | Place an additional sorting drop-down at the bottom of the product list. | Adhered High | |||||||||||||||
91 | Sorting | Dynamically Remove Dead-End Sorting Options Based on the Product List #523 | Desktop | Sort types where none of the products match the attribute sorted by are effectively dead-ends. | Dynamically remove or disable any dead-end sorting options based on the dataset available for the product list. | Not Applicable | |||||||||||||||
92 | |||||||||||||||||||||
93 | |||||||||||||||||||||
94 | |||||||||||||||||||||
95 | |||||||||||||||||||||
96 | |||||||||||||||||||||
97 | |||||||||||||||||||||
98 | |||||||||||||||||||||
99 | |||||||||||||||||||||
100 |