本文主要介绍了设计电商商品详情页面时需要注意的交互设计原则，并举例说明了商品页面的改进如何能够有效帮助用户购买商品并最终促成交易。

网购客户通过产品页面做出购买决定。回答问题、进行比较和提供评论都可以帮助用户推进购买过程。

在电子商务网站中，产品页面对于网站的成功至关重要，客户需要有足够的信息来做出购买决定。

产品页面或产品详情页面是用户决定是否购买以及购买什么的地方。页面必须包含完整的产品信息，并以直接的方式教育和告知用户有关产品的信息。

在线顾客在购买前不能触摸商品、向销售人员提问、试穿商品或试用商品。当然，积极性很高的购物者可能会订购样品来试用材料或通过实时聊天提出问题（通常作为最后的手段），最勇敢的购物者甚至可能愿意尝试虚拟试穿工具。但所有这些都伴随着高昂的交互成本，需要强烈的动力和意愿在应用程序或网站上花费大量时间。

很多情况下，客户不想花费太多时间，因此产品页面需要帮助他们尽快获取信息。确保回答用户的问题并准确展示您的产品符合您商店的最佳利益。

糟糕的产品页面会产生两个主要后果，这两种后果都会损害客户与您网站的关系：

客户无法决定该商品是否符合他们的标准，因此放弃购买（比事后后悔购买要好）。客户基于不准确的假设购买了错误的商品，导致客户不满意或退货（越是这样恼火的人，在遇到内容较少的产品页面时就会越怀疑，并根据场景1做出反应）。在分析了数百个示例后，我们提出了设计有效的产品详细信息页面的指南，本文简要概述了我们的发现和建议。

产品页面中应包含哪些内容产品页面是主力，负责回答客户问题并让购物者做好购买准备。因此，让网站和应用程序正确执行此操作非常重要。

精心设计的产品页面具有以下功能，我们将其分类为“基本功能”、“不错的功能”和“花哨功能”（如果这些元素不是“花哨功能”，请不要被“花哨功能”的名称所迷惑）不是真正必要的。或者执行得很好，它们可能会分散注意力和令人失望）。

预测并回答产品问题购物者浏览产品页面的目的是寻找产品问题的答案。

在我们的研究中，只有那些已经了解该产品的人才不会仔细查看产品页面。即使是已经关注产品的购物者也需要检查产品页面以确认他们找到了合适的商品。

许多网站提供的产品信息不足，导致用户的问题没有得到解答，也没有足够的信息来帮助做出购买决策。虽然不可能知道不同的人对产品的所有问题，但有些网站甚至不提供基本的产品信息。

网上购物的一个常见问题是退货。当网站充分描述某件商品时，用户可能会购买正确的商品，并对购买充满信心，而不必担心以后退货。

一个好的产品页面应该使用文字和图像来描述产品：

要完整，但不要冗长或松散。用户并不是在寻找混乱的营销信息，而是在寻找对商品、如何使用它、它的外观以及它的用途的可靠描述。

用户在在线阅读时经常会浏览文本，更多地阅读描述的开头而不是结尾；更多的是在行的开头而不是结尾。 —— 不要浪费前几行产品描述，开门见山。

描述还应该解释用户不太可能知道的任何术语。例如，Urban Outfitters 网站上的某些商品被标记为“Urban Recycled”。商品详细信息解释了此标签的含义：每件商品均经过手工翻新，因此您收到的商品的颜色、色调和磨损情况将与图片中显示的商品有所不同。

Urban Outfitters 网站上的产品描述中有一个名为“Urban Renewal Recycled”的部分，充分说明没有两件商品是完全相同的。

使用图片或视频来回答问题。产品图片定义了用户对您的产品的期望。图像和视频应与描述一起使用，以提供对产品的完整理解。

一张产品图像通常是不够的，用户更喜欢提供多种视图或动画视图的网站，包括旋转图像、细节、放大图像以及正在使用的产品或其环境中的图像。

eBages 上的用户正在根据产品列表页面上的图片购买手提包。 “我想知道包的内部是什么样子，”她点击进入完整的产品页面时说道。当她看到产品图片时，她说：“哦，这里！这个看起来很漂亮！里面有两个侧袋。”

然后她返回列表页面继续选择自己喜欢的其他包包，并点击进入相应的商品详情页面查看这些包包的内饰等详细图片。 “它的衬里很好，有一个方便的侧拉链，”她谈到另一个包时说道。

该用户在购买手提包时没有阅读产品说明中的任何文字信息。他只是看了一眼图片，就已经选出了他最喜欢的产品。

eBags.com 上的购物者严重依赖详细图片来确定哪些包最适合他们的需求。

帮助用户比较项目用户经常在网站上比较项目，并希望看到有关他们正在考虑的每个项目的相同信息。

关于可比商品的一致信息是关键，信息的呈现也会影响比较商品的难易程度。一些网站更改页面设计或某个项目的可用信息，从而迫使用户搜索他们需要的信息。

购物者需要四个不同层面的可靠信息：

产品规格当购物者考虑产品的选项（例如尺寸、颜色或口味）时，他们希望所有规格都提供相同的信息。

一位研究参与者对Adagio.com 上有关产品尺寸的不一致信息感到沮丧。

该网站很好地告诉用户根据样品大小可以泡多少杯茶。然而，对于较大的尺寸，它却无法做到这一点。相反，它列出了每杯的成本，以便用户可以根据价格评估选项，这很有帮助。

然而，不一致可能会激怒用户。她说：“当我订购时，在包装说明上，对我有帮助的是，在样品下方，它说明了包装尺寸可以泡多少杯茶。但在其他情况下，它没有提到多少。杯，我只能做出一个假设。但是知道你可以制作多少个杯子会很有帮助，但事实并非如此。它只在样品下方注明，没有其他任何内容。”

用户表示，他们很欣赏Adagio 的网站，说明该样品可以泡多少杯茶，但也希望它说明可以泡多少其他尺寸的茶。

产品类别购买某种产品的客户希望网站能够显示不同品牌和型号的类似详细信息。

例如，购买洗衣机的购物者希望能够比较有关容量、所需空间和可用洗涤周期类型（例如精细洗涤、生态洗涤和快速洗涤）的信息。对于数据密集型规范，比较表可能是呈现此类信息的最佳方式。

一致的产品页面通常，当人们在网站内的页面之间切换时，他们希望页面保持视觉上的一致。这是用户界面设计的十种启发式方法之一。

对于产品页面，客户希望吸尘器看起来与家用扬声器的页面相似。页面上的信息量和类型可能因产品类型而异，但从视觉上看，网站内的导航和搜索应保持一致。

竞争对手的产品页面努力了解用户可能在竞争对手的网站上看到哪些信息，并在您的产品页面上提供相同的信息。

例如，一位顾客在TuftAndNeedle.com 和Casper.com 上比较了床垫，但只有Casper 的网站在产品页面上强调了免费送货。

他解释说：“Casper 提供100 晚试用、免费退货或提货以及免费送货。因此Tuft & Needle 之间的价格差异可能归结为运费。”

然后他切换到浏览器查看Tuft & Needle的网站：“我必须进入Tuft & Needle的购买流程，看看他们是否免费送货。当我选择Queen Size并添加到购物车时，哦，原来是免费的船运。 ”

Casper 的产品页面提到免费送货，用户会注意到免费送货，并在评估床垫价格时将其考虑在内。

与Casper 的网站相反，TuftNeedle 的网站要求用户将床垫添加到购物车中才能发现送货是免费的。

最后，产品页面向购物者显示相关或相关产品的建议，这很有帮助。

这些建议可以帮助用户发现他们可能没有想到的替代方案。即使是高度相关的推荐（例如“您可能也喜欢”）或具有社交效果的推荐（例如“购买了该商品的顾客也购买了”）也会让用户喜欢。请谨慎使用，仅提供高度相关的建议，因为在产品页面上显示太多建议可能会分散注意力或掩盖重要的产品信息。

显示买家评论—— 即使是糟糕的体验，即使是最完整的产品描述也会给一些用户留下疑问。其他买家或专家的评论将为网站带来另一种声音，帮助客户更多地了解该产品。

用户经常使用产品评论来收集附加信息。在许多情况下，这些评论准确回答了用户提出的问题，这些问题通常与产品的使用相关。产品描述可以描述产品的特性，但买家评论可以提供有关产品使用情况的信息。

Fossil.com 上的一位购物者读到了有关这款智能手表的褒贬不一的评论。 “有人说这条带子很难使用，”他说。 “其他人说这款手表做工很便宜，就像儿童手表一样。但后来也有人说材料很棒。”

最终，尽管这款手表受到了负面评价，但正面评价足以说服他继续考虑购买。于是他不再看评论，又回去看产品的功能、规格以及产品图片信息。

Fossil 移动网站上的一位用户发现，对这款智能手表褒贬不一的评论很有帮助，好评多于差评。

如今的购物者已经开始期望看到正面和负面的评论，并能够快速浏览它们。

我们不断观察那些想要首先跳转到负面评论的用户，以便他们知道“该商品可能发生的最糟糕的情况是什么”。

以下是在产品页面上成功显示客户评论的两个重要准则：

明确区分正面和负面评论仅仅提供评论是不够的，用户希望并且需要查看评论摘要以了解产品的整体质量。用户需要能够快速找到正面和负面评论，以了解其他客户所说的最好和最差的评论。用于排序或过滤评论的工具也经常使用。

提供有关审阅者的相关详细信息用户了解有关发布审阅者的人的一些信息也很有帮助。例如，评论者的年龄、体型、产品使用情况或其他相关详细信息。

用户不需要查看整个用户个人资料，但在确定评论是否相关且适用于用户的情况时，基本信息会派上用场。

Macys.com 上的一位购物者根据产品评论来决定在网站上买什么，谈到书包评论时说道：“我喜欢这个，因为作者和我同龄。我想知道我这个年纪的人在做什么“我想，因为他们可能有相似的生活方式。就像一个23岁的人，他们为什么用这个包，为什么喜欢这个包，原因可能和我的很不一样。”

由于一些购物者怀疑评论者是否诚实，网站可以通过指示评论何时已被网站验证来帮助建立信任。

开始购买流程产品页面是用户决定购买产品并将其放入购物车的关键区域。用户必须知道他们的产品选项是什么以及如何选择它们。

为了帮助用户开始购买过程，产品页面必须：

解释每个项目的变化用户必须理解每个选项—— 的含义，无论是颜色、大小、内存量还是任何其他项目特征。这些选项也需要简单，以便用户可以轻松选择他们想要的项目。

描述产品库存如果产品没有各种颜色或尺寸的库存，这一点尤其重要。用户应该知道哪些商品缺货，而不必等到将商品添加到购物车后才发现缺货或已售完。

将商品添加到购物车后，提供清晰的反馈，将用户引导至购买流程的最后一步，即将商品放入购物车。令人惊讶的是，有多少次购物者因为不知道购物车中是否有商品而遇到问题。

缺乏反馈可能会导致许多问题，一些用户认为他们已经添加了项目，但实际上他们还没有添加。在其他情况下，用户没有意识到他们已经添加了商品，因此他们一次又一次地添加商品，最终导致购物车中出现多个商品。更糟糕的是，一些用户来到购物车时以为里面装满了他们想要的商品，结果却发现购物车是空的、有重复的商品，或者只包含他们想要的商品的子集。

更好的方法是显示一个突出的持久窗口或层，通知用户该项目已被添加，或者将用户带到另一个页面以确认该项目已成功添加。当用户将商品添加到购物车时，Chewy.com 会将用户移动到插页式页面。在此页面上，用户可以确认已添加正确的商品，并可以继续结帐或查看购物车。

将商品添加到购物车后，Chewy.com 会显示一个转换页面。从那里，人们可以确认已添加正确的商品，并直接结账或查看购物车。转换页面还应包含一个“继续购物”按钮，以便用户在当时尚未准备好结账时不必使用浏览器的“后退”按钮（Chewy.com 不包含此类链接） ）。

结论购物者可以在产品页面上确定产品是否满足他们的需求。为了取得成功，电子商务网站必须首先进行研究，以确定客户对其产品的问题。

设计师应该使用描述和图像来回答用户的问题，帮助他们比较物品，并使人们能够尽可能快速、轻松地开始购买过程。

原文地址：https://www.nngroup.com/articles/ecommerce-product-pages/

本文翻译自Nielsen Norman Group 高级用户体验专家Katie Sherwin 的《电子商务产品页面用户体验指南》。

本文由@海外设计参考翻译发布在《人人都是产品经理》上。未经许可禁止转载

题图来自Unsplash，基于CC0协议