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两者都在增加：用户被迫记住信息、记笔记、在标签页之间切换或打开多个浏览器窗口。
这是比较表进来的地方 - 一个众所周知的，但经常被忽视或误用的模式。基本比较表使用产品或服务的列，以及属性的行。它允许在每个提供的特征和特性之间快速轻松进行比较。
当您需要比较表时
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 rates那or 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.
如果您有5个产品或更少，则采用这种方法是采取这种方法，但我们将限制本文后面的比较项目的数量。静态比较表通常适用于会员级别或定价包。
使用这种比较表实现，您将能够控制信息在页面上的显示方式。例如，可以更改副本以适应一个单元格的空间约束。但是，请注意，此实现的可伸缩性不如动态比较表那么容易：如果提供新产品或服务，则必须更新比较表。
动态
动态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:
- 比较按钮或复选框直接在列表页上。使用此方法，用户可以选择感兴趣的项目，然后移动到动态创建的比较页面。
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.
- 直接操纵感兴趣的项目。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示例中，该网站具有特殊的专用比较页。
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项。考虑需要为属性包含多少文本，以及如何影响布局和可读性。
还要考虑用户设备或浏览器的大小。您可能需要将在手机上演示的项目数减少到两个。另一方面，如果有足够的空间显示更多内容，不要强迫用户一次只比较两个项目。
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
大多数比较表的最大问题不是设计问题，而是内容问题。当属性信息丢失、不完整或在类似产品中不一致时，其他方便的比较表很快就会变得无用。对于动态比较表来说，这尤其有问题，因为您要处理的许多产品的元数据略有不同。
支持可扫描性
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.
在比较表中使用文本时，请保持简短。尽可能避免完整的句子。
颜色编码也可以帮助 - 轻轻着色每列的背景，或者着色单元的文本。只需确保您维持足够的对比并且不牺牲可读性。
清楚地表明行也很重要，因此用户可以轻松地告诉哪个属性单元格是指的，特别是当使用符号时，如无法单独站立的复选标记。行边框，行阴影或额外间距可以帮助保持行独立并分开。
Sticky Column Headers
特别是在处理占用多个屏幕的属性长列表时，在用户滚动时保持列标题固定。人类的短期记忆是有限的，用户很容易忘记哪个栏目是哪个产品的。
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盎司的感觉，但可能想象鸡蛋的重量。
构成模糊属性有意义的另一种有效的方法是包括与更多信息或上下文工具提示的链接，其中包含定义或澄清信息。
Give Users Control
即使您做好扫描的条目或标题粘性的良好工作，也可以很难比较具有许多属性的产品，特别是当这些属性跨越几个屏幕时。在这些情况下，用户可能必须在不同行之间来回滚动，因为它们比较不同产品的优缺点。
为了使任务易于管理，请考虑允许用户选择要在表中显示的属性。可折叠行是此功能的简单实现。此外，允许用户隐藏所有产品都相似的行，并且只显示差异。
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.
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.
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.
有关支持用户认知过程的更多提示，如决策，请查看我们的全天培训研讨会人类的思维和可用性。
Share this article: