Comparison isone of the most critical activitiesusers perform on the web. In many cases, it’s a necessary step before your site visitors will perform a desired action, like buying your product, signing up for membership, contacting you, or requesting a quote.

实现比较的第一步是为所有可比较的产品或服务提供一致的信息。但是,当这些信息分布在详细信息页面上时互动成本cognitive load两者都在增加:用户被迫记住信息、记笔记、在标签页之间切换或打开多个浏览器窗口。

这是比较表进来的地方 - 一个众所周知的,但经常被忽视或误用的模式。基本比较表使用产品或服务的列,以及属性的行。它允许在每个提供的特征和特性之间快速轻松进行比较。

keurig.com:典型的产品 - 比较表

当您需要比较表时

Comparison tables are often misunderstood as tools for ecommerce only. It’s true that the most common instances of comparison tables are for mid-range to expensive consumer goods, especially electronics (think microwaves, fitness trackers, vacuum cleaners, or cars). Butcomparison tables are equally well-suited to services, membership levels, pricing packages, software features,tuition ratesor locations。他们可以用来比较来自同一组织的类似项目那or tocompare one organization’s products against those of a competitor。The comparison table is a much more versatile tool than it gets credit for.

To understand when you should use a comparison table, you have to first consider how people make decisions.

当人们必须在许多替代方案中选择时,很难比较每个替代方案的优缺点,并且他们从事noncompensatory decision making.来缩小替代一个人的数量ageable one, they usually use one hard criterion that outweighs any other considerations. For example, a user looking to buy a new car might filter out all the cars that are more expensive than that $20,000, even though some of them may be surpassing the budget by a very small amount. This nonnegotiable filter helps the user restrict the set of results to a reasonable size.

When people have to select among a small set of alternatives (usually under 5–7), they usually engage incompensatorydecisionmaking:they look at the individual merits of each and compare their advantages and disadvantages according to a number of criteria. People might accept a negative attribute as a tradeoff for a positive one. For example, a user researching a new laptop might be willing to consider a heavier computer if it has better battery life and computing power.

过滤器和面部支持非致密决策。相比之下,比较表最好服务补偿性决策。它们允许用户轻松查看和比较多个重要属性一目了然。

当比较表是不需要的时,肯定会有情况。除了上面讨论的不可替代的判决情况外,如果以下情况,您可能不需要比较表:

  • 类似的物品不一定是相互排斥的。例如,与微波炉或笔记本电脑不同,消费者不太可能只购买一件衬衫,因此Zara不需要将比较表放在一起,让用户并排看到几件衬衫。
  • 产品或服务很简单,用户也’t be interested in analyzing the characteristics. For example, a coffee mug doesn’t have many meaningful, comparable attributes. Someone shopping for a coffee mug online might be interested in the style (and possibly size) but probably won’t want to compare many attributes of several coffee mugs.
  • The product or service is cheap or easily replaceable (e.g., a pen, paper towels) and users are likely to engage in满意而不是花太多时间分析备选方案。
  • 产品或服务是独特的,难以与他人比较。例如,它很难提出一组属性来比较艺术品。

Outside those exceptions, a comparison table’s applications are limited only by your imagination. Pretty much any time your users want to choose among similar offerings, especially if multiple factors contribute to the decision, it’s an opportunity for a comparison table.

比较表的类型

一些比较表是static— they contain preselected products; others aredynamic并允许用户决定他们想要比较的项目。您需要的类型将主要取决于您的产品宇宙的大大尺寸:静态表用于小型(5件商品)产品宇宙和动态表在您的产品宇宙包含许多项目时是合适的。

Static

如果您拥有少数产品,您的用户需要比较,您可能想要创建预构建,static comparison tables。For example, Apple currently only sells 5 different models of the Apple Watch, so it provides a ready-made comparison table for users trying to decide.

apple.com: With only five models of the Apple Watch available, Apple can provide a comparison table that includes them all.

如果您有5个产品或更少,则采用这种方法是采取这种方法,但我们将限制本文后面的比较项目的数量。静态比较表通常适用于会员级别或定价包。

使用这种比较表实现,您将能够控制信息在页面上的显示方式。例如,可以更改副本以适应一个单元格的空间约束。但是,请注意,此实现的可伸缩性不如动态比较表那么容易:如果提供新产品或服务,则必须更新比较表。

Apple.com:确保用户可以通过在您的产品菜单中包含信息架构中的表中的链接,找到静态比较表。Apple包括The Watch辅助导航菜单中的静态比较表的链接,与各种Apple Watch模型的链接一起。

动态

动态tables allow users to select which items they want to see in the comparison table. They are appropriate for situations where your product universe is larger than 5 items.

While dynamic comparison tables scale well as your set of offerings increases or changes, they are usually implemented using a灵活的布局和ir appearance cannot be as closely controlled as that of static tables.

在动态比较表中选择项目。Two popular ways of allowing users to select which items to add to the table include:

  1. 比较按钮或复选框直接在列表页上。使用此方法,用户可以选择感兴趣的项目,然后移动到动态创建的比较页面。
复选标记(左,homedepot.com)和按钮(右,lowes.com网站)是允许用户为交互式比较表选择项目的两种最常见的方法。

Product listing pages tend to be overcrowded, so one major challenge for this implementation is making the比较可发现的按钮不会在页面上给它们太多空间。最安全的选择是包括比较buttons as secondary action buttons, either at the top and bottom of the page, or beneath all product descriptions.

delta.com: Delta’s interactive comparison tool is only revealed when users hover over products. Don’t hide the comparison tool behind hover effects.
  1. 直接操纵感兴趣的项目。With this method, users can click or drag the products that they want to add to the comparison table. Usually this action is possible either because, like in Garmin’s example below, a special比较模式禁用单击产品的常规含义(通常将用户带到产品详细信息页面)或因为,如在Fitbit示例中,该网站具有特殊的专用比较页。
Garmin.com:Garmin在其产品上市页面顶部的比较按钮。按下该按钮后,单击产品将其添加到比较表中,而不是导致该产品的详细信息页面。不幸的是,这个灰色的幽灵按钮消失在UI中,不易引人注目。
Fitbit.com:Fitbit提供7型型健身跟踪器。专用的比较页面允许用户选择要比较的产品。请注意,当产品宇宙很大时,此解决方案是不切实际的,如果您已经有上市页面可能是不必要的。

One advantage of this direct-manipulation approach to selection is the opportunity to separate the comparison activity from the product-listing page, keeping that view visually cleaner.

当您没有足够的产品或产品时,单独的比较页(如Fitbit's)是一个很好的选择,以便首先是证明传统的上市页面。

Best Practices for Comparison Tables

Regardless of which type of comparison table you choose, follow thesebest practicesto support your users’ decision making.

使用比较表最多5项

Comparison tables support compensatory decision making, in which people engage only when they have relatively few alternatives to consider. When more than 5 items need to be compared, add other mechanisms such as filters to help users narrow down the larger set of possibilities to 5 or fewer.

对于静态比较表,简单方面的错误。如果您无法将静态表保持为最多5个可比选项,则重新考虑它是否应该是静态比较表。根据您所呈现的信息的复杂性,即使是5个选项也可能太多。

对于动态表,如果用户有自由以选择这些5项的自由,则额外考虑将优雅地规模最多5项。大多数动态比较表仅接受3-4项。考虑需要为属性包含多少文本,以及如何影响布局和可读性。

还要考虑用户设备或浏览器的大小。您可能需要将在手机上演示的项目数减少到两个。另一方面,如果有足够的空间显示更多内容,不要强迫用户一次只比较两个项目。

苹果Mac电脑的动态比较表不必要地限制用户比较两个项目,即使是非常大的屏幕尺寸(显示在分辨率为3008x1692的显示器上)

Whatever your limit, make sure you clearly communicate it to your users to avoid confusion and errors. And don’t forget to let users remove items from the comparison, as they narrow down their selections.

Be Consistent

大多数比较表的最大问题不是设计问题,而是内容问题。当属性信息丢失、不完整或在类似产品中不一致时,其他方便的比较表很快就会变得无用。对于动态比较表来说,这尤其有问题,因为您要处理的许多产品的元数据略有不同。

bestbuy.com: This comparison table displays the attributes for 4 different mirrorless cameras sold by Best Buy (two Sony cameras, one Canon camera, and one Panasonic camera). The metadata for the Panasonic camera is much richer than for the others. It can be challenging to keep the metadata consistent and up to date, especially when companies sell many products from many different manufacturers. However, if the information isn’t complete for all compared products, it might as well not be in a comparison table at all.
smugmug.com比较表值不是展示您网站的个性的好地方 - 它会更好地留下这些值等价物,而不是在扫描差异时分散用户的注意力。

支持可扫描性

Comparing cons and pros of different products is a cognitively demanding process. You want to make sure your users can focus on the essentials. An effective way to do this is to make the table easy to scan for differences, similarities, and keywords.

Stick to the standard table layout: options as columns, attributes as rows, with row labels on the left and column labels above. Use consistent text alignment in each column.

williams-sonoma.com: Williams Sonoma does a good job categorizing pans for this static comparison table. Unfortunately, the horizontal row headers are nonstandard and impede scannability. The narrow paragraphs under DISTINGUISHING FEATURE are not scannable or easy to read.

在比较表中使用文本时,请保持简短。尽可能避免完整的句子。

颜色编码也可以帮助 - 轻轻着色每列的背景,或者着色单元的文本。只需确保您维持足够的对比并且不牺牲可读性。

FitBit.com uses a different color for each column’s checkmarks to help users clearly differentiate between each product’s features. This color-coding approach wouldn’t work quite as well for more complex attribute values that can’t be expressed in checkmarks.
TechSmith.com使用颜色编码列以显示其软件产品中可用的不同功能,以及它们可以使用的平台。

清楚地表明行也很重要,因此用户可以轻松地告诉哪个属性单元格是指的,特别是当使用符号时,如无法单独站立的复选标记。行边框,行阴影或额外间距可以帮助保持行独立并分开。

Sticky Column Headers

特别是在处理占用多个屏幕的属性长列表时,在用户滚动时保持列标题固定。人类的短期记忆是有限的,用户很容易忘记哪个栏目是哪个产品的。

迪士尼World.Disney.go.com:迪士尼提供动态比较表,以帮助客户比较不同的年度通行证。不幸的是,它没有固定的列标题,因此用户被迫记住列名,或滚动备份页面以检查哪个列为“迪士尼白金加通路”以及“迪士尼铂金的禁用”列。

Meaningful Attributes

Your comparison table should include attributes that your users will actually care about. Don’t just throw every piece of metadata you have into the table, because it will make the job harder for users.

尽可能在上下文中定义不熟悉的术语,并将模糊的属性与具体的东西联系起来。这方面的一个例子是在一个Anker便携式电源银行的Amazon页面上。

亚马逊网站:制造商的产品比较表将技术属性转换为普通消费者可以理解的语言。

Anker’s comparison table has attributes that are useful in the context of comparing portable power banks: battery capacity in mAh, charging speed, and weight. Whatreally使这个很好的比较表是它将这些属性转换为对普通消费者有意义的东西。电池容量为“3350 MAH”,约为1.2“iPhone 6收费。”尺寸为“3.5 x 0.9 x 0.9英寸” - 关于唇膏管的尺寸。重量是“2.7盎司”,类似于鸡蛋的重量。普通消费者可能遇到麻烦想象2.7盎司的感觉,但可能想象鸡蛋的重量。

构成模糊属性有意义的另一种有效的方法是包括与更多信息或上下文工具提示的链接,其中包含定义或澄清信息。

shopify.com: The hover-activated tooltip clarifies the meaning of the attributes without adding extra text to the page.

Give Users Control

即使您做好扫描的条目或标题粘性的良好工作,也可以很难比较具有许多属性的产品,特别是当这些属性跨越几个屏幕时。在这些情况下,用户可能必须在不同行之间来回滚动,因为它们比较不同产品的优缺点。

为了使任务易于管理,请考虑允许用户选择要在表中显示的属性。可折叠行是此功能的简单实现。此外,允许用户隐藏所有产品都相似的行,并且只显示差异。

三星网站:三星在其动态产品比较表中提供了大量定制选项。用户可以折叠或展开属性的类别,并可以选择特定属性以仅显示他们感兴趣的行。但是,此表存在列对齐不完全的问题,这妨碍了可扫描性。这种实现也过分地进行了定制,似乎成为了功能膨胀的牺牲品。现在还不清楚为什么用户在选择产品时只需要看到相似之处。
crutchfield.com: Crutchfield allows users to remove attributes that are the same for all compared options by clicking Hide similar features. If all three speakers have the same warranty length, that’s probably not a useful piece of information for deciding among them.

For simple static comparison tables, consider presenting a simplified table with those attributes you expect will be most important to users, but also allow access to a more detailed table.

smugmug.com: For its 4 plan options, SmugMug presents a very simplified “at a glance” comparison table.
smugmug.com:在不同的页面上提供了更详细的完整比较表。

Simplify the Comparison for Mobile

一些网站只是删除他们的比较功能nality altogether for small devices. If at all possible, you should try to support some level of comparison on mobile, but it’s unlikely that you’ll be able to show more than 2 items at a time in a comparison table. Remember that on smaller screens, fewer rows will be visible at a time and more strain will be placed on the user’s short-term memory. Therefore, following the previous recommendations (especially making entries scannable and giving users control to choose what they want to display) will be even more important on mobile.

If a true comparison table on a mobile devices is impractical for your offerings, you might alternatively consider converting the table to tabs or lists for small screens. Just remember that these formats do not support compensatory decision making as well, because users have to remember the attributes for each products in order to weigh pros and cons.

shopify.com网站:使比较表在移动设备上工作的一种策略是将列转换为选项卡。这意味着用户无法像在一张满桌的桌子上那样进行真正的并排比较,但至少他们能够比必须滚动或切换手机浏览器选项卡时更轻松地在产品之间切换。

The Golden Rule of Comparison Tables

To sum up many of the guidelines we’ve listed here:Above all else, do the work for the consumer.不要使用反复信息的非标准或过长的表来慢慢慢;不要让他们在他们的记忆中抓住东西;并且不要使他们不熟悉的谷歌术语。

Think of a comparison table as a tool to help each user find the option that suits them, rather than a way to upsell them. It may be tempting to manipulate users toward buying the most expensive option, but an honest presentation will be more profitable for your company in the long term.

帮助用户确定最适合他们的需求的解决方案可以通过多种方式帮助您:

  • Don’t try to manipulate your users, and you’ll avoid losing their trust. Many users will detect manipulation which will drastically reduces the可靠性(and thuspersuasiveness)你的网站。
  • 当人们购买最适合他们的时候,他们更有可能满足客户,并将您的品牌推广给别人(也改善了你的NPS)。
  • 除了下一点击之外,您应该重视明年:越多的人重视他们目前与您网站的互动,他们就越有可能变成loyal users who’ll return

Make your users’ decisions as easy as possible:you’ll be happy, and they’ll be happy.

有关支持用户认知过程的更多提示,如决策,请查看我们的全天培训研讨会人类的思维和可用性。