如果做得正确,过滤器允许用户缩小一个网站选择的成千上万的产品只有这几项匹配他们的特定的需求和利益。 然而,尽管它是一个中央方面用户的电子商务产品的浏览,大多数网站提供一个死气沉沉的过滤经验。 事实上,我们2015年指标显示,只有16%的大型电子商务网站提供一个相当好的过滤经验。
鉴于过滤的重要性,我们——整个团队Baymard研究所——在过去的九个月研究用户如何浏览、筛选和评估产品在电子商务产品列表。 我们检查了这两个搜索,category-based产品列表。 本研究的核心是一个大规模的可用性研究 测试19领先的电子商务网站 与真实的最终用户,自言自语的协议。
尽管测试数百万美元的网站,测试遇到了以上 700年可用性问题 相关产品列表,过滤和排序。 所有这些问题进行了分析和压缩成93简洁的产品列表可用性指南,35的特定于过滤可用性设计和逻辑。
( 查看大版本 )
我们随后 标准的50个美国主要电子商务网站 在这些93年指南排名网站和学习主要电子商务网站设计和实现他们的过滤和排序功能。 这导致了一个基准数据库超过4500基准数据点电子商务产品目录设计和性能,其中1750是特定于过滤的经验。 (您可以查看网站的排名,在公开的部分实现 产品列表和过滤 基准数据库)。
在本文中,我们将仔细查看一些相关的研究成果 用户的过滤经验 。 更具体地说,我们将深入研究以下见解：
在本文中,我们将介绍这些 七个过滤的见解 ,显示你的可用性测试结果,检查基准数据和提供最佳实践案例为创造一个良好的电子商务经验过滤。
如果做得正确,过滤器允许用户只看到他们的个人需求和兴趣相匹配的产品,如某一特定类型的产品或风格或某些特性或属性。 例如,用户可能希望看到“夹克”所有产品类别为“男性”(性别过滤器),“冬季”赛季(主题过滤)和可用的大小颜色“黑色”和“M”(变异过滤器)。 电子商务的相当于走进物理存储和要求销售人员“黑人男性的,冬天夹克大小中等。”
然而,这些美妙的过滤的先决条件是有一个广泛的过滤器可用于用户钻到特定的特性和产品方面,他们和他们的特定的利益很重要。 大多数电子商务网站已经达不到这里。 然而,一个好的过滤需要一定经验过滤器不仅存在,但将在用户容易理解的方式和互动,逻辑遵循用户的期望。
( 查看大版本 )
在测试过程中,过滤逻辑和过滤用户界面往往导致贫困的经验,即使在网站投入了资源在产品标签(即过滤可用性)。 用户需要能够定位和应用相关的过滤值和使他们的理想过滤组合从一个网站为了吸引价值的过滤器。 然而一个显著的40%的测试受试者在测试无法找到一个网站的过滤选项——尽管积极寻找他们。 这是至关重要的,考虑到注意过滤器-用户有效一样不存在的过滤器。 5和6节,然后,我们将介绍两个过滤设计模式,能有效地解决其中的一些用户界面的问题。
一个好的经验法则是,任何足够重要的产品规格所示产品列表项也应作为一个过滤器。 此外,由于显示在用户面前的信息,该网站是提醒用户,规范是重要的(或者,在用户新域,教他们是)。 非常的规范,鼓励用户过滤。
注意 自制 显示能力的食品加工商(以杯),提醒用户,这是一个重要的指标,但是并没有提供过滤的食品加工能力。 ( 查看大版本 )镀金 州大多数夹克的材料类型,但没有过滤材料。 用户感兴趣的羊毛夹克必须经过所有295件上衣。 ( 查看大版本 )斯台普斯 列出了大部分打印机的打印速度但不允许用户过滤2409打印机的打印速度。 ( 查看大版本 )
当一个产品是一组搜索结果列表, 面向方面的搜索 应该为用户提供最优产品特定的过滤器,无需用户指定一个类别。 我们触及了我们的测试结果和面向方面的搜索的主题(以及如何只有40%的顶级网站提供)在第六节” 电子商务的搜索当前状态 ”。
虽然电视、照相机、夹克和衬衫都可以轻易位于大多数电子商务网站,查看产品,匹配一个特定的“主题”可以几乎不可能。 尽管这样的专题属性通常是常见的和中央方面用户的购买决定,我们的基准测试显示,20%的顶尖电子商务网站仍然缺乏主题过滤器(虽然支持增长到66%,上升了48%我们最后的研究和基准测试的电子商务搜索 )。
( 查看大版本 )
“这种事情我太不耐烦。 他们将失去了我。 如果有多个页面,我永远不会得到它,”一个主题解释为他寻找一个夹克的春季 镀金 。 “通常你可以选择冬季夹克,春季外套或夹克的类型。 ”他最终放弃该网站。
( 查看大版本 )
“我看这些风格是什么样子。 然后我想,‘Ayhh,这些都是丑陋的。 ”所以,我上去了,看看我是否能排序(过滤器,艾德。),由“风格”之类的,”一个主题解释说当她寻找一种方式来过滤的风格。 只有一个“枕头类型”过滤器可以在陶器谷仓,她选择尝试,最终应用随机枕头类型看,带她,几乎没有一个可靠的方式让用户在网站上找到相关条目。
梅西百货 提供一个主题“风格”过滤器,最终被测试对象的60%。 以上,一个主题被认为应用“外套风格:休闲”过滤器。 ( 查看大版本 )
没有主题过滤选项,查看他们唯一感兴趣的产品常常被不合理地为用户耗费时间。 尤其这样就真正地选择购买哪个项目(s),因为相关产品将随机分散在一个产品列表。 在测试过程中,缺乏主题过滤器经常导致网站被抛弃,因为存储的对象要么过早得出结论并没有把他们想要的产品的类型(例如,春季夹克),或者更多的时候,寻找一些相关的东西,可能是隐藏在一个巨大的产品列表将会几乎是不可能的。 网站上有主题过滤器,过滤器,有很高的使用率,经常在50%以上。
最简单的方法从技术上实现主题过滤器是通过手动标记产品或产品组。 主题类型风格的典型例子(休闲、浪漫、现代),季节(春、假日),使用条件(户外、水下)和purchase-selection参数(便宜,物有所值,高结束)。 某些类型非常适合于手动标记(例如,风格和季节通常会快速和准确的人工标记),而其他过滤器需要广泛的领域知识来手动标记(例如,物有所值)。
( 查看大版本 )
“哦,我的天哪,我不会这样做,而不是一个网站,这是很难驾驭。 我会去相机商店和我的相机,找到一个适合的情况下。 我不会去考虑所有这些选项,”一个主题解释说在试图找到一个摄影包,实现没有办法缩小253袋的尺寸列表。 阐述了主题,“我需要去之间来回,相机比较维度。 然后它还好看。”
无论多么诱人的价格,规范多么伟大,多么完美的顾客评论发音或者有吸引力的产品产品的设计,最终用户不感兴趣,如果产品是不相容的。 这可能是一个看来,无论产品的其他属性。 这使得兼容性过滤器过滤类型的一个最重要的(当然,仅供compatibility-dependent产品类型)。 给用户访问列表的产品兼容已有的项目是至关重要的,。
虽然大多数网站都有一个“品牌”过滤器,测试表明,这完全是唯一类型的兼容性不足过滤器。 首先,品牌往往有多个系列或产品与不同的兼容性方面。 例如,所有联想联想笔记本电脑适配器不适合所有人,因此,简单地应用过滤器“联想”不会给用户所有产品的列表与他们特殊的联想笔记本电脑兼容。 其次,几个兼容性依赖、第三方产品是一个主要的考虑因素。 例如,一个“制造商”或“品牌”过滤器不会为用户提供的完整列表匹配的MacBook笔记本袖子。
(见章节4和6的“ 电子商务研究:更好的导航和分类指南 “compatibility-dependent更多产品,包括完整的讨论互连兼容的产品在产品页面。)
所有三种方法造成了严重的可用性问题。 前两个表现最差,而截断是表现最好的三种方法——但只要是用户界面的实现非常注重细节。 在深入细节之前需要实现一个表现良好的截断设计,我们先简要介绍核心问题的两个方法。
显示所有过滤值在一长串让用户很难得到其他过滤类型的概述。 在这里, L.L. Bean 被认为在900像素高显示(减去浏览器和操作系统chrome)。 ( 查看大版本 )
例如,在测试过程中,用户会看到一个品牌过滤器与一个品牌三个屏幕过滤值,使它不可能提供的额外的过滤器类型概述如下。 大部分的测试对象完全忽视以下额外的过滤器类型过滤值的长串,通常被长期过滤栏拉伸两个屏幕或更多。 积极的注意,我们的产品列表和过滤指标显示,只有一小部分(2%)的主要电子商务网站目前使用这种模式。
内联可滚动区域,如图所示 斯台普斯 为测试对象,造成多个交互问题,概念和interaction-wise。 ( 查看大版本 )
实现内联可滚动区域是更常见的- 24%的主要电子商务网站使用此模式。 然而,它并没有执行任何更好,因为它带来了一系列问题。 最重要的问题(也难以解决)如下:
(如果你想进一步探索内联可滚动区域的问题,我们 检查发现深度 )。
最后我们测试模式执行比其他两个。 截断的好处是给用户的概述不同的过滤类型。 这很重要,因为一个缺乏常常引起我们的主题让可怜的过滤选择仅仅因为他们倾向于与过滤值,第一次很长的列表的过滤器。 截断的另一个主要好处是,当用户找到感兴趣的一个过滤器类型时,他们也可以得到一个完整的概述过滤值在该类型(通过单击截断链接)。 因此,截断,结合其他两种方法的好处。
截断过滤值让用户可用的过滤类型概述——看到这里 丽 和所有可用的值在一个类型(当单击截断链接)。 ( 查看大版本 )
然而,性能优越的截断观察只有当用户俯瞰截断联系的风险是积极的接口。 事实上,在截断链接测试网站上没有足够明显,它执行(至少)两个其他模式一样糟糕,因为有些用户认为截断列表显示所有可用的过滤值。 目前,基准测试显示,只有6%的主要电子商务网站的截断联系设计不足。 虽然不是很多,但它仍然是值得提及的一些实现截断,测试表明是有效的:
北部的工具 列出了流行品牌过滤器列表时截断(促进最知名的值)。 扩大时,按字母顺序列出的值给可预测性。 ( 查看大版本 )
截断的过滤值(10 +),而不是显示所有值或使用内联可滚动区域。 确保用户注意到截断,显示10值触发截断之前,显示默认值,用户最有可能识别(即最受欢迎),和风格截断链接设置它有别于过滤值。
一般来说,在测试过程中电子商务的网站,我们发现用户认为分类是网站建议他们选择,而传统的过滤栏选项是被大多数用户是完全可选的。 劝导式设计的原则后,大多数的网站,因此,有许多类别,需要促进某些过滤器或过滤组合。 幸运的是,一种清晰的分类模式出现了在测试网站如何有效促进一套高度重要的过滤器-尽管实现需要大量的过滤设计细节的地方。
当测试对象搜索 亚马逊 ,某些范围会高度相关的过滤器在产品列表。 这晋升将测试对象向更多的筛选决策,而不是浏览过于广泛的产品列表。 除了提升在产品列表中,过滤的过滤值都保持完整的侧边栏(一个重要细节)。 ( 查看大版本 )
促进有限并选择过滤值的数量意义只有在绝大多数的用户有兴趣或应用可获得显著的效益。 因为提升滤波器鼓励用户应用它,明智的使用技术和谨慎,避免引诱用户过于狭窄的过滤列表。 例如,不要简单地使用这项技术website-wide无论在每个类别是最受欢迎的过滤器。 在实践中,你会经常需要手动副牧师的类别结构,保证提升过滤器的使用。
沃尔玛 需要更进一步的技术和促进与笔记本电脑和输入类型和关键采购过滤器,一致参数为用户想买一台笔记本电脑。 ( 查看大版本 )
提升过滤器不一定所有相同类型的需要。 他们可能仅仅是一个最重要的产品组合过滤器之前,用户可以申请时间进一步调查实际的产品列表。 事实上,提升一次过滤器甚至可以申请多个过滤器为用户提供受欢迎的滤波器组合的捷径。
如果我们看看过滤性能的主要电子商务行业,我们看到,性能千差万别。 下面7个最具优势的电子商务行业已经堆叠条形图绘制。 行“可接受的性能”供参考,描绘了一个“可接受”的门槛(但不是好的)过滤性能——至少根据典型测试遇到的问题。 注意性能差异考虑行业;例如,一个服装网站需要过滤器少于电子网站由于它携带的产品类型,因此,需要一个更先进的设计的过滤器来实现更高的分数。
( 查看大版本 )
尽管拥有最低的障碍提供了一个良好的过滤的经验,服装网站特别是最差所有行业的过滤性能,由于一个不幸的过滤选项不足和贫困过滤接口。 低于标准的过滤接口可能由于故意优先于一个清晰的美学和翔实的接口(一箱 错误的简单 )。 尽管处理产品类型只需要有限数量的过滤类型(与其他行业相比),许多服装网站甚至缺乏基本的过滤选项,比如产品材料和用户评级。
体育和爱好网站过滤的性能不佳。 虽然部分原因是一个简单的网站优先级美学,类似于服装行业,另一个原因可能是混合的视觉,spec-driven产品垂直行业。 许多产品在这些网站往往是相当视觉(玩具、户外用品、体育器材、爱好设备),然而,许多也有两三个技术属性,可能完全否定自己,如果他们不匹配用户的标准,例如性能、体重和年龄。 因此,用户将有更复杂的过滤需求为体育和爱好产品比他们通常定期服装网站。
电子及办公行业历来是其中的一个电子商务的行业用户提供多种过滤器,因为发现许多产品会为用户几乎不可能。 当近看平淡无奇的过滤性能在电子和办公室,问题往往是穷人过滤逻辑和接口。 特别常见的缺陷包括以下:只允许选择一个过滤值,没有数字滤波器的定义的范围,以及缺乏对行业术语的解释。 尽管一般大量的滤波器类型提供一些电子产品和办公室的网站,产品的技术性质,多个属性的用户的购买决定是至关重要的——仍然导致缺乏兼容性过滤器(见本文的第四节)和缺乏范畴特定过滤类型(见第二节)。
家和硬件网站提供良好的过滤性能。 这非常符合该行业的技术性质,和分数都可以解释为一种历史关注提供足够的过滤器(特别是兼容性过滤器),它允许用户找到特定的洗衣机或无绳钻,满足他们特定的标准。 然而,可怜的产品数据和结构化产品的普遍缺乏规范抑制滤波性能。
健康和美容网站有良好的过滤性能。 公平地说,健康和美容产品有更少的关键产品属性(数量是一个例外),这意味着网站可以侥幸过滤器与高度spec-driven产品比要简单得多。 电子商务网站在其他行业,因此,不应该模型其过滤经验在健康和美容网站,因为他们的过滤需求很可能不同。
大规模商人庞大和多元化的产品目录,产品数据结构有严格的要求,处理和分类——所有的东西都可以极其困难。 相结合的混合目录高度spec-driven和视觉产品类型,和大规模商人最复杂的过滤需求。 然而,很明显,最大规模的商人都知道这些挑战并取得了非常积极努力解决他们,经常通过先进的过滤逻辑和数据后处理。 这将导致多种过滤器提供(包括范畴特定的),这是质量的一个主要原因商家网站实现最佳的过滤性能,甚至考虑到用户的更复杂的过滤要求。
一些网站做的积极专注于过滤和资源花在产品标签。 对于那些网站,许多挥之不去的filter-related可用性问题与调整用户的期望和网站实现(具体来说,过滤设计和逻辑)。 过滤从而代表的机会大大提高投资回报率,大多数大型电子商务供应商已经在产品标签和数据收集。
When done right, filters enable users to narrow down a website’s selection of thousands of products to only those few items that match their particular needs and interests. Yet, despite it being a central aspect of the user’s e-commerce product browsing, most websites offer a lacklustre filtering experience. In fact, our 2015 benchmark reveals that only 16% of major e-commerce websites offer a reasonably good filtering experience.
Given the importance of filtering, we — the entire team at the Baymard Institute — spent the last nine months researching how users browse, filter and evaluate products in e-commerce product lists. We examined both search- and category-based product lists. At the core of this research was a large-scale usability study testing 19 leading e-commerce websites with real end users, following the think-aloud protocol.
Despite testing multi-million dollar websites, the test subjects ran into more than 700 usability problems related to product lists, filtering and sorting. All of these issues have been analyzed and distilled into 93 concise guidelines on product list usability, 35 of which are specific to filtering availability, design and logic.
(View large version)
We subsequently benchmarked 50 major US e-commerce websites across these 93 guidelines to rank the websites and learn how major e-commerce websites design and implement their filtering and sorting features. This has led to a benchmark database with more than 4,500 benchmark data points on e-commerce product list design and performance, of which 1,750 are specific to the filtering experience. (You can view the websites’ rankings and implementations in the publicly available part of the product lists and filtering benchmark database).
In this article we’ll take a closer look at some of the research findings related to the users’ filtering experience. More specifically, we’ll delve into the following insights:
In this article we’ll walk through each of these seven filtering insights, showing you the usability test findings, examining the benchmark data and presenting best practice examples for creating a good e-commerce filtering experience.
When done right, filters enable users to see only the products that match their individual needs and interests, such as products of a particular type or style or with certain features or attributes. For example, a user might want to see all products in the “jackets” category for “men” (gender filter), for the “winter” season (thematic filter) and available in the color “black” and size “M” (variation filter). It’s the e-commerce equivalent of walking into a physical store and asking a salesperson for “a black, men’s, winter jacket in size medium.”
However, a prerequisite to these wonderful powers of filtering is having a vast range of filters available for the user to drill into the particular features and product aspects that are important to them and their particular interests. Most e-commerce websites already fall short here. However, a good filtering experience requires the necessarily filters not only to be present, but to be presented in a way that’s easy for the user to grasp and interact with and whose logic follows user expectations.
(View large version)
Benchmarking the 50 top-grossing US e-commerce websites across the 93 product list guidelines identified in the usability study revealed generally mediocre performance. Analyzing the 1,750 performance scores specific to filtering availability, filtering logic and filtering interfaces reveals that:
In sections 2, 3 and 4 in this article, we’ll walk through the test findings for three of the core filtering types that typically cause issues: category-specific filters, compatibility filters and thematic filters — because 60% of major e-commerce websites lack one or more of these.
During testing, the filtering logic and filtering user interface often led to a poor experience, even on websites that have invested resources in product tagging (i.e. filter availability). Users need to be able to locate and apply relevant filtering values and to make their desired filtering combinations in order to draw value from a website’s filters. Yet a notable 40% of test subjects were at some point during testing unable to find a website’s filtering options — despite actively looking for them. This is critical, considering that unnoticed filters are — to the user — effectively the same as nonexistent filters. In section 5 and 6, then, we’ll walk through two filtering design patterns that proved effective at solving some of these user interface issues.
Most of the time, users are interested in filtering a product list across category-specific attributes, and not just the website-wide attributes (such as brand, price, user ratings, etc.). An example would be filtering a list of cameras by camera-specific attributes, such as megapixels, zoom level and lens mount — attributes that aren’t particularly meaningful for other types of electronics, such as TVs.
For example, sleeping bags would need a temperature rating filter, while furniture would need a color filter, and hard drives a capacity filter, and so on. A massive 42% of top e-commerce websites lack such category-specific filtering types for several of their core product verticals.
A good rule of thumb is that any product specification that is important enough to be shown in a product list item should also be available as a filter. Moreover, by virtue of displaying the information in front of the user, the website is reminding the user that that specification is important (or, in the case of users new to the domain, teaching them that it is). The very display of the specification, then, encourages users to filter by it.
otice how Williams-Sonoma displays the capacity of its food processors (measured in cups) — reminding users that this is an important metric — but then offers no way to filter the food processors by capacity. (View large version)
Gilt states the material for most jacket types, but without a materials filter. Users who are interested in wool jackets would have to go through all 295 jackets. (View large version)Staples lists the printing speed of the majority of its printers but does not allow users to filter its 2409 printers by printing speed. (View large version)
During testing, when users encountered websites that lack basic category-specific filtering, they would give up because they realized they would have to manually locate the items they want by browsing a generic product list containing hundreds of items (for example, to find jackets made of wool, food processors with capacities greater than 14 cups, etc.). Users often took quite a while to fully grasp that a website doesn’t offer such filters, with most simply assuming that “It must be there somewhere,” and not believing that the website could neglect such basics — and being forced to look through hundreds of products.
When a product list is a set of search results, faceted search should present the user with the best-matching product-specific filters, without the user having to specify a category. We touched on our test findings and the topic of faceted search (and how only 40% of top websites offer this) in section 6 in “The Current State of E-Commerce Search.”
Always ensure that each category has a unique set of filters specific to the type of product. At a minimum, the product specifications included in the list items will need to be available as filters as well, but a wider array of filters will nearly always be needed.
Thematic browsing patterns are quite common in physical retail stores, where any sales assistant would be able to help visitors with common requests, such as “a casual shirt,” “a spring jacket,” “a high-end pocket camera” or “an LED TV with good value for the money.” However, this is no easy task on most e-commerce websites.
While TVs, cameras, jackets and shirts can all be easily located on most e-commerce websites, viewing products that match a certain “theme” can be nearly impossible. Despite such thematic attributes often being both common and central aspects of the user’s purchasing decision, our benchmarking revealed that 20% of top e-commerce websites still lack thematic filters (although support for it has grown to 66%, up from 48% since our last study and benchmarking of e-commerce search).
(View large version)
“I’m too impatient for this kind of thing. They would have lost me. If there were multiple pages, I would never have gotten through it,” one subject explained as he looked for a jacket for the spring season on Gilt. “Normally you can choose between winter jackets, spring jackets or the type of jacket.” He ended up abandoning the website.
(View large version)
“I’d look at these to see what the style is like. And then I’d think, ‘Ayhh, these are all ugly.’ So, I go up again, to see if I can sort a little [filter, ed.], by ‘style’ or something,” one subject explained while she looked for a way to filter by style. With only a “pillow type” filter available on Pottery Barn, she had few options to try and ended up applying a random pillow type to see where that would take her — hardly a reliable way for users to find relevant items on a website.
Macy’s offers a thematic “style” filter, which ended up being used by 60% of test subjects. Above, one subject is seen applying a “Coat Style: Casual” filter. (View large version)
Without thematic filtering options, viewing only the products of interest to them was often unreasonably time-consuming for users. This was especially the case when it came to actually selecting which item(s) to purchase, because the relevant products would be randomly scattered across a product list. During testing, a lack of thematic filters often led to website abandonment because the subjects prematurely concluded either that the store didn’t carry the type of product they wanted (for example, spring jackets) or, more often, that finding the few relevant items that might be hidden somewhere in a vast product list would be nearly impossible. On websites that do have thematic filters, the filters had very high usage rates, often above 50%.
The easiest way to technically implement thematic filters is by manually tagging products or groups of products. Typical examples of thematic types are style (casual, romantic, modern), season (spring, holiday), usage conditions (outdoors, underwater) and purchase-selection parameters (cheapest, value for money, high end). Some types are well suited to manual tagging (for example, style and season will often be both fast and accurate for a human to tag), whereas other filters require extensive domain knowledge to manually tag (for example, value for money).
Identify and offer key thematic filters unique to the website and product-type context. These will often need to be category-specific (see section 2). Common omissions are style, usage context and purchase-selection parameters.
Some products are compatibility-dependent — that is, a product’s relevance is determined entirely by its compatibility with another product that the user already owns or plans on buying. Typical compatibility-dependent products are accessories (for example, a case for a laptop that has to fit), products used in conjunction with other products (an audio system that needs to plug into a TV and media players), spare parts (a laptop adapter that needs to have a charger tip and power rating that matches the user’s laptop) and consumables (ink that has to fit an exact printer model).
Finding a spare adapter for a laptop or buying a camera and matching case might sound like trivial tasks, but it turned out to be extremely difficult for our test subjects, who had a completion rate of only 35%. This means that 65% had to give up or, worse, ended up purchasing a product that they believed was compatible but was in fact not.
(View large version)
“Oh my gosh, I wouldn’t do this — not on a website which is this difficult to navigate. I would go to a camera store with my camera and find a case that fits. I wouldn’t go about looking into all of these options,” one subject explained while trying to find a camera bag and realizing there was no way to narrow the list of 253 bags by size. The subject elaborated, “I’d need to go back and forth between this and the camera to compare the dimensions. And then it also has to look nice.”
No matter how enticing the price, how great the specifications, how perfect the customer reviews pronounce the product to be or how appealing the product’s design, the end user will not be interested if the product is incompatible. This could be a dealbreaker, regardless of the product’s other attributes. This makes compatibility filters one of the most important filtering types (for compatibility-dependent product types only, of course). Giving users access to a list of products that are compatible with the item they already own is vital, then.
Despite compatibility filters being a prerequisite for finding and purchasing compatible items, 32% of websites that sell compatibility-dependent products have no compatibility filters.
While most websites have a “brand” filter, tests showed that this is completely inadequate as the only type of compatibility filter. First, brands often have multiple series or products with different compatibility aspects. For example, all Lenovo adapters will not fit all Lenovo laptops; so, simply applying a filter for “Lenovo” would not give the user a list of all products compatible with their particular Lenovo laptop. Secondly, for several compatibility dependencies, third-party products are a major consideration. For example, a “manufacturer” or “brand” filter would not provide the user with a full list of matching sleeves for their MacBook laptop.
Any product category that contains compatibility-dependent products (accessories, integrated systems, spare parts, consumables, etc.) will need a compatibility filter. This will often be a filter that allows the user to specify their model name and number, but it could also be a filter for a more generic specification, such as for size, capacity or power.
(See sections 4 and 6 of “An E-Commerce Study: Guidelines for Better Navigation and Categories” for more on compatibility-dependent products, including a discussion of complete interlinking to compatible products on product pages.)
We tested three dominant patterns for displaying lists of 10+ filtering values:
All three methods caused severe usability issues. The first two performed the worst, while truncation proved to be the best performing of the three methods — but only as long as it was implemented with great attention to details of the user interface. Before diving into the details required to achieve a well-performing truncation design, let’s briefly present the core problems with the first two methods.
The problem observed with displaying all filtering values in one long list is that it makes it impossible for the user to get an overview of the different filtering types available.
Displaying all filtering values in one long list makes it difficult for users to get an overview of the other filtering types. Here, L.L. Bean is being viewed on a 900-pixel-tall display (minus the browser and OS chrome). (View large version)
During testing, users would see, for example, a brand filter with one to three screens of brand filtering values within — making it impossible to get an overview of the additional filter types offered below. The majority of test subjects completely overlooked the additional filter types below the long list of filtering values and were generally overwhelmed by the long filtering sidebar stretching two screens or more. On a positive note, our product list and filtering benchmark shows that only a small fraction (2%) of major e-commerce websites currently use this pattern.
Some lists of filtering values are given their own scrollable area (i.e. the area can be scrolled independent of the rest of the page), causing several interaction problems for the majority of test subjects, as well as conceptual challenges for a smaller group of subjects.
Inline scrollable areas, as seen here on Staples, caused multiple interaction problems for test subjects, both conceptual and interaction-wise. (View large version)
Implementing inline scrollable areas is far more common — 24% of major e-commerce websites use this pattern. It did not, however, turn out to perform any better, because it comes with a host of problems on its own. The most significant problems (which are also difficult to solve) are the following:
(If you want to further explore the problems of inline scrollable areas, we examine the findings in depth elsewhere.)
The last pattern we tested turned out to perform better than the other two. Truncation has the benefit of giving users an overview of the different filtering types. This is important because a lack of one often caused our subjects to make poor filtering selections simply because they were inclined to interact with the filtering values that were first in the very long list of filters. The other main benefit of truncation is that, when users find a filter type of interest, they also have the option of getting a full overview of filtering values within that type (by clicking the truncation link). Truncation, therefore, combines the benefits of the other two methods.
Truncated filtering values gives users an overview of both the filtering types available — as seen here on REI — and all available values within a type (when the truncation link is clicked). (View large version)
However, the superior performance of truncation was observed only when the risk of users overlooking the truncation link was actively addressed in the interface. In fact, on the tested websites where the truncation link wasn’t sufficiently distinct, it performed (at least) as poorly as the two other patterns, because some users assumed that the truncated list showed all available filtering values. Currently, benchmarking shows that only 6% of major e-commerce websites have a truncation link that is inadequately designed. While that’s not many, it would still be worthwhile to touch on some of the implementations of truncation that testing showed to be effective:
Northern Tool lists brand filters by popularity when the list is truncated (promoting the most recognizable values). When expanded, the values are listed alphabetically to give predictability. (View large version)
More test findings on proper truncation design are explored further in this article.
Truncate long lists of filtering values (10+), rather than displaying all values or using inline scrollable areas. To ensure that users notice the truncation, display up to 10 values before triggering the truncation, display default values that users are most likely to recognize (i.e. the most popular), and style the truncation link to set it apart from the filtering values.
Some categories have certain filters that are highly important and beneficial for the user to consider. However, displaying these merely as traditional filters in a filtering sidebar runs the risk of users either overlooking these options or not understanding the importance of making a selection.
Generally, during testing of e-commerce websites, we observed that users view categories as something the website suggests they select, whereas the traditional filtering sidebar options are perceived by most users as being purely optional. Following the principles of persuasive design, most websites, therefore, have a number of categories that need to promote certain filters or filter combinations. Luckily, a clear pattern emerged during testing for how websites can effectively promote a single set of highly important filters — although implementation requires a number of filtering design details to be in place.
When test subjects searched Amazon, certain scopes would have highly relevant filters promoted atop the product list. This promotion nudged the test subjects towards more informed filtering decisions, instead of browsing overly broad product lists. Besides being promoted atop the product list, the filter values are kept intact in the filtering sidebar (an important detail). (View large version)
For example, if a user navigates to a “movies” category, a highly important filter type to consider would be “format,” with filtering values such as “DVD,” “Bluray” and “digital download” as the types that would be important to most users’ process of selecting a product.
Another example would be a “digital cameras” category, where “camera type” would be a highly important filter to consider, with filtering values such as “point and shoot,” “DSLR,” “mirrorless” and “bridge.”
Promoting a limited and select number of filtering values makes sense only if the vast majority of users either have an interest in or would benefit significantly from applying them. Because a promoted filter encourages users to apply it, use the technique intelligently and sparingly, and avoid luring users into overly narrow filtered lists. For example, don’t simply use the technique website-wide for whatever is the most popular filter in each category. In practice, you will often need to manually curate those categories that have a structure that warrant the use of promoted filters.
Walmart takes the technique one step further and promotes a mix of laptop-size and input-type filters that align well with key purchasing parameters for users looking to buy a laptop. (View large version)
Promoted filters don’t necessarily all need to be of the same type. They could simply be a combination of the most important product filters that users can apply before spending further time investigating the actual product list. Indeed, promoted filters could even apply multiple filters at once to provide the user with a shortcut to popular filter combinations.
Two additional implementation details to consider:
For select categories where an initial filtering selection would be relevant and would benefit the vast majority of users, consider promoting those few filtering values above the product list (for example, using buttons, text links or thumbnails).
If we look at filtering performance within the major e-commerce industries, we see that performance varies greatly. Below, the seven most dominant e-commerce industries have been plotted as stacked bar charts. The row “acceptable performance” is for reference and depicts the threshold for an “acceptable” (but not good) filtering performance — a minimum based on the typical issues that test subjects encountered. Note that the performance difference takes the industry into account; for example, an apparel website needs fewer filters than an electronics website due to the type of products it carries and, therefore, needs a less advanced design for its filters to achieve a higher score.
(View large version)
Despite having the lowest barrier to provide a good filtering experience, apparel websites notably have the worst performance of all industries for filtering, due to an unfortunate combination of inadequate filtering options and poor filtering interfaces. The subpar filtering interfaces are likely due to a deliberate prioritization of aesthetics over a clear and informative interface (a case of false simplicity). Despite dealing with a product type that requires only a limited number of filtering types (compared to other industries), many apparel websites lack even basic filtering options, such as for product material and user ratings.
Sports and hobby websites suffer from poor filtering performance as well. While part of the reason is a prioritization of simple website aesthetics, similar to the apparel industry, another cause may be the mix of visual- and spec-driven product verticals in the industry. Many products on these websites tend to be fairly visual (toys, outdoor goods, sports equipment, hobby equipment), yet many also have two to three technical attributes that could completely invalidate themselves if they don’t match the user’s criteria, such as performance, weight and age. Consequently, users will have more complex filtering needs for sports and hobby products than they typically do for regular apparel websites.
The electronics and office industry has historically been one of those e-commerce industries that offer users a broad variety of filters, simply because finding many products would otherwise be nearly impossible for users. When looking closer at the lacklustre filtering performance in electronics and office, the problem is often poor filtering logic and interfaces. Particularly common flaws include the following: allowing only one filtering value to be selected at a time, no user-defined ranges for numeric filters, and a lack of explanation of industry jargon. Despite a generally high number of filter types being offered on several electronics and office websites, the products’ technical nature — several attributes of which are vital to the user’s purchasing decision — still result in a lack of compatibility filters (see section 4 of this article) and a lack of category-specific filtering types (see section 2).
Home and hardware websites offer decent filtering performance. This aligns well with the technical nature of the industry, and the score can be explained by a historical focus on offering sufficient filters (in particular, compatibility filters), which enables users to find the particular washing machine or cordless drill that meets their specific criteria. However, poor product data and a widespread lack of structured product specifications hold back filtering performance.
Health and beauty websites have decent filtering performance as well. In fairness, health and beauty products have fewer key product attributes (quantity being an exception), which means the websites can get away with much simpler filters than ones with highly spec-driven products. E-commerce websites in other industries, therefore, should not model their filtering experience on health and beauty websites because their filtering needs are likely different.
Mass merchants have vast and diverse product catalogs that have strict requirements for product data structures, processing and categorization — all things that can be incredibly difficult to get right. Combine that with a mixed catalog of highly spec-driven and visual product types, and mass merchants have the most complex filtering needs. Yet, it is clear that most mass merchants are aware of these challenges and have made very active efforts to resolve them, often through advanced filtering logic and data post-processing. This leads to a broad variety of filters being offered (including category-specific ones), which is one of the main reasons mass merchant websites achieve the best filtering performance — even taking their users’ more complex filtering requirements into account.
Overall, the filtering performance of the websites we benchmarked is passable at best. When it comes to filtering, the majority of even the top e-commerce websites come up short compared to physical retail, where a customer request such as “a light casual spring jacket in size medium” or “a rugged case for this digital camera” isn’t out of the ordinary.
Some websites do actively focus on filtering and spend resources on product tagging. For those websites, many of the lingering filter-related usability issues have to do with aligning user expectations and website implementation (specifically, filtering design and logic). Filtering thus represents an opportunity to vastly improve the return on investment that most large e-commerce vendors have already made in product tagging and data collection.
Filtering on e-commerce websites is a major topic that obviously cannot be fully explored in a single article. However, the filtering insights covered in this article hopefully lay the foundation for understanding the current state of e-commerce filtering and for creating a good filtering experience: