在电子商务中,产品页面对网站的成功至关重要。客户需要有足够的信息来进行知情的购买决定。产品页面或产品详细信息页面是用户决定是否购买的内容。该页面必须包含完整的产品信息,以简单的方式提供教育和通知用户产品。

Online customers can’t touch the product, ask a salesperson a question, try an item on, or use the item before buying. Sure, motivated shoppers may be able to order swatches to feel the material. Or they can ask questions via在线聊天(通常是最后的手段)。最顽固的购物者甚至可能愿意尝试虚拟尝试工具。但所有这些都有很高的interaction cost,需要强烈的动机和愿意在应用程序或网站上度过一大块时间。在许多情况下,客户不想投资那么多时间,因此产品页面需要帮助他们尽可能快地获取信息。这是在商店的最大兴趣,以确保用户的问题得到回答,并且可以准确地表示产品。

差的产品页面有两个主要结果,这两种主要结果都会危害客户与网站的关系:

  1. 购物者无法决定产品是否符合其资格,因此放弃购买。(比抱歉更好。)
  2. Shoppers buy the wrong product, based on inaccurate assumptions, which results in unhappy customers or returned purchases. (The more people have been burned this way, the more they’ll be skeptical and react according to scenario #1 when encountering weak product pages.)

从我们最新分析数百个例子后研究49个电子商务网站, we derived guidelines for how to design effective product-detail pages. This article presents a brief overview of our findings and recommendations.

什么包含在产品页面上

产品页面是具有大量责任的主工作乔布斯待完成,回答客户的问题并让购物者准备购买。因此,网站和应用程序对其正确起来至关重要。精心设计的产品页面具有以下特征,我们已将其分类为必要,良好,和花哨的特色。(Don’t be fooled by the name “fancy” features — these elements can be distracting and disappointing if they aren’t truly necessary or well-executed).

一定有
At an absolute minimum, product pages must have these core components.
  • 描述性产品名称
  • 可识别的图像
  • Enlarged view of image(s)
  • 价格,包括任何额外的产品特定费用
  • Clear product options, such as color and size, and a way to select them
  • 产品可用性
  • 清除方法将项目添加到购物车,并在添加时清除反馈
  • 简洁和信息性的产品描述
很高兴有
购物者通常期望并欣赏产品页面上的这些元素,但并非所有网站和应用程序都需要这些。
  • 客户或专家评分或评论,可供选择或通过评级进行可筛选
  • 其他产品图像(旋转或详细视图,使用的产品的动画图像)
  • 产品视频
  • 在产品图像上缩放或平移功能
  • 相关产品建议
  • Wishlist or registry tools
花哨的特色
这些可能对某些产品有价值,但是只要if they are flawlessly executed with high usability用户的实用程序。
  • Virtual try-on (for example, via photo upload or增强现实)
  • 客户照片或视频评论
  • 元数据和高级过滤的评论
  • 经常性或订阅购买选项
  • Product customization tools
  • 360°照片
  • Step-by-step how-to videos or animations

Anticipate and Answer Product Questions

购物者正在寻找产品页面来回答其所有产品问题。在我们的研究中,唯一一点关注产品页面的参与者就是那些已经了解他们想要的确切产品的人。即使是那些product-focused shoppersneeded the product page to confirm that they had found the correct item.

Many sites offered insufficient product information, which left users with unanswered questions and not enough information to make purchase decisions. While it is impossible to know every question someone may have about a product, some sites neglected to offer even basic product information.

One common concern about shopping online was having to return the item. When sites fully described products, users were likely to buy the correct item and were confident in their purchases. They didn't worry about potential returns. Effective产品页面应描述产品有文字和图像:

  • 完成,但不是罗嗦或蓬松。用户不寻找营销绒毛,但对于产品的实体描述,如何使用它,它看起来像什么,它的所作所为。用户在线阅读时通常浏览文本, 读more at the beginning of a description than at the end并且更多在线的开始时比一行的结尾。不要浪费前几行的产品描述 - 获得立力。

    描述还应解释用户不太可能知道的任何条款。例如,城市展示网站上的一些物品被标记为城市更新再生。Product details explained what this label meant:每件衣服都是用手更新所以你收到的物品的颜色会有所不同,音调+从这里看到的物品的磨损。
    产品描述在移动网站上
    A product description on Urban Outfitter’s site included a section called “关于城市更新再生“这有助于解释这一点没有两个完全相同
  • 使用图像和/或视频来回答问题。产品图片设置用户对他们正在选择和购买产品的期望。图像和视频应与描述一起工作,以完全了解产品。一个产品视图很少充足以回答用户的问题。用户感谢提供多个或动画视图的网站,包括在使用中或上下文中或在上下文中或上下文中的旋转图像,详细信息,放大图片和图像。

    EBags上的用户正在考虑基于类别页面上的图片的手提袋。当她点击了完整的产品页面时,她说:“我想知道内部的样子。”当她到达产品页面时,她说,“哦,我们走了!这看起来很好!它有2侧口袋。“然后,她回到了类别页面并选择了她喜欢的其他袋子,立即点击产品页面并查看内部和详细的图片。她说了另一个包,“它的衬里很好,它有这种方便的侧拉链。”她在没有阅读产品描述的单词时挑选了袋子。
    Inside an open tote bag
    eBags.com上的购物者依赖于手提箱和公文包的详细图像,以确定哪些袋子最适合他们的需求。

Help Users Compare Products

用户frequently compared items on a site and wanted to see the same information about each item they were considering. Consistent information about comparable products was key. The display of information affected how easy it was to compare items as well. Some sites varied the page design or information available for products, forcing users to hunt for the information they needed.

购物者需要在三个不同的水平上可靠的信息:

  1. 产品变体。购物者考虑物品的选项,例如尺寸,颜色或味道,预期与所有变体都有相同的信息。

    一项研究参与者对Adagio.com上的产品规模不一致的信息感到沮丧。该网站很好地告诉用户,样本大致可以大约有多少杯茶。但是,它没有相同的尺寸。相反,它列出了每杯的成本,因此用户可以根据价格评估选项。这是有帮助的,但不一致的不一致刺激了用户。她说,

    “在您订购时,在袋子上,对我有所帮助的是,在样本下,它指出了多少尺寸的杯子。但在其他人下,没有提到多少杯子。你留下了假设。但如果你实际上可以了解多少杯子,那就很有帮助。它不在那里。它在样品下表示,而不是另一个。“
    带有样品,3oz,16oz和茶袋的选项表的移动产品页面
    用户赞赏地,Adagio的网站表明了可以从样品大小进行多少杯茶,但希望它对较大的产品尺寸相同。
  2. Product category。客户购买一种产品类型,预计该网站横跨品牌和型号显示出类似类型的细节。例如,看着洗衣机的购物者希望能够比较有关容量,它会占用的空间的信息,以及可用的清洁周期的类型(如精细,生态和快速循环)。用于数据重型规格,比较表may be the best way to present this kind of information.
  3. Site-wide product page.通常,随着人们在网站内移动页面到页面,他们期望页面look and feel consistent。It’s one of the用户界面设计的十个启发式。With product pages, customers expect that the product page for a vacuum will look similar to the page for a pair of home speakers. It’s fine for the amount and type of information on each page to vary by type of product, but the look and feel, access to site-wide navigation, and search should all be consistent.
  4. Competitors’ product page.It’s worthwhile to make an effort to understand what information users might see on your竞争对手的网站并提供有关产品页面的相同信息。例如,CuftandNeedle.com和Casper.com的客户比较床垫,但只有Casper的网站突出显示产品页面上的免费送货。他解释说,“Casper有100个夜晚,免费退货或皮卡,免费送货。因此,簇绒和针头之间的价格差异,这可能会下降到运输。“然后他切换到他的浏览器标签,其中Tuft&针的网站已开放:“我必须进一步进入Tuft&Reder上的购买过程,看看他们的运费是否不含免费。好的,所以我选择了女王, add to cart, and oh, shipping is free.”
    在图片缩略图下面列出的“免费送货和免费退货”
    Casper的页面提到了产品页面上的免费送货。用户注意到在评估床垫价格时将其考虑在内。
    购物车面板列表小计数器免费送货
    与Casper的网站相比,Tuft&针的网站要求用户向购物车添加床垫以找出运输是免费的。

最后,产品页面在他们展示时对购物者有帮助相关或相关产品的建议。These suggestions helped users discover product alternatives they may not have thought to look for otherwise. Even a single category of highly relevant recommendations, such as您可能还喜欢or socially informed recommendations such as购买该产品的客户还购买了被赞赏。使用警告并提供高度相关的建议,因为在产品页面上显示了太多建议可以分散或模糊重要的产品信息。

Show Customer Experiences — Even the Bad Ones

即使是最完整的产品描述仍将留下一些未答复的用户问题。其他客户或专家的产品评论将为网站带来另一种声音,进一步深入了解产品。

用户经常使用产品审查,收集有关潜在购买的更多信息。在许多情况下,这些评论应答了用户所拥有的确切问题,这通常与产品的使用有关。产品描述可以描述产品特征,但产品评论可以提供对产品使用的洞察力。

Fossil.com上的购物者阅读SmartWatch的混合点评。他说,“有人说橡胶表带非常难以使用。别人说表带是廉价的,就像孩子的手表一样。但后来别人说这些材料很棒。“最终,尽管关于该手表的负面评论,但积极的审查足以说服他继续考虑手表。他离开了评论并返回产品功能,规格和产品图像。

四个移动产品评论,并排
Fossil的移动网站上的用户发现了对智能手术有用的混合评论。积极的评论超过了负面评论。

购物者预计将获得强有力的评论,包括积极和负面评论,并迅速浏览。我们仍然始终如一地观察希望首先跳过否定审查的用户,以便看到“该产品可能的最坏情况是什么”。以下是产品页面上成功客户评论部分的一些顶级指南:

  • 在正面和否定评论之间明确区分。简单地提供评论是不够的。用户希望并需要查看评论的摘要,以了解产品的整体质量。需要能够快速找到有利和否定评论的用户,看看最好和最糟糕的其他客户不得不说。频繁使用或过滤审查的工具。
  • 提供相关审查者的详细信息。It was also helpful to users to know a little information about the people posting the reviews — for example, the reviewer’s age, size, use for the product, or other relevant details. Users didn’t need to see an entire user profile, but baseline information came in handy when determining if the review was relevant and applicable to the user’s situation.

    Macys.com上的购物者使用的产品审查来决定网站上购买什么。她说审查了一个包,
    “我喜欢这个,因为它有作家的年龄。我想知道我的年龄的想法是什么。因为我在想他们可能有类似的生活方式。就像一个23岁的孩子,为什么他们使用包和喜欢的包可能与我的不同。“

    因为一些购物者怀疑审查人员是否诚实,所以网站可以通过指示何时来帮助建立信任评论已得到验证由网站。

Start the Purchase Process

产品页面是用户决定购买产品并将物品移动到购物车的关键区域。为此,用户必须知道他们的产品选项是什么以及如何选择它们。

为帮助用户开始购买流程,产品页面必须:

  • 解释每个产品变化。用户必须了解每个选项的意义 - 无论是颜色,大小,内存量还是任何其他产品特性。选项的选择必须简单,因此用户可以轻松地选择所需的确切项目。
  • 传达产品可用性。如果可用性因各种颜色或产品尺寸而不同,这尤为重要。用户应该知道项目无法使用,而无需将项目添加到购物车中,只能找出它是延期交货的或售罄。
  • 在添加物品到购物车后提供明确的反馈。将用户移动到购买过程的最后一步是将物品放在购物车中。令人惊讶的是,购物者遇到了多少次遇到问题,因为他们不知道物品是否被放在购物车中。
    反馈不足导致许多问题。有些人认为他们没有添加物品。在其他情况下,用户没有意识到他们已经添加了物品,所以一次又一次地添加了它们,以购物车中的多个项目结束。更糟糕的是,有些用户去推车思考它充满了他们想要的产品,只要找出它是空的,它有重复的物品,或者只包含一些所需产品。

    更好的工作是显示一个显眼的持久窗口或图层通知用户该项目被添加或将用户带到另一个屏幕,该屏幕确认了该项目已成功添加。Chewy.com将用户移动到鸿沟页面时,他们将物品添加到购物车时。从此页面,用户可以确认他们添加的项目是正确的,他们可以继续检查或查看他们的购物车。
    绿色复选标记和文本“添加到您的购物车”旁边的产品图片
    在向购物车添加物品后,Chewy.com将购物者纳入了鸿沟页面。从那里,人们可以确认他们添加的项目是正确的,继续退房或查看他们的购物车。庞特地页面还应包括一个Continue Shopping按钮,让用户不必使用他们的浏览器后退button if they aren’t ready to check out at that time. (Chewy.com did not include such a link.)

结论

产品页面是购物者去确定产品是否适合其需求的地方。为了成功,电子商务网站必须首先进行研究,以确定客户对其产品的各种问题。设计人员应该使用描述和图像来回答用户问题,帮助他们比较产品,并使人们尽可能快速,轻松地开始购买过程。

有关如何设计电子商务产品页面的更多提示,请阅读我们的full report with 85 UX guidelines适用于产品页面。