编者介绍：商品页是帮助用户决定是否购买以及购买什么的地方。页面必须包含完整的产品信息，以便以直接的方式教育和告知用户有关产品的信息。本文作者提出了电商产品页面的UX指南并与大家分享。

本文翻译自Katie Sherwin 的《UX Guidelines for Ecommerce Product Pages》。 Katie Sherwin 是Nielsen Norman Group 的高级用户体验专家。她专门帮助组织利用以用户为中心的设计和战略沟通的原则来实现其目标。

摘要： 在线购物客户依靠产品页面来决定购买什么。通过回答问题、进行比较、提供评论和促进购买过程来帮助他们。

在电子商务中，产品页面对于网站的成功至关重要。客户需要有足够的信息来做出明智的购买决定。产品页面或产品详细信息页面是用户决定是否购买以及购买什么的地方。该页面必须包含完整的产品信息，以直接的方式教育和告知用户有关产品的信息。

在线顾客在购买前不能触摸产品、向销售人员提问、试穿商品或样品。当然，积极的购物者可能会订购样品来感受一下材料。或者他们可以通过实时聊天提问（通常是最后的手段）。最勇敢的购物者甚至可能愿意尝试虚拟试穿工具。但所有这些都伴随着高昂的交互成本，需要强烈的动力和意愿在应用程序或网站上花费大量时间。很多情况下，客户不想花费太多时间，因此产品页面需要帮助他们尽快获取信息。确保回答用户的问题并准确展示您的产品符合您商店的最佳利益。

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

购物者无法确定产品是否符合他们的标准，因此放弃购买。 （安全总比后悔好）购物者根据不准确的假设购买了错误的产品，导致顾客不满意或退货。 （越多的人以这种方式烦恼，他们在遇到薄弱的产品页面时就会越怀疑，并根据场景1 做出反应。）在分析了《对49个电子商务网站的研究》 中数百个最近的示例后，我们提出了一个指南关于如何设计有效的产品详细信息页面。本文简要概述了我们的发现和建议。

1. 产品页面中应包含的内容产品页面是承担大量责任和工作的主力，需要回答客户问题并让购物者做好购买准备。因此，网站和应用程序正确执行此操作至关重要。精心设计的产品页面具有以下功能，我们将其归类为“必备”、“必备”和“附加功能”。 （不要被“花哨”功能的名称所迷惑；如果这些元素不是真正必要或执行良好，它们可能会分散注意力和令人失望）。

2. 预测并回答产品问题购物者正在寻找产品页面来回答他们所有的产品问题。在我们的研究中，很少有人关注产品页面，只有那些已经知道自己想要什么的人。即使是那些以产品为中心的购物者也需要产品页面来确认他们找到了合适的商品。

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

网上购物的一个常见问题是必须退货。当网站完整描述产品时，用户可能会购买正确的产品并对购买充满信心。他们并不担心潜在的回报。有效的产品页面应使用文字和图像来描述产品：

内容要完整，但不要罗嗦或松散。用户并不是在寻找混乱的营销信息，而是在寻找对产品、产品的使用方式、外观和功能的可靠描述。用户在在线阅读时通常会略读文本，在行首阅读的内容多于行尾阅读的内容。不要浪费产品描述的前几行—— 开门见山。

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

Urban Outfitters 网站上的产品描述包括一个名为“Urban Renewal Recycled”的部分，它有效地解释了没有两种产品是完全相同的。

使用图片或视频来回答问题。产品图像设定了用户对他们选择和购买的产品的期望。图片和视频应与描述一起使用，以全面了解产品。一种产品视图通常不足以回答用户的问题。用户欣赏该网站提供的多种视图或动画视图，包括旋转图像、细节、放大图像以及使用中或上下文中的产品图像。

eBages 上的用户正在考虑根据类别页面上的图像购买手提包。当她点击进入完整的产品页面时，她说：“我想知道包的内部是什么样的。”当她进入产品页面时，她说：“哦，这里！这个看起来很漂亮！它有两个内袋。”然后，她返回列表页面继续选择自己喜欢的其他包包，并点击进入相应的商品详情页面查看这些包包的内饰等详细图片。 “它的衬里很好，有一个方便的侧拉链，”她谈到另一个包时说道。她购物时没有看任何产品说明，只是看图片做出选择。最喜欢的产品。

eBags.com 上的购物者很大程度上依赖手提包和公文包的详细图像来确定哪些包最适合他们的需求。

3.帮助用户比较产品用户经常在网站上比较产品，并希望看到他们正在考虑的每个产品的相同信息。有关可比产品的一致信息是关键。信息的显示也会影响比较产品的难易程度。一些网站更改页面设计或有关产品的可用信息，从而迫使用户搜索他们需要的信息。

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

产品规格：

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

一位研究参与者对Adagio.com 上有关产品尺寸的不一致信息感到沮丧。该网站很好地告诉用户根据样品大小可以泡多少杯茶。然而，对于较大的尺寸，它却无法做到这一点。相反，它列出了每杯的成本，以便用户可以根据价格评估选项。这很有帮助，但不一致会激怒用户。她说：

“当我订购时，在包装说明上，对我有帮助的是，在样品下方，它说明了包装尺寸可以泡多少杯茶。但在其他情况下，它没有提到多少杯。只是我可以泡一杯茶。”假设。但是知道你可以制作多少个杯子会很有帮助。但事实并非如此。它只在样品下方说明了这一点，没有其他内容。”

一位用户赞赏Adagio 的网站指示可以根据样品尺寸制作多少杯茶，但希望它对于较大的产品尺寸也能这样做。

产品分类：

购买某种产品的客户希望网站能够显示不同品牌和型号的相似类型的详细信息。例如，购买洗衣机的购物者希望能够比较有关容量、所需空间和可用洗涤周期类型（例如精细洗涤、生态洗涤和快速洗涤）的信息。对于数据密集型规范，比较表可能是呈现此类信息的最佳方式。

全站产品页面：

通常，当人们在网站内的页面之间切换时，他们希望页面具有一致的外观和感觉。这是用户界面设计的十种启发式方法之一。对于产品页面，客户希望吸尘器的产品页面看起来与一对家用扬声器的页面类似。每个页面上的信息数量和类型可能会根据产品类型而有所不同，但外观和感觉、站点范围的导航和搜索都应保持一致。

竞争对手产品页面：

值得努力了解用户可能在竞争对手的网站上看到哪些信息，并在您的产品页面上提供相同的信息。例如，一位顾客在TuftAndNeedle.com 和Casper.com 上比较了床垫，但只有Casper 的网站在产品页面上强调了免费送货。 “Casper 提供100 晚试用期、免费退货或提货以及免费送货，”他解释道。 “因此，Tuft & Needle 之间的价格差异可能归结为运输成本。”然后他切换到浏览器选项卡，那里显示了Tuft & Needle 的网站：“我必须进一步了解Tuft & Needle 的购买流程，看看他们是否免费送货。好的，所以我选择Queen Size，然后添加到购物车，哦，免费送货。”

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

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

最后，产品页面向购物者展示相关或相关产品的建议很有帮助。这些建议可以帮助用户发现他们可能没有想过要寻找的产品替代品。即使是高度相关（例如您可能也喜欢）或具有社会影响（例如购买该商品的顾客也购买了它）的推荐也会受到赞赏。请谨慎使用，仅提供高度相关的建议，因为在产品页面上显示太多建议可能会分散注意力或掩盖重要的产品信息。

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

用户经常使用产品评论来收集有关潜在购买的更多信息。在许多情况下，这些评论准确回答了用户提出的问题，通常与产品的使用相关。产品描述可以描述产品功能，但产品评论可以深入了解产品的使用方式。

Fossil.com 上的一位购物者读到了有关这款智能手表的褒贬不一的评论。他说：“有些人说橡皮筋很难用。另一些人说表带制作成本很低，就像儿童手表一样。但其他人则说材料很棒。”最终，这款手表虽然有负面评价，但也得到了正面评价。这足以说服他继续考虑这只手表。他离开评论并返回产品功能、规格和产品图像。

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

购物者已经开始期待包含正面和负面评论的强大评论，并且可以快速浏览。我们仍然不断观察那些想要首先跳过负面评论的用户，以了解“产品可能发生的最糟糕的情况是什么”。以下是在产品页面上成功进行客户评论的一些重要指南：

明确区分正面评论和负面评论：

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

提供审稿人的相关详细信息：

对于用户来说，了解发布评论者的一些信息也很有帮助，例如评论者的年龄、体型、产品用途或其他相关详细信息。用户不需要查看整个用户配置文件，但在确定评论是否相关且适用于用户的情况时，基线信息会派上用场。

Macys.com 上的购物者根据产品评论来决定在网站上购买什么。她谈到书包审查时说：

“我喜欢这个，因为作者和我同龄。我想知道我这个年纪的人怎么想。因为我觉得他们可能有相似的生活方式。像23岁的人，他们为什么会用这个包，为什么喜欢这个包，对我来说可能很不一样。”

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

5. 开始购买流程产品页面是用户决定购买产品并将商品移至购物车的关键区域。为此，用户必须知道他们的产品选项是什么以及如何选择它们。

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

解释每个产品的变化：

用户必须了解每个选项—— 的含义，无论是颜色、尺寸、内存量还是任何其他产品功能。选项的选择也必须简单，以便用户可以轻松地选择他们想要的产品。

传达产品可用性：

如果产品具有不同颜色或尺寸的不同可用性，这一点尤其重要。用户应该知道商品何时缺货，而不必将商品添加到购物车后才发现缺货或售罄。

将商品添加到购物车后提供清晰的反馈：

让用户进入购买流程的最后一步是将商品放入购物车。令人惊讶的是，有多少次购物者因为不知道购物车中是否有商品而遇到问题。

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

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

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

6. 结论购物者可以在商品页面判断商品是否满足自己的需求。为了取得成功，电子商务网站必须首先进行研究，以确定客户对其产品的疑问。设计师应该使用描述和图像来回答用户的问题，帮助他们比较产品，并使人们能够尽可能快速、轻松地开始购买过程。

有关如何设计电子商务产品页面的更多提示，请阅读我们的完整报告以及85 个产品页面用户体验指南。

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

本文由@Hitomi 翻译发布在《人人都是产品经理》上。未经作者许可禁止转载。

题图来自Pexels，基于CC0协议