设计完美的功能对照表

不过，功能比较表不仅在它们的主要功能上很有帮助。 如果设计得当，它们可以帮助做出决策，而不仅仅是将产品规格并排放置。 他们还可以为原本过于技术性的产品规格表增加意义，解释为什么某个功能与客户相关，或者某个产品如何比其他产品更好。

在仔细检查了手风琴、时间和日期选择器和滑块之后，在本文中，我们将研究构成完美、易于访问和有用的功能比较表的所有细节。 请注意，本文不一定是关于定价计划，也不是关于数据可视化方法。 相反，它专门针对客户想要确认他们的购买选择或无法在多个预选项目之一之间进行选择的情况。

在深入设计决策之前，我们需要正确理解用户的目标、意图和行为模式。

什么时候功能比较有用？

在观察一些电子商务项目中的客户时，我发现比较功能对许多客户来说似乎是多么无关紧要，这很有启发性。 用户经常会说它使界面混乱，并且他们从不使用该功能。 原因很简单：虽然我们倾向于经常购买小而低价的物品，但我们往往不那么频繁地购买大件的高价物品。 事实上，我们真正需要进行特征比较的情况并不多。

没有多少顾客会考虑比较几本书或几双袜子。 然而，相对较少的客户会在没有彻底探索他们的选择的情况下购买咖啡机或冰箱。 特征比较对于“小”购买确实无关紧要，但对于“大”购买变得很重要。 事实上，当客户一心想要大额购买，但又无法选择购买哪种产品时，他们很可能最终完全不购买，陷入选择麻痹状态。 作为零售商，我们显然希望避免这些死锁情况，这就是特征比较元素非常有用的地方，它可以简化决策过程并过滤掉不符合相关标准的商品。

后者可以应用于非常不同的环境：我们可以比较位置、场地、眼镜、汽车、行李、手表、电视机甚至化学品。 但是，在本文的范围内，我们将专注于电子商务零售商之间非常具体的功能比较。 我们将在这里学到的课程可以应用于任何类型的比较环境，尽管细节可能会有所不同。

不管怎样，最终，这一切都归结为客户将要进行什么样的购买。 正如 Joe Leech 在他关于购买决策的精彩网络研讨会中所说的那样，在网上购物时，用户会考虑“未考虑”或“考虑”购买。

未考虑的购买

未考虑的购买是我们在需要快速解决方案或跑腿时倾向于进行的快速、省力的购买。 每当我们需要一包电池、普通文具、“足够好”的烘干机或快速的周末度假时，我们实际上正在做的就是从我们的待办事项清单上勾选一个框并继续前进。 很少有人会对选择电池或铅笔感到兴奋，因此我们不太可能为了购买完美的包装而多次浏览不同的网站。 相反，我们倾向于快速购买此类商品，通常是在旅途中，略读供应商评论并根据价格、运输速度和便利性进行购物。

考虑购买

另一方面，考虑购买是缓慢、费力的购买，需要时间和考虑的购买。 当我们购买自行车、手表、冰箱或健康保险时，我们会彻底探索我们的选择，确保我们最终不会得到不够好或不合适或需要更换的东西很快。 在这种情况下，我们往往会在很长一段时间内不断探索可能的购买，经常浏览许多不同的零售商，比较价格，阅读评论和检查图片。 我们甚至可能会询问我们的朋友、同事和亲人的意见。 最终，最终决定是基于预期的质量和服务，而不是便利性和速度，并且不一定仅受价格点的影响。

当然，一件物品越贵，就越需要考虑。 但经过深思熟虑的购买不一定很昂贵：任何具有特定属性的物品，例如寿命、速度或质量，也必须彻底考虑。 这包括礼物、鲜花、葡萄酒和烈酒、衣服、抵押贷款和健康保险。 原因很明显：很难对一包电池感到非常失望，但一件不舒服的礼物，或者错误的鲜花传递了错误的信息，甚至是一件不得不退回的不合身的衬衫，都可能是一件非常令人失望的事情。令人沮丧的经历。

没有多少人事先确切地知道他们想要或需要什么，除非他们得到值得信赖的推荐。 因此，每一次深思熟虑的购买都需要大量的思考和考虑，比较不同的选择并筛选出完美的选择。 问题是比较在网络上并不是一个特别有趣的活动。 经常缺少细节，价格不透明（您多久将商品添加到购物车并通过整个结帐直到付款，才看到真正的最终价格？）和型号（例如电器）是不一致。

这就是精心设计的功能比较可以增加销售额并提高用户满意度的地方。 如果我们设法在犹豫不决的时刻（在他们离开网站或开始四处寻找之前）找到优柔寡断的客户，并巧妙地引导他们做出正确的决定，那么我们正在努力提供更好的客户体验，同时也占更大的利润和更忠诚的业务客户群。 毕竟，客户在购买（通常）昂贵的商品时不必在其他网站上货比三家。 这可能会在未来几年为业务带来成果。

在这一点上，特征比较主要与考虑购买相关，这可能不是什么大启示。 它们在产品相对复杂的情况下特别有用——可能包括可能令人困惑或模棱两可的细节。 数码相机和电视就是很好的例子——为了对选择进行明智的比较，通常需要了解这些设备的技术能力。 另一个例子是假期或商务旅行——任何需要许多小决定的事情，例如可用性、定价、方便的出发和到达时间、预算以及事先对活动的全面规划。

究竟是什么让比较与客户相关？ 好吧，如果它可以帮助用户做出明智的选择，那么它就是相关的。 可以设计一个特征比较来推动更多的客户转向“高利润”的利润销售，但如果他们不合适或者如果客户觉得他们支付了过高的价格，那么零售商将不得不处理大量的从长远来看，退货或用户完全放弃它们。

当我们观察和采访用户以了解特征比较与他们的相关性时，我们发现它基本上归结为一件事：看到选项之间的差异，或者快速过滤掉不必要的细节，使差异变得更加明显. 不幸的是（并且令人惊讶），许多功能比较并不是特别擅长于此。

特征比较的基石

如果我们想比较两个或多个项目以找到更合适的，那么最明显的方法是什么？ 对于衣服，我们会试穿并挑选感觉合适的那一件。 但是，如果试穿不是一种选择呢？ 在线购买产品时，我们可以依靠我们过去的经验、评级、专家评论、客户评论和值得信赖的建议，将选择范围缩小到几个候选人。

尽管如此，在某些时候，您可能会留下一些过于相似的物品——也许一件太贵了，另一件缺少重要的品质，第三件是朋友的朋友推荐的。 所以你会怎么做？ 你列出所有选项，并排检查它们的属性，并消除选项，直到你有一个赢家。 （好吧，至少大多数人都这样做。）

转换为常见的界面模式，这自然需要有助于快速扫描选项的结构化布局——可能是一个很好的比较表，其中包含产品的列和属性的行。 一旦用户选择了产品并提示了比较视图，我们就可以从所有选择的产品中提取所有属性并将它们列为表中的行。 应该很容易吧？ 是的，但这不一定是进行有意义比较的最佳方法。

并非所有属性都是平等的

理想情况下，我们希望只显示客户关心的有意义的、可比较的属性。 与其提取和排列所有产品规格，我们可以确定并突出显示所有相关产品属性，同时保持所有其他属性可访问。 这要求我们 (1) 找出用户感兴趣的内容，以及 (2) 拥有关于我们产品的一致、结构良好的数据。

虽然第一个要求只是在 UI 中正确地构建问题，但第二个要求是一个难以破解的难题。 在实践中，拥有结构良好的元数据通常非常困难，这不是因为技术或设计限制，而是因为内容限制。

除非零售商使用专门的、积极维护的系统来收集、组织和清理其库存中所有产品的元数据，否则会得到结构良好、完整和一致的属性细节——至少关于仅属于同一类别的产品——结果成为一项重大事业。 您当然可以管理相对较小的服装店的元数据，但如果您作为零售商依赖来自第三方供应商的规格，那么有意义的比较将需要相当大的努力。

休斯顿，我们有一个（内容）问题

这就提出了一个问题：如果其中一个缺少关键属性，您将如何显示两个数码相机的比较表？ 在这种情况下，将无法进行有意义的比较，从而使客户也无法做出明智的决定。 面对这种情况，与其盲目地选择其中一个选项，大多数客户会完全放弃购买，因为对购买错误产品的担忧完全超过了对产品的渴望。

康拉德在一个表格中列出了所有产品，每隔一行以背景颜色交替显示。 与许多其他零售店一样，元数据通常不完整且不一致，使用户一无所知。 在上面的示例中，三个比较产品中的两个没有提供 HDMI 输入的数量、重量、亮点和播放器尺寸。

当项目难以比较时也会发生同样的情况——例如，当许多属性的结构良好的数据旁边出现嘈杂的格式错误的数据时。 投入足够的时间也许可以发现产品之间的差异，但这需要太多的工作。 在可用性会话中，当客户提示比较视图并扫描行一两秒钟，然后在几秒钟后放弃页面时，您可以看到这种模式本身。 而且，一旦他们在网站上有过这种体验，他们会普遍认为网站上的特征比较是“坏掉的”，并在以后的会话中完全忽略它。

那么，如果某些信息丢失、不完整或不一致，我们该怎么办？ 与其按原样显示比较表，不如通知用户由于缺少有关特定产品的某些数据而无法进行比较，然后将他们引导到相关页面（可能是比较产品的独立评论）或问他们有关与他们相关的属性的问题，并建议“最佳”选项。

这些属性不是世界末日

按属性进行比较很重要，但仅从规格表中提取和重组数据对于不那么精明的客户可能并不是特别有用。 事实上，用用户觉得更容易理解的数据来扩展甚至替换某些属性可能会有所帮助——例如，用用户日常生活中的实际示例替换技术术语？ 还是提取产品的优缺点？

正如 Nielsen Norman Group 所指出的，在亚马逊上，技术细节并未按原样显示。 相反，比较表将技术属性翻译成普通消费者可以理解的语言。 界面文案很重要：这适用于属性以及按钮、标签和缩略图上的措辞。

对于每两个比较项目，Imaging Resource 会在列表中提取产品的优缺点，以及各自的优缺点。 这可能不是比较属性的最快方法，但默认情况下它很好地区分了质量，突出突出了选项之间的关键差异。 该网站还提供评论摘录并建议其他相关比较。

Versus 更进一步，在条形图中突出显示所选产品的平均功能与其他产品的比较。 不仅将所有属性显示为表格，它们还显示在列表视图中，并带有每个属性的详细说明。 更好的是，该网站通过突出显示该类别中最佳产品的表现如何，将每个属性置于上下文中。 额外的好处是，如果社区成员发现每一个属性都相关，他们可以投票赞成。 这比表中的单个属性值对客户更有帮助。

Cool Blue 有一个很好的功能比较：一切都刚刚好。 它不仅默认突出显示相似和不同的功能，还突出了每个产品的优缺点以及每个功能的优缺点。 该界面还细化了特定功能组和客户评论的评级。

Flipkart 在大多数类别页面和大多数产品页面上提供特征比较，并从评论中提取优点、缺点和亮点。 这使得功能比较变得更加相关，并且可能更容易做出购买决定。

通常情况下，单独的详细规格表可能不足以进行有意义的比较。 使用更多细节扩展比较，例如相关评论、有用的改写以及直接比较的优缺点，可以大大帮助客户做出艰难的决定。

通过分组属性清理混乱

上述所有选项都提供了快速、可扫描的优缺点视图，但根据产品的复杂性，您最终可能会在列表中排列出 70 到 80 个属性。 遍历所有这些以找到客户最关心的那些需要相当多的工作。

提高属性可扫描性的一种方法是将属性分组到部分中，然后在单击或点击时显示和折叠它们。 这就是手风琴指南发挥作用的地方：在太多的界面中，只有图标充当切换； 当然，整个栏应该打开或折叠属性组。 此外，自动完成搜索框或过滤器可以让客户跳转到部分或选择和取消选择类别进行比较。

家得宝不只是列出所有属性，而是将它们分组为“尺寸”、“详细信息”和“保修/认证”。 它还突出了产品之间的差异，并具有精美的打印视图（可通过一个小打印图标访问 - 让我们看看您是否能找到它！）。

Sharp 允许客户从列表中选择感兴趣的类别，甚至可以使用自动建议快速跳转到特定类别。 右侧的复选框也允许用户突出显示差异 - 尽管突出显示并不总是在视觉上清晰。

为了进行功能比较，德国零售商店 Otto 不仅将所有属性分组，而且将每个组变成可折叠和可扩展的部分。 某些部分还包含有关属性的详细信息，通过点击或单击提供。

Garmin 走得更远。 它不仅仅是在页面顶部显示下拉菜单，而是在用户滚动页面时将其浮动在产品旁边。 这稍微好一点。

Rtings.com 为整个表格扩展了一个带有过滤功能的下拉列表。 如果客户对特定的一组属性感兴趣，他们可以选择他们感兴趣的确切值。 这是特征比较表通常不提供的粒度级别，对于冗长的比较视图特别有用。

最终，带有属性部分选择的浮动下拉列表足以进行任何比较。 一般来说，稍微更好的属性组织将帮助用户导航到兴趣点，但能够轻松地看到这些兴趣点内的差异或相似之处也将很有用。

突出差异或相似之处......或两者兼而有之？

因为能够轻松看到差异是比较的中心目的之一，所以考虑添加一个切换按钮（如上面 Sharp 的示例）以允许用户在仅查看差异、仅查看相似性和查看所有可用属性之间切换是有意义的.

事实上，当用户访问比较表并注意到“显示差异”按钮时，他们通常会先向下滚动查看整个表的比较耗时，然后才返回到那个闪亮的按钮，按下它并探索更新的视图。

事实上，该功能似乎被大量使用，原因是可以理解的：看到差异正是客户实际上首先提示比较视图的原因。 这意味着突出差异的选项应该非常突出。 但是你将如何设计它，你会包括哪些选项，以及交互会是什么样子？

例如，在 MediaMarkt 上，客户可以选择查看所有属性或仅查看产品不同的属性。 “仅显示差异”按钮位于产品缩略图旁边的左上角。 让它更靠近桌子可能会使它更难被忽视。 这家德国零售店对产品行使用备用背景颜色，但对标题不使用。 许多产品有 10 到 15 组属性，每组属性都可以显示和折叠。 此外，每个产品都有完整规格表的链接。

突出显示差异的问题在于，只要一行中的一个表格单元格中的一个字符略有不同就足够了，并且整行不会消失——即使所有其他列具有相同、相同的值。 然而，与其仅仅按原样显示行，实际突出显示差异会更有用——也许将所有“相同”的单元格折叠成一个单元格并突出显示一个不同的单元格。

然后问题来了：一旦选择了“显示差异”，相同的属性应该完全消失，还是应该留在表格中，只突出显示不同的属性？ 这可能是个人喜好问题。 如果有 60–80 个属性要比较，我们可能会删除相似的行以便于扫描。 如果表较小，则可能不需要删除行。

例如，伊莱克斯在左上角包含一个按钮，用作切换开关。 状态用可以打开或关闭的复选标记指示。 具有相同数据的行不会从表中删除 - 相反，差异以浅蓝色背景突出显示。

BestBuy 包含很多精确的数字数据，例如身高“69.88 英寸”和“69.9 英寸”。 由于差异如此之小，大多数行将永远不会被省略，从而使比较更加困难。

只看到差异是有用的，但用户也会从只看到相似处受益吗？ 事实上，提供这个选项并不是很常见，但它有一些很好的用例。 事实证明，一个重要的场景是当所选产品有太多差异而无法轻松浏览时。

这是一个例子。 假设客户选择了四款数码相机进行比较，每款产品都有 60-80 个属性。 在开始通过数十种属性的漫长旅程之前，一些客户会尝试根据“简单”标准排除选项，例如价格或发布日期、“太弱”或“太贵”或“不是最新”质量. 显然，在删除这些项目的同时，他们会希望确保他们没有删除错误的项目。 在这种特殊情况下，看到相似之处可以让用户确认他们“仍在”关注“值得比较”或“值得投入时间”的产品。

发生这种情况的主要用例是当客户比较几个强大、相似的候选人时。 它们可能在十几个属性中有所不同，但所有 80 个属性的列表太长，无法轻松比较。 通过选择仅查看相似之处或仅查看不同之处，客户可以将复杂性分解为两部分。 在这种情况下，您会注意到客户倾向于首先处理“更简单”的任务：他们会首先研究相似之处（只是为了确保所有选项都是“可靠的”），然后专门研究差异。

您可能想知道是否有必要提供所有属性的概述？ 毕竟，客户会检查相同点和不同点。 答案是“是的”。 客户不想错过重要的细节，因为他们想确定所有可用的属性，他们也会寻找和检查“所有属性”选项，在会话期间至少扫描一次。

在设计方面，一个明显的解决方案是使用一组相互排斥的按钮，或者只使用一个按钮或链接来改变内容并基本上起到切换的作用。

三星不仅允许客户查看所有属性、仅相似之处和唯一差异，还可以选择哪些属性是相关的并仅通过它们进行比较，而删除其他所有内容。 所有属性都分组到手风琴中，所有属性都可以一键展开或折叠。

LG 的界面与三星的类似，但“比较”链接有点太小了，而且由于始终可以点击不同的视图，因此并不总是清楚您在看什么。 此外，我还没有弄清楚比较视图中产品缩略图上方的“锁定”项目是什么意思——它可能意味着首先显示项目。

在实践中，当遇到切换视图的功能时，客户往往会在所有可用选项之间切换很多。 看到差异和所有属性最重要，但能够看到所有相似之处虽然不是必需的，但可能是重申和支持。

颜色编码以便于比较

为了突出差异，我们可以删除相似或相同的行，但我们也可以使用颜色编码来指示比较项目的不同之处，以及哪些表现更好。 一个明显的方法是在表格单元格上使用某种颜色或图案。 例如，Zipso 为每个选定属性的每一行的片段着色。 While it's helpful for a few attributes, when many of them are selected, the presentation quickly becomes too difficult to compare.

Prisjakt 默认使用表格单元格的颜色编码来突出显示差异。 此外，客户可以通过点击或点击相关行来突出显示相关行（尽管在点击时，差异在视觉上不再明显）。 每个比较也有一个唯一的、可共享的 URL。

ProductChart 使用背景条来指示哪些候选人在某个属性上表现更好。 条形的长度表示其中一个选项的性能有多好。 稍微突出显示获胜者，或提供总分并建议获胜者，在这里可能会有所帮助。

数码相机数据库用填充的彩色矩形显示产品之间的差异，以指示差异的大小。 这对于高度技术性和详细的比较很有用，但对于每种功能比较不一定如此。

如果您的特征比较表可能包含大量数字数据，则在点击或单击时突出显示行和列可能很有用，以便用户始终知道他们正在查看正确的数据点。

颜色编码是一种突出差异的简单方法，但我们还需要提供一种可访问的替代方案，也许在表格上方的摘要中详细说明产品之间的差异。

永远不会消失的东西：浮动标题

你以前可能遇到过这种情况。 如果您要比较三个标签模糊的产品，其中要比较的属性超过 50 个，您可能很难准确记住一列代表的产品。 要仔细检查，您需要一直向上滚动到标题，然后一直向下滚动以继续探索属性。

使映射不那么紧张的一种明显方法是使用粘性列标题，在客户向下滚动比较表时跟随他们。 我们不一定需要在标题中保留所有详细信息，但提供产品型号的名称、评级和小缩略图可能就足够了。

当用户比较产品时，索尼会在比较表上方浮动产品标签和缩略图。 这为客户提供了属性和产品之间非常清晰的映射。 比较一下，快速查看标题就足够了——不需要额外的滚动！

Indesit 以稍微不同的方式解决了同样的问题。 该界面将缩略图保留在屏幕底部的浮动栏中，而不是顶部。 添加项目时，它们会显示在底部的栏中。 要添加项目，用户需要点击产品右上角的比较图标——这可能不容易识别。 Ah, also the entire “Compare models” bar should act as a toggle — in the implementation, only the chevron icon triggers expansion and collapsing.

So, if a floating bar is in use, should it float above or below the table — or does it even matter? Keeping headings above the content seems slightly more natural, especially when the thumb is hovering over the contents of the comparison view on narrow screens. Users need to be more careful when scrolling the page on narrow screens — which is why the bar in the Indesit example disappears entirely on mobile. Keeping the bar above the table just seems a bit more reliable.

Obviously, it's going to be very difficult to display all selected products as columns at all times. A table view works well if you have two to three products to compare, but probably not so well if there are five products in the table. In that case, a common way to conduct the comparison would be by sliding horizontally.

Growing And Shrinking Those Tables

No conversation about tables can omit a close look into their responsive behavior across screens. A discussion of tables deserves a separate post, but there are a few common tricks to keep a table meaningful on narrow screens. Quite often, each table row will become a collapsed card, or headings will jump all over the place, or the table will be restructured to expose the data better, or the user can select which columns they want to see.

问题解决了？ 没那么快。 The feature comparison table is a beast of a special kind. The main purpose of the element is comparison: Keeping both attribute headings and product headings visible is important — after all, the customer wants to see the products they are comparing and the features they are comparing against. This means that for easy comparison on narrow screens, we need to float product headings, while keeping the attribute column locked as the user scrolls down the page. That doesn't leave us with a lot of space to display actual product details.

Sadly, almost every other retail website makes feature comparison unavailable on narrow screens. Selected products will often disappear altogether, the comparison feature will be hidden, and loading a shared comparison link will appear to broken. In fact, it proved to be quite a challenge to find even a handful of examples out there.

Some interfaces try to make the best of what they have. Crutchfield's interface, for example, is responsive, but that doesn't mean it's useful. On narrow views, items are displayed in a 2 × 2 grid, and so are product attributes. Because there is no visual relation to the actual product, it makes it very difficult to compare features.

ProductReportCard displays products in sets of three at a time. The attributes of each products are squeezed into a 33% column on narrow screens, making reading quite tiring, and comparison quite difficult.

Urban Ladder allows its customers to shortlist and compare items in the product grid. Once the user hits the “Compare” button, they're presnted with a quick overview of similar products which are auto-suggested. On narrow screens, users can compare only two items at a time.

One way to manage this problem would be to avoid a table view altogether. Instead, we could highlight similarities and differences in a list by default , allowing customers to switch between these views.

Alternatively, we could ask the user to choose the attributes that they care about most, and once the input is done, we could highlight relevant features, and perhaps even pull some data from reviews, displaying both of them in a list. Every relevant attribute row could become an expanded card, while all less relevant attributes could be displayed as collapsed cards below.

As always, limited space requires a more focused view and since differences are usually what matter the most, highlighting them and removing everything else seems quite reasonable.

Admittedly, with all of these options, we are losing the big-picture view that a table can provide. If you'd like to keep a table, usually you'll have at most one column to fill in with actual content — as another column has to be reserved for attribute headings. To make it work, you could provide a stepper navigation between products, so that the user is able to switch between products predictably. In the same way, sometimes floating arrows are used left and right, similar to a slider.

OBI 允许客户添加任意​​数量的产品进行比较。 在比较视图中，表格中产品之间的导航通过左上角的步进器进行。 不幸的是，功能比较不适用于狭窄的视图。

或者，您还可以在顶部使用分段控件或多组合选择器扩展表格，允许用户从产品比较列表中选择两个或多个产品 - 并将它们并排显示。 使用两种产品，用户最终会得到一个可读性强、响应迅速的比较表，并且选择更多的项目，他们会得到一个可滚动的区域或差异和相似之处的摘要。 然后用户可以选择他们希望看到的内容。

那该选什么呢？ 如果功能比较表主要包含数字数据，那么预先解释产品的差异可能更容易。 如果不是这种情况，或者表格的内容不可预测，那么带有stepper navigation的选项或多组合选择器可能会很好用。 如果产品很复杂，属性描述会很多且冗长，那么提取相关数据并突出显示它，而不是让用户经历几十个属性的旅程，可能是一个更好的选择。

在谈论组件的响应行为时，我们倾向于关注“常规”和“窄”屏幕，但我们也可以探索“宽”屏幕的调整。 如果我们确实有足够的空间在宽屏幕上突出显示功能比较，为什么不充分利用它呢？ 例如，当用户浏览类别页面时，我们可以将功能比较显示为右侧的浮动窗格，而左侧区域可以专用于该类别中突出显示的产品。 当客户添加一个项目进行比较时，它可能会立即出现在并排比较中。 在他关于“响应式升级”的文章中，Christian Holst 提到了许多适用于大屏幕电子商务用户体验的技术。 它们也与特征比较非常相关。

移动东西直到它们粘住

在比较表出现之前究竟发生了什么？ 客户可能会登陆一个类别页面，选择一些要比较的项目，然后发现一个提示比较的按钮。 此时，客户可能（或可能不）知道有关某些选定项目的详细信息。 同样，比较的选择顺序可能（也可能不是）是随机的。 在显示比较结果时，一个安全的选择是按选择顺序显示列，因为任何不同的顺序都可能导致混淆。

当他们处于比较过程中时，客户将（希望）开始更清楚地看到事物，过滤掉那些明显优于选定竞争对手的产品。 为了清除比较视图，我们将允许客户从比较中删除产品，当然，通常在列（或浮动标题）的右上角用“x”表示。

事实证明，有时用户会很快忽略其中一个选项，例如因为它无论如何都太贵了，但他们希望将该选项保留在比较视图中以供参考 - 只是为了将其他候选人放在上下文中。 该“参考”选项最终可能会卡在表格中间，妨碍两个或更多“真实”候选人之间的比较。

显然，这些选项的最佳安排是首先并排显示主要候选，然后是“参考”候选。 事实上，您甚至可以允许客户降级或否决一些候选人，并将他们推到一边，以不太突出的灰色显示。

一个稍微更健壮的选项是允许用户随意拖动列。 一开始，当客户在列表中添加了相当多的项目时，这将有所帮助，但随后，例如，意识到价格差异太大，因此想要重新排列产品。 对于“参考”候选人，这也将有所帮助。 事实上，在采访中，用户有时会将产品栏与卡片、小册子或便签进行比较，以便他们可以四处移动，将重要的内容与不太重要的内容进行分组。 功能比较表中相同体验的数字等价物将是可拖动的列。

例如，在 Digital Photography Review 中，用户可以左右移动所选项目。 这是拖放的一个很好的可访问替代方案。

SocialCompare 的本质要求用户能够随意拖动列和行。 但是，像卡片一样移动列可能对零售网站的客户也有帮助。

重要的是要注意拖放（显然）不可访问，因此屏幕阅读器用户需要能够访问列标题中的导航。 例如，在这种情况下，您可以将select下拉菜单或一组单选按钮作为后备。

但是，如果在详细比较之后，客户对比较视图中呈现的所有选项都不满意怎么办？ 除了能够从列表中删除项目之外，能够将相关项目添加到比较视图中也很重要——“相关”在这里很重要。 在大多数情况下，“添加”按钮只会将客户返回到类别页面，在那里他们会被要求添加更多项目以进行比较。 相反，我们可以建议可能符合要求的产品，也许通过显示与所选项目相似的产品。

在 Car Showroom 上，客户可以通过键入模型参考并使用自动建议来添加新项目。 另请注意，该界面在比较中提供导航——方便快速跳转到相关功能。

第二意见很重要，可共享的 URL 也很重要

因为特征比较主要与需要时间的购买相关，所以购买越重要，客户就越有可能在很长一段时间内探索购买商品的想法。 我们通过观察购物者注意到的一件事是，他们会时不时地在有疑问的时候截取比较表的屏幕截图（或一系列屏幕截图），并将其存储“以供将来参考”，直到他们已经做出决定。 好吧，这不是全部事实，因为存储该屏幕截图的主要原因之一是将其发送给对技术细节有更好理解的朋友和同事，并征求他们的第二意见。

事实上，对许多人来说，第二意见很重要——即使是来自对产品所属类别不太了解的密友。 那个珍贵的截图最终会在 Facebook 聊天和 Skype 聊天、电子邮件附件和 WhatsApp 群组中徘徊。 如果您的数据告诉您，您的许多客户在购买商品之前需要第二意见（电子产品或电器肯定会是这种情况），则可以“保存比较以备后用或分享”，并通过友好和鼓励复制。 这意味着每个比较都应该有一个唯一的 URL，包含所有或选定的属性、展开和折叠的属性组以及产品的顺序。

不要失去那个选择

众所周知，许多客户滥用他们的购物车或愿望清单来保持他们下次访问网站时选择的产品完好无损（通常是在之后不久）。 同样，将比较表持久存储（可能在 localStorage 或 Service Worker 中）一段时间是一个好主意。 事实上，如果比较产品在意外关闭标签后消失，没有客户会感到高兴。

最终，一旦用户在几天（或几周）后访问该页面，您可以打开一个小消息栏，说明他们最近查看的项目和比较的项目仍然可用，并可以选择“关闭”它。 如果用户选择探索该比较，他们可以从消息栏中进行。 如果他们浏览一个类别并选择其他产品进行比较，显然比较视图应该被新选择的产品覆盖。

那些微小的交互细节

与功能比较表的交互可能看起来很不言自明，但在用户看到比较之前必须做出许多微小的决定。

在哪里可以进行比较？

一方面，显然必须以某种方式指示、推广或展示比较功能——但具体在哪里？ 有很多选择。 它可以出现在主页、类别列表或产品页面上。 它也可以在购物车页面或搜索结果页面上找到。 在大多数电子商务网站上，比较选项仅在类别页面上可见，这通常是为了不分散客户对购买渠道的注意力。 但是，它总是最好的解决方案吗？

好吧，我们应该首先问自己，客户什么时候想首先比较商品？ 一个常见的用例是当他们正在查看类似的选项但无法决定选择哪一个时。 这通常不是主页（太早）或购物车页面（太晚）的情况，但绝对是类别页面和（通常）产品页面上的情况。

最重要的是，在观察客户浏览类别页面时，可以发现一种有趣的行为模式。 在探索购买选项时，大量用户会在单独的选项卡中打开每个潜在的候选产品，并首先对每个候选产品进行彻底检查，只有当候选产品明显不够好时才关闭选项卡。 现在，这些客户可能会找到一个强有力的候选人并直接结账，或者（更常见的是）他们可能倾向于几个选项。

在后一种情况下，能够在产品页面上添加用于比较的项目显然可以节省产品页面和类别页面之间那些烦人的往返。 但是，我们不仅会节省点击或点击——更重要的是，我们会避免死锁，即客户犹豫不决且无法继续结账、完全放弃购买的情况。 如果客户对选项犹豫不决，他们肯定不会结账； 如果他们这样做，您可以预期高额退款成本的风险。 在某种程度上，功能比较是一种简单、有用的方法，可以帮助客户做出正确的决定，从而让他们留在网站上。

另一个常见用例是，当客户访问网站时已经考虑了强大的选项，但正在寻找每个选项的更详细细节。 在这种情况下，客户可能会直接在搜索字段中搜索这些产品，通常会输入他们在实体零售店中记下的晦涩型号。 如果使用搜索无法找到该设备，一些客户仍会尝试在类别页面上找到它，但如果他们的第一次尝试没有带来预期的结果，他们将完全放弃该网站。 与前面的案例类似，在这里我们可以通过建议潜在客户可能想要的产品来引导潜在客户，并使他们更容易做出决定。 也许我们甚至可以提供比实体店更具竞争力的价格和送货方式。 同样，在搜索结果中添加比较选择也可能是一个不错的选择。

不过，还有另一种选择。 我们还可以突出显示特征比较作为全局导航的一部分。 如果您的产品范围非常有限，每个产品都针对特定的受众，那么清楚地传达每种产品的设计目标群体可能会很有用。

例如，柯尼卡美能达在主导航中提供了单独的功能比较链接。 不幸的是，它只是并排视图中所有产品的所有规格列表。 也许解释每种产品的优势以及最适合谁会更有帮助。 尽管如此，客户仍可以导出和打印结果，以便于扫描和阅读。

Vizio 在主导航中突出地集成了功能比较。 可以选择所有产品进行比较，但每个导航部分还包含一个“比较尺寸/型号”链接，其中包含整个产品系列，所有产品都分为几组，并带有用于选择相关产品的过滤器。 属性也按组分解，并在表格视图中显示为手风琴，而产品始终在浮动栏中保持可见。

令人惊讶的是，亚马逊没有在类别页面上显示功能比较作为选项。 事实上，在产品页面上也很难注意到。 但是，亚马逊不允许客户选择他们想要比较的产品，而是只允许他们“与类似产品进行比较”。 默认情况下，只有六个属性会显示在移动设备上：产品标题及其缩略图、客户评分、价格、运输信息和零售商。 在轻击或点击时，这些属性会逐渐公开。

不要误会我的意思：当然，该网站的主要目标不是将尽可能多的人带到比较视图中，而是将他们带到结账处——提供真正满足他们需求的商品。 因为比较可以帮助避免死锁，请尝试为产品页面、类别页面和搜索结果启用“添加到比较”，然后监控转换。 如果您的库存中只有少数产品，那么清楚地标记和定位每组客户可能是一个更好（和更简单）的选择。

孤独复选框的生活，或如何表示比较

一旦我们知道功能比较将出现在哪些页面上，我们应该问自己用户将如何实际添加项目进行比较。 这要求我们非常仔细地研究如何指示特征以及用户如何与之交互的微观细节。

一些设计师选择使用带有标签的链接或按钮（例如，“添加到比较”），而其他设计师则使用图标（加号或自定义“比较”图标）来表示比较。 不过，一个更常见的选项似乎是一个不错的带有 label 的复选框。 复选框自然地传达了这一点以及如何选择和取消选择项目，并且使用适当的标签，它可以明确地传达功能。

现在，您可能会问，您会将复选框放在哪里？ 坦率地说，如果你环顾电子商务网站，你会发现它几乎无处不在——有时位于标题上方，有时位于缩略图下方，有时位于评论旁边的右下角，而且通常位于价格上方，很难错过的地方。 诚然，我们无法发现任何显着差异。 但是，有一点值得注意：与纯文本链接相比，带有复选框的选项似乎始终使功能比较更加明显和易于查找。

一旦用户选择了一个项目进行比较，确认选择就很重要——一个复选框就可以很好地做到这一点，但我们也可以更改措辞（例如，从“添加到比较”到“从比较中删除”）或更改背景颜色（略微突出显示）或淡入标签或标志（“Shortlisted”）或弹出框。 我们还必须指出屏幕阅读器的状态变化。

每个选择都应该很容易一键取消选择，而无需重置整个选择。 不幸的是，后者并不少见，因为一些网站选择禁用复选框以防止双重选择，实际上使得无法在不提示比较视图的情况下将产品从比较中删除。

显然，我们还需要在某处放置一个“比较”按钮，以便客户可以轻松地转到比较视图。 现在，如果没有或只有一个项目入围进行比较，那么这种观点就没有意义。 因此，与其在没有足够的项目进行比较时显示禁用的、灰显的“比较”按钮，我们可以仅在列表中至少有两个项目时才显示它——也许内联在那些“添加到比较”旁边” 客户选择的所有候选人的复选框或链接。

例如，索尼首先对一个类别中的所有产品使用文本标签“选择比较”，如果选择了一个项目，它将将该项目上的复选框标签更改为“选择两个或更多进行比较”。 当再添加一项进行比较时，标签将更改为“已选择”，并且“立即比较”链接显示在所有选定产品的内联中。

事实上，在实践中，那个“花哨”的比较按钮不太可能很花哨，否则它会与主要按钮争夺注意力，例如“添加到购物车”。 因此，通常情况下，它是一个微妙的第三按钮，不会引起注意但很明显，靠近比较复选框。 尽管如此，一旦添加了新项目以进行比较，我们仍然可以通过微妙的过渡或动画轻轻突出它一秒钟。

等一下！ 您可能会想：好吧，如果功能比较如此重要，为什么不在灯箱中显示确认信息，提示客户选择直接进行比较或继续浏览网站？ 好吧，这个选项的问题在于它会大量中断流程。 它不是将注意力集中在产品上，而是将客户的注意力引导到确认消息上，每个新添加的项目都必须响应该确认消息。

当然，我们不知道客户是否会添加两个或四个或更多项目进行比较，但必须摆脱灯箱以继续浏览产品似乎过分且完全没有必要。 使用内嵌的“比较”按钮，我们可以充分利用这两种选择：如果用户想要继续浏览，他们会无缝地进行。 如果他们想比较，他们也可以很容易地比较。 重点始终放在最重要的事情上：产品。

然而，这并不是我们能做的最好的。 我们在可用性会议中一直注意到的一个问题是，当客户探索他们的选项并添加项目进行比较时，最终他们准备好提示比较视图，但经常找不到提示它的按钮。 事实上，他们最终不得不重新查找他们选择的产品，因为那是“现在比较”按钮所在的位置。 这在具有一长串分散产品的分页类别中尤其困难。

我们可以通过在页面底部显示一个半透明的比较覆盖来解决这个问题。 当客户添加第一个项目以进行比较时，可以出现叠加层，并且在清除选择时可能会消失。 通过将屏幕的一部分用于比较，我们重新获得了足够的空间来巧妙地确认用户的操作并告知他们接下来的步骤，而不会中断流程。

Home Depot 在底部使用 60 像素高的比较叠加层来突出显示所选产品的缩略图。 我们用来引导用户进行选择的叠加层——例如，通过解释需要多少项目进行比较。 客户不必在类别页面上搜索所选项目，但他们可以直接从叠加层中取消选择选项。 这也是无处不在的“比较”按钮所在的位置。

伊莱克斯在 75 像素高的底部栏中显示有关选定项目的通知。 这可能有点太微妙而无法快速理解。 它没有更改“显示差异”或“显示所有属性”的文本，而是使用用户可以打开和关闭的伪复选框。

Appliances Connection 在底部使用了一个稍微不那么微妙的 40 像素高条，带有一个清晰的链接，指示比较和访问最近查看的项目。 比较视图从上到下滑动，用户也可以切换到最近查看的项目。

显示和隐藏相似特征的设计略微偏离，隐藏在右上角。 此外，客户可以添加“库存 ID 或 SKU”进行比较——但没有多少客户知道这意味着什么。

Abcam 实现底部栏的方式略有不同，它是一个带有垂直列表中排列的项目的手风琴。 不幸的是，一旦用户处于比较模式，就不可能删除项目或清除选择。

Delta 仅在悬停时显示“添加到比较”以及其他重要细节，例如价格。 与前面的示例不同，“添加到比较”会在屏幕顶部提示叠加，客户可以在其中添加更多项目进行比较。

事实上，覆盖似乎是一个很常见的解决方案，事实上，它可以在很多方面有所帮助。 例如，如果只有一件商品入围，我们可以使用该空间来推荐类似的可比商品，甚至是其他客户经常查看的商品（“建议类似或更好的选择”）。

我们还可以对相似的项目进行分组，并用入围的产品来补充比较列表。 有什么不同？ 与其提示客户选择一种产品，然后选择该类型的特定项目并进行比较，我们可以让客户添加不同类型的产品，在后台对它们进行分组，并让它们在以后的任何时候都可以访问——不一定仅用于比较。 将其视为一种扩展的收藏夹列表或愿望清单，每个选择都有一个标签，甚至可能是一个可共享的 URL。

数码摄影评论就是这样做的。 用户可以为候选清单“标记”任何项目，然后稍后比较特定类别中的项目。 这是弹性、宽容设计的一个很好的例子：即使客户选择电池和笔记本电脑进行比较，它们也永远不会出现在并排比较中，因为它们会被单独分组。 每个项目都可以单独删除，或者客户也可以删除整个组。

虽然实现起来稍微复杂一些，但这几乎是一个绝对的解决方案，似乎运作良好。 或者，在页面底部停靠一个“比较”栏肯定也是一个可靠的解决方案。

可以添加多少项目进行比较？

虽然有些界面非常严格，一次只允许比较 2 个项目，但更常见的是允许最多 4-5 个项目进行比较——通常是因为比较视图中的空间限制。 诚然，列表中超过 5 个项目的比较变得非常复杂，列被隐藏并且“显示差异”变得不那么有用。 但是，如果客户最终选择比较更多商品怎么办？

好吧，除了一个特定的例外，没有多少客户可能会这样做。 一些客户倾向于误用购物车和功能比较作为心愿单，“保存物品以备后用”作为参考。 如果他们选择保存大量项目，我们当然可以让他们使用步进器浏览产品，但也许默认情况下我们可以重塑表格并提取亮点、优点和缺点。 这可能比完全不允许添加一个项目来比较烦人。

并排比较的转瞬即逝

最终，在点击这些复选框或链接后，客户有望选择并排查看入围选项的比较。 这种比较通常是一个短命的物种：只要它服务于它的目的，它就会被使用，可能会与朋友和同事分享，但不久之后就会消失在遗忘中。 现在，比较可能以不同的方式出现：

1. 在同一页面上，作为整页覆盖；
2. 在一个单独的新页面上，集成在网站的布局中；
3. 在单独的新页面上，独立；
4. 在用户当前所在的选项卡之外打开的单独选项卡或窗口中。

什么是最好的？ 在大多数情况下，第二个选项可能难以有意义地实现，只是因为特征比较需要大量空间来实现属性的快速比较。 第一个和第三个选项通常更容易实现，但第一个可能会显得稍微快一些，因为不涉及页面之间的导航。 但是，它还需要根据比较状态正确实施 URL 更改。 使用独立页面，这个问题会更容易解决。 作为替代方案，您可以建议“保存比较”并生成可以共享的链接。

第四个选项取决于您在无休止的讨论中是否应该默认在新选项卡中打开链接。 这可能是一个偏好问题，但通常我们必须有一个很好的理由来打开现有窗口之外的窗口。 虽然它可能对 PDF 文件或任何可能导致输入数据丢失的页面有意义，但对于比较视图来说可能不够重要。

理想情况下，您可以同时提供这两个选项——链接可以直接指向同一选项卡中的比较视图，并且可以使用类似于维基百科的外部链接图标来指示要在单独的选项卡中打开的视图。

略有不同的功能比较，或以正确的方式提出正确的问题

最后，我们只是想帮助用户快速找到相关的可比属性。 有什么比首先要求用户选择对他们最重要的属性更好的方法来找到它们？

比赛得分比较

例如，我们可以通过查看出现在选定产品评论中的质量来自动提取其中一些属性，并在并排比较上方的小面板中建议它们——就像用户可以确认或确认的标签一样添加。

一旦定义了相关属性，我们就可以计算所有选定产品的匹配分数（基于评论和规格），如果它们的平均值远低于预期，建议使用具有更高分数的替代产品。

得分最高的选项可以被建议为“推荐购买”或获胜者，最终购买该产品的客户百分比，甚至可能来自外部专业评论的分数。 在那里，我们可以更显眼地显示购买商品或在附近商店取货的选项。 总而言之，我们甚至可以用一个可爱的“战斗”加载指示器来补充比较，以传达我们正在“努力”寻找最佳选择。

十大评论设法在并排比较中显示 10 种产品。 每个产品都有一个按特定功能组细分的评级，但也有一个总分。 获胜者以“金奖”突出显示，在窄屏幕上，它的列是固定的，而其他产品则与之进行比较。 这是一个稍微固执己见的设计，但也许从用户的角度检测获胜的候选人也稍微容易一些。

矩阵比较视图

在进行比较时，我们自然会想到特征比较表，但过滤视图或可视视图可能是比较的更好选择——尤其是对于复杂的比较。 例如，产品图表使用产品的矩阵表示，价格与显示器的屏幕尺寸相对应。 特征和属性可以作为左侧的过滤器进行调整，候选越少，缩略图越大。 这不是每个网站都可以选择的，但是在表格布局范围之外看到比较很有趣。

功能比较可以，但对客户来说不一定是一项复杂的任务。 我们可以通过根据客户的喜好提出更好的选择来处理一些繁重的工作。 不幸的是，我还没有在真正的电子商务界面中找到这个概念的任何例子。

无缝集成比较

但是，如果我们完全放弃进行专门的功能比较的想法，而改用更集成的方法呢？ 评论中反映的客户体验往往比产品规格更有价值，那么如果我们让客户根据从评论中提取的关键字来探索建议呢？

In his article on UX Breakdown of Customer Reviews, Raviteja Govindaraju suggested a couple of options of how it could look.

A product page could display extracted review keywords upon tap or click. On a category page, a product comparison would extend “common” filters with sorting by these keywords. Finally, instead of a feature comparison table, the customer could select the features they care about most and the overview would provide a list of “best” options for them.

In the same way, if a customer is looking for a set of products rather than just one standalone product, we could provide “recommended” options in a contextual preview. Based on measurements of an apartment, for example, we could suggest electronics and furniture that might work well. The feature might be particularly useful for the fashion industry as well.

These solutions basically provide a slightly extended filtering option, but it shows how a feature comparison can go beyond a “traditional” side-by-side comparison. The better and smarter the filtering options, the less critical a side-by-side feature comparison could be.

Accessible Markup

While many of us would consider the table element to mark up a comparison table, in accessibility terms, sometimes that might not be the best idea. The comparison could be just an unordered list ( li ) with headings — for instance, an h2 for the title of each product and h3 subheadings for the features of each product. Screen readers provide shortcuts for navigating between list items and headings, making it easier to jump back and forth to compare.

That way, we could basically create cards, collapsed or not by default, and then progressively enhance the list towards a tabular view for easier visual scanning. Highlghting differences would then mean just rearranging cards based on customer's preferences. Still, with labels and headings, a table might be a good option as well.

As Leonie Watson, an accessibility engineer and W3C Web Platform WG co-chair, put it, “casting your eyes between two data sources is relatively easy to do, but a screen reader doesn't have any really good way to emulate that behavior”. According to Leonie, “if there is a single comparison table (where the data to be compared is in different columns/rows), then the most important thing is that the table has proper markup. Without properly marked up row/column headers, it is hard to understand the context for the data in an individual table cell.

Screen readers have keys for moving up/down through columns, and left/right through rows. When a screen reader moves focus left/right into a table cell, the column header is automatically announced before the content of the cell. Similarly, when screen reader focus moves up/down into a cell, the row header is announced before the cell content.

If the data sources for comparison are in different places/tables, then things get a bit harder. You have to remember the data from one source long enough to be able to navigate to the data source for comparison, and frankly that's a cognitive burden most people will struggle with.

A more general purpose solution is to offer customers choices of how the data is presented — for example, to choose to view all data in a single table, or to select certain objects for comparison.”

Feature Comparison Design Checklist

呸！ That was quite a journey. Below you'll find all of the design considerations one has to keep in mind when designing a feature comparison table. You thought it was easy? 再想一想。

Now, below is a list of features that a good comparison is likely to have. We covered most of them in the beginning of this article, but they are worth having in one place after all:

• Every column contains the price (or price graph), a link to the standalone product page, ratings, the number of reviews, a thumbnail, the product's model name, and a price-matching tooltip.
• For every product, useful reviews, with major advantages and disadvantages as keywords, are extracted and highlighted above the comparison.
• Attributes are consistent and have comparable meta data; they are grouped, and some of them are collapsed by default.
• If there isn't enough meaningful meta data to compare against, explain that to the customer and suggest third-party reviews instead. Irrelevant tables are frustrating.
• The customer can switch to seeing only differences, only similarities or all attributes.
• The customer can reset their selection and return back to the products (perhaps with breadcrumb navigation at the top).
• The customer can add new products to the comparison (for example, if they are unsatisfied with the results of a comparison).
• Columns and rows are highlighted upon hover or tap.
• The customer can rearrange columns by dragging or moving them left and right.
• Every action provides confirmation or feedback.
• Customers can generate a shareable link for comparison (for example, "Save comparison as…").
• If the user spends too much time in the comparison view, a window with information for hotline support or chat is displayed.
• Items are stored persistently after page refresh or abandonment.
• The feature comparison is responsive, bringing focus to the differences and the advantages and disadvantages of products.

Questions and Considerations

And here are the questions the team will have to consider when designing and implementing a comparison table.

• 你如何表明这种比较是可能的？
• 添加第一项进行比较时会发生什么？
• 当只选择一项时，您是否禁用了比较选项？
• 选择项目后，您是否更改链接或突出显示所选产品，或显示比较栏，或显示灯箱？
• 用户如何取消选择选定的选项？
• 如果只添加了一项进行比较，我们应该建议产品进行比较还是让用户“找到相似的产品”？
• 选择项目后，您是否提供视觉反馈以重申和让用户放心他们的选择。 （例如，“不错的选择！这是该类别中排名前 10 的相机之一！”）
• 客户可以添加多少项目进行比较（通常是三到五个）？ 如果没有选择或选择一项，比较会发生什么情况。 超过五个项目怎么办？
• 在比较项目时，我们是否使用动画或过渡来指示比较（例如战斗动画）？
• 我们是否显示价格（或价格发展）、单个产品页面的链接、评级、评论、缩略图、产品型号名称和价格匹配工具提示？
• 用户可以切换到仅查看差异、仅相似性或所有属性吗？
• 我们是否默认分组和折叠属性？
• 我们是否跟踪属性是否一致并具有可比较的元数据？ 否则，看到差异将毫无意义。
• 我们是否在悬停或点击时突出显示列和行？
• 用户可以左右移动列吗？
• 如果用户将不相关类别中的项目（例如，笔记本电脑与电池）进行比较怎么办？
• 我们如何允许用户添加更多项目进行比较？
• 我们如何允许用户从比较中删除项目？
• 我们应该动态跟踪比较列表中有多少项目，如果没有（“哦，没有什么可比较的！这里有一些建议。”）或一个（“Boo-yah！你有一个赢家）提示消息！”）还是两个（“所以，你现在只有两个候选人。”）？
• 我们应该要求客户选择他们最关心的东西吗？
• 我们是否会根据用户最相关的属性在选择进行比较的产品中推荐一个“赢家”？
• 每个动作是否都有视觉和/或听觉反馈来指示变化？
• 我们是否提供了用于比较的可共享链接（例如，“将比较另存为...”）？
• 如果用户在比较视图中花费了太多时间，我们是否应该提示一个带有热线支持或聊天信息的窗口？
• 页面刷新或放弃后，比较的项目是否会持久存储？
• 我们是否包含电子邮件订阅的“通知降价”选项？
• 特征比较是否可访问，编码为无序列表？
• 我们如何使特征比较具有响应性？

更多资源

• “比较表”，尼尔森诺曼集团，
• Vimeo 上的高清功能比较实现。

敬请关注！

这篇文章是关于设计模式的新系列的一部分，在你真正的 Smashing Magazine 上。 我们将每两到三周在本系列中发布一篇文章。 不要错过下一个，关于构建器和配置器。 啊，对涵盖所有模式（包括上述模式）的（印刷）书感兴趣？ 在评论中也让我们知道——也许我们可以考虑将所有这些模式组合成一本书并在 Smashing Magazine 上发布。 继续摇滚！

非常感谢 Heydon Pickering、Leonie Watson、Simon Minter、Penny Kirby、Marta Moskwa、Sumit Paul 在本文发表前为本文提供反馈。