In ecommerce, product pages are critical to the success of a site. Customers need to have enough information to make an informed purchase decision. The product page, or product-detail page, is where users decide whether and what to buy. The page must include complete product information, educating and informing the user about the product in a straightforward way.

在线客户无法触摸产品,询问销售人员一个问题,在购买前尝试一项项目,或使用该项目。当然,有动力的购物者可以订购样品以感受材料。或者他们可以通过live chat(usually as a last resort). The most intrepid shoppers may even be willing to attempt a virtual try-on tool. But all those have a high互动成本,需要强烈的动机和意愿,花大量时间在应用程序或网站上。在许多情况下,客户不想投入那么多时间,因此产品页面需要帮助他们尽快获得信息。确保用户的问题得到解答,产品得到准确的展示,这符合商店的最大利益。

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

  1. 购物者无法决定产品是否符合其资格,因此放弃购买。(比抱歉更好。)
  2. 购物者根据不准确的假设,购买错误的产品,这导致了不满意的客户或返回的购买。(这种方式烧毁了越多,他们就越持怀疑态度,并且根据遇到产品页面困境时的情景#1越多。)

After analyzing hundreds of examples from our latest研究49个电子商务网站,我们派生了如何设计有效的产品细节页面的准则。本文介绍了我们的调查结果和建议。

在产品页面上包括什么

产品页面是一个工作马与许多责任和责任jobs-to-be-done, answering customers’ questions and getting shoppers ready to buy. So, it’s critical that sites and apps get it right. Well-designed product pages have the following characteristics, which we have categorized as must-have, nice-to-have, and花哨的特色。(不要被“花式”的名字所愚弄 - 如果他们不是真正的必要或执行良好的话,这些元素可能会分散注意力和令人失望的)。

Must Have
在绝对最小值,产品页面必须具有这些核心组件。
  • Descriptive product name
  • Recognizable image(s)
  • 放大的图像视图
  • 价格,包括任何额外的产品特定费用
  • 清除产品选项,如颜色和大小,以及选择它们的方法
  • Product availability
  • Clear way to add an item to the cart, and clear feedback when it has been added
  • 简洁和信息性的产品描述
Nice to Have
Shoppers generally expect and appreciate these elements on product pages, but not all sites and apps need each of these.
  • Customer or expert ratings or reviews, sortable or filterable by rating
  • Additional product images (rotated or detailed views, animated images of product in use)
  • Product videos
  • 产品图像的缩放或平移功能
  • 相关产品建议
  • 愿望清单或注册表工具
花哨的特色
对于某些产品来说,这些可能是值得的,但是在ly如果它们完美地以高可用性执行andutility for the user.
  • 虚拟尝试(例如,通过照片上传或augmented reality
  • 来自客户的照片或视频评论
  • Metadata and advanced filtering in reviews
  • 定期或订阅购买选项
  • 产品定制工具
  • 360° photos
  • 逐步到录像或动画

预期并回答产品问题

购物者正在寻找产品页面来回答其所有产品问题。在我们的研究中,唯一一点关注产品页面的参与者就是那些已经了解他们想要的确切产品的人。即使是那些以产品为中心的购物者需要产品页面确认它们已找到正确的项目。

许多网站提供了不足的产品信息,这使用户具有未答复的问题,并且没有足够的信息来进行购买决策。虽然不可能知道某人可能对产品有关的每个问题,但有些网站忽略了甚至提供基本产品信息。

关于在线购物的一个共同担忧必须退回该项目。当网站完全描述产品时,用户可能会购买正确的物品,并对他们的购买充满信心。他们没有担心潜在的回报。有效的product pages should describe products有文字和图像:

  • 要完整,但不要罗嗦或蓬松。用户不寻找营销绒毛,但对于产品的实体描述,如何使用它,它看起来像什么,它的所作所为。用户typically skim text when reading online, reading在描述的开始时比结束更多并且更多在线的开始时比一行的结尾。不要浪费前几行的产品描述 - 获得立力。

    Descriptions should also explain any terms that users aren’t likely to know. For example, some items on Urban Outfitters’ site were labeled市区重建。产品详细信息解释了此标签的意思:每件衣服都是用手更新所以你收到的物品的颜色会有所不同,音调+从这里看到的物品的磨损。
    Product description on mobile site
    关于城市出口的网站的产品描述包括一个名为“关于城市更新再生,” which helpfully explained that没有两个完全相同
  • Use images and/or videos to answer questions.Product images set users’ expectations about the products they are selecting and buying. Images and videos should work together with the description to give a complete understanding of the product. One product view is rarely adequate to answer users’ questions. Users appreciated sites offering multiple or animated views, including rotated images, details, enlarged pictures and images of the product in use or in context.

    EBags上的用户正在考虑基于类别页面上的图片的手提袋。当她点击了完整的产品页面时,她说:“我想知道内部的样子。”当她到达产品页面时,她说,“哦,我们走了!这看起来很好!它有2侧口袋。“然后,她回到了类别页面并选择了她喜欢的其他袋子,立即点击产品页面并查看内部和详细的图片。她说了另一个包,“它的衬里很好,它有这种方便的侧拉链。”她在没有阅读产品描述的单词时挑选了袋子。
    在一个公开的手提袋里面
    Shoppers on eBags.com relied heavily on detailed images of totes and briefcases to determine which bags were best for their needs.

帮助用户比较产品

用户经常比较站点上的项目,并希望查看有关他们正在考虑的每个项目的相同信息。有关可比产品的一致信息是关键。信息的显示影响了比较物品的容易程度。有些网站各种各样的页面设计或可用的信息,迫使用户寻找所需的信息。

购物者需要三个不同层次的可靠信息:

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

    One study participant was frustrated by inconsistent information about product sizes on Adagio.com. The site nicely told users approximately how many cups of tea could be made by the sample size. However, it did not do the same for larger sizes. Instead it listed the cost per cup, so users could evaluate the options based on price. This was helpful, but the inconsistency irritated the user. She said,

    “On the bags when you order, what would be helpful to me is that under the sample, it states how many cups that size makes. But under the others, there’s no mention of how many cups. You’re left to make the assumption. But it would be helpful if you could actually know how many cups. It’s not there. It’s indicated under the sample and not the other ones.”
    带有样品,3oz,16oz和茶袋的选项表的移动产品页面
    A user appreciated that Adagio’s site indicated how many cups of tea could be made from the sample size, but wished it did the same for the larger product sizes as well.
  2. 产品分类. 购买某一类型产品的客户希望该网站在不同品牌和型号上显示类似类型的详细信息。例如,一个顾客在看洗衣机的时候,希望能够比较洗衣机的容量、占用的空间以及可用的洗衣周期类型(如精致、环保和快速洗衣周期)。对于数据密集型规范,comparison tables可能是呈现这种信息的最佳方式。
  3. 网站范围产品页面。Generally, as people move page to page within a site, they expect pages to看起来一致。这是其中之一ten heuristics for user-interface design。使用产品页面,客户希望真空的产品页面看起来类似于一对家用扬声器的页面。它对每个页面的数量和类型的数量和类型有变化,而是通过产品类型而异,但查看和感受,访问站点范围的导航,以及搜索应该是一致的。
  4. 竞争对手的产品页面。努力了解用户可能会看到的信息是值得注意的competitors’ sites并提供有关产品页面的相同信息。例如,CuftandNeedle.com和Casper.com的客户比较床垫,但只有Casper的网站突出显示产品页面上的免费送货。他解释说,“Casper有100个夜晚,免费退货或皮卡,免费送货。因此,簇绒和针头之间的价格差异,这可能会下降到运输。“然后他切换到他的浏览器标签,其中Tuft&针的网站已开放:“我必须进一步进入Tuft&Reder上的购买过程,看看他们的运费是否不含免费。好的,所以我选择了Queen,加入购物车,哦,运输是免费的。“
    在图片缩略图下面列出的“免费送货和免费退货”
    Casper’s page mentioned free shipping on the product page. Users noticed the free shipping and took it into account when evaluating the mattress price.
    Shopping cart panel lists free shipping below subtotal
    In contrast to Casper’s site, Tuft & Needle’s site required that users add a mattress to their cart to find out that shipping was free.

Lastly, product pages were helpful to shoppers when they showedrecommendations for related or associated products。这些建议帮助用户发现产品替代品,他们可能没有想到以其他方式寻找。甚至单一类别的高度相关建议,如You may also like或社会上通知的建议,如Customers who bought this item also bought被赞赏。使用警告并提供高度相关的建议,因为在产品页面上显示了太多建议可以分散或模糊重要的产品信息。

显示客户体验 - 即使是坏人

Even the most complete product description will still leave some users’ questions unanswered. Product reviews from other customers or from experts will bring in another voice to the site, adding further insight into the product.

用户often used product reviews to gather more information about potential purchases. In many cases, those reviews answered the exact questions that users had, which were often related to use of the product. Product descriptions can describe product characteristics, but product reviews can provide insight into product use.

A shopper on Fossil.com read mixed reviews of a smartwatch. He said, “someone says the rubber strap is extremely hard to use. Someone else says the strap is cheaply made, like a child’s watch. But then someone else says the materials are excellent.” Ultimately, despite the negative comments about the watch, the positive reviews were enough to persuade him to continue considering the watch. He left the reviews and returned to the product features, specifications, and product images.

Four mobile product reviews, side by side
A user on Fossil’s mobile website found the mixed reviews for a smartwatch helpful. The positive reviews outweighed the negative comments.

Shoppers have come to expect robust reviews that include positive and negative comments and that are quick to skim through. We still consistently observe users that want to skip to the negative reviews first, in order to see “what’s the worst this product might be.” Below are some top guidelines for a successful customer-reviews section on a product page:

  • Clearly differentiate between positive and negative reviews.简单地提供评论是不够的。用户希望并需要查看评论的摘要,以了解产品的整体质量。需要能够快速找到有利和否定评论的用户,看看最好和最糟糕的其他客户不得不说。频繁使用或过滤审查的工具。
  • 提供有关审阅者的相关细节。用户还有帮助用户了解有关发布评论的人民的一些信息 - 例如,审稿人的年龄,大小,产品使用或其他相关细节。用户无需查看整个用户配置文件,但在确定审查是否相关并适用于用户的情况时,基线信息在派上友好。

    A shopper on Macys.com used product reviews to decide what to buy on the site. She said of a review of a bag,
    “I like this because it has the age of the writer. I want to know what a person my age thinks. Because I’m thinking they might have a similar lifestyle. Like a 23-year-old, why they’re using the bag and liking the bag might be very different than mine.”

    Because some shoppers doubt whether reviewers are honest, sites can help establish trust by indicating when评论已得到验证by the site.

开始购买过程

The product page is the key area where users decide to purchase a product and move the item to the shopping cart. To do so, users must know what their product options are and how to select them.

To help users begin the purchase processes, product pages must:

  • Explain each product variation.用户必须了解每个选项的含义-无论是颜色、大小、内存量还是任何其他产品特性。选项的选择也必须简单,这样用户就可以轻松地选择他们想要的项目。
  • 传达产品可用性。This is particularly important if availability differs for various colors or sizes of the product. Users should know when items aren’t available, without having to add an item to the cart only to find out it is backordered or sold out.
  • 在将项目添加到购物车后提供明确的反馈。The final step in moving a user to the purchase process is putting the item in the cart. It was surprising how many times shoppers ran into problems because they did not know whether an item had been placed in the cart.
    反馈不足导致了许多问题。一些用户认为他们已经添加了项目,而他们没有。在其他情况下,用户没有意识到他们已经添加了商品,所以一次又一次地添加它们,结果购物车中出现了多个商品。更糟糕的是,一些用户去购物车以为里面装满了他们想要的产品,却发现里面是空的,有重复的商品,或者只包含了一些他们想要的产品。

    What worked better was to either display a conspicuous persistent window or layer notifying the user that the item was added or take users to a different screen which confirmed that the item was added successfully. Chewy.com moved users to an interstitial page when they added an item to the cart. From this page, users could confirm the item that they added was correct, they could proceed to check out, or view their cart.
    Green checkmark and text
    After adding an item to the cart, Chewy.com navigated shoppers to an interstitial page. From there, people could confirm the item that they added was correct, proceed to check out, or view their cart. Interstitial pages should also include a继续购物按钮,让用户不必使用他们的浏览器后退按钮如果他们还没准备好在那个时候签出。(Chewy.com没有包含这样的链接。)

Conclusion

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

For more tips on how to design ecommerce product pages, read our完整的报告包含85 UX指南适用于产品页面。