提高转化率的 13 个电子商务产品页面设计必备品

技术教程 2021年11月7日
1254 0

全球电子商务销售额预计将增长至4.8万亿美元 到 2021 年，您是否应该认真研究如何设计电子商务网站以实现更多转化?

虽然 WordPress 网站的一些基本转换技巧在这里确实适用，但电子商务网站在格式和布局方面通常不遵循相同的规则.

具体来说，我今天想深入探讨什么是高转化率的电子商务产品页面.毕竟，此页面是转化前的最后一步，因此这是您达成交易并将访问者转化为付费客户的最后机会.

如果您尚未建立电子商务网站，请务必阅读我们关于使用 WordPress 规划电子商务商店的综合指南.

电子商务产品页面设计

无法保证您的访问者在访问您的产品页面后会购买任何东西.但在构建电子商务网站时，您的工作是不要给他们任何放弃它的额外理由.

老实说，我认为设计电子商务产品页面最安全的方法是从类似于每个人都已经知道和信任的在线零售商的设计和布局开始.

Amazon eCommerce Product Page
这个页面上发生了很多事情；尽管如此，所有关键的转换元素都存在.

我不是特别喜欢亚马逊网站的外观.我认为类型太小了，太多了，卖家的描述和照片的质量并不总是很好.也就是说，亚马逊的产品页面设计运作良好，因为它布局合理，并且在整个网站上始终如一地应用.因此，当我们研究如何为您的 WordPress 网站构建电子商务产品页面时，我想将其用作一种线框，以便在转换方面实现最佳产品页面设计实践.

在描述设计高转化电子商务产品页面所需的每个基本元素时，我将重点介绍一个网站示例，该示例很好地展示了每一点.如果您从上到下跟踪，您会发现每个元素(可能除了空格之外)都是成功的亚马逊公式的一部分，但是每个站点都找到了一种很酷的方法来对其进行独特的旋转.

1.地址栏

Bean Box eCommerce Product Page
正确的 URL 示例，来自 Bean Box 网站.

您可能不会过多考虑产品页面的地址栏，但这里有一些关于遵循严格公式的说法.以下是您需要的:

  • HTTPS.如果这是一个电子商务网站，这是不可协商的.这也是访问者通常应该在您的网站上遇到的第一个信任标记.
  • 一个简单的结构.因为产品总是存在于路径结构的更深处，所以要专注于保持这些清晰的标签和易于遵循.在 URL 中添加产品 SKU 和其他参考标签只会分散访问者的注意力.
  • 优化的 slug. 在考虑电子商务产品页面的 SEO 时，您的产品页面的焦点关键字应该作为 slug.换句话说，如果您的产品被称为"Bean Box"，那么使用 bean-box 作为 SEO 目的的 slug.

2.空白区域

Apple eCommerce Product Page
在 Apple 网站上用于突出显示产品的空白示例.

最好的电子商务产品页面不一定会塞满大量内容.Apple 已经是极简主义的代名词，因此他们的网页设计会使用充足的空白来构建产品框架也就不足为奇了.以下是您可以从本示例中获取的其他一些空间最小化技巧，以及其他很好地使用空白的电子商务网站:

  • 让产品页面在文字上保持清晰，并在各种元素(如下所述)之间留出足够的间距，以帮助客户一次关注一个关键细节.
  • 在产品照片和说明后面使用纯色背景(最好是白色).它有助于将注意力集中在产品上.
  • 如果有帮助，请不要在产品页面上放置侧边栏.
  • 当您的产品显示超过三或四个图像或视频时，使用快速且功能丰富的图库插件以减少使用的空间量.

3.导航

Costco eCommerce Product Page
Costco 做得很好的面包屑导航示例.

作为消费者使用电子商务网站的难点之一是导航.当然，如果有搜索栏，您可以随时输入您想要的确切产品(如果您知道它叫什么)；否则，您需要多次点击才能从原始搜索查询中回溯您的步骤.

作为设计师，您可以使用产品页面顶部的面包屑导航来简化访问者需要完成的工作.毕竟，他们已经对这种产品或产品类型感兴趣，对吗?由于面包屑会显示导致产品出现的所有类别和子类别，因此这是让他们返回到先前步骤的理想解决方案，因此他们不必重新开始搜索.

4.产品图片和视频

Bellroy eCommerce Product Page
Bellroy 在其图库中包含照片和视频的混合.

我会说十分之九(甚至可能更多)，您会在页面左侧找到产品图片.当你考虑它时，这是有道理的.如果您使用从左到右书写的语言开发网站，客户的眼睛会自动转到页面的左上角(产品照片所在的位置).

这就是为什么您不能吝啬为您的电子商务网站制作照片或视频的原因.这是访问者对该产品的第一印象，它实际上可能会影响他们的购买决定.

那么，您可以做些什么来确保您正确使用了产品图像?

  • 首先，安装一个优化插件，比如 Smush Pro.您要将非常大的媒体文件上传到您的网站，并且您不想在此过程中影响加载速度或图片质量.
  • 切勿包含模糊或低分辨率的图像或视频.
  • 如果图片没有以最佳方式为您的产品构图，或者不是对其的准确描述(即太讨人喜欢)，请不要包含它.
  • 由于客户无法事先试用产品，请上传从不同角度或模特使用时展示的各种图片.
  • 请勿在此处使用宣传产品视频；相反，请使用实际展示产品的视频.
  • 此外，如果您的产品有不同的颜色或尺寸，也需要在此处显示.处理此问题的最佳方法是在变体更改时进行这些更改(请参阅下面的相关信息).
  • 如果您已经能够收集用户生成的内容，请将它们包含在此处(当然，在获得用户许可的情况下).
  • 对于可以从 360 探索中受益的产品，请考虑使用虚拟现实插件.

5.产品名称

Bose eCommerce Product Page
Bose 产品名称是品牌名称与清晰标签的完美结合产品.

就产品名称而言，您越清楚产品是什么越好.这并不意味着写出三行产品名称，就像您有时在亚马逊上看到的那样，以夸张的细节描述产品:"产品 X 覆盆子火红、防水、耐用、轻巧、尺寸小到大号，美国制造，等等等等."只需写一个合理且独特的产品名称即可.

此外，在产品名称的措辞方面，您应该遵循与 WordPress 网站上的任何其他页面相同的 SEO 命名约定.这意味着在名称中包含焦点关键字并将其限制为 55 个字符或更少(用于搜索目的).

6.价格

American Eagle eCommerce Product Page
American Eagle 展示了一种通过价格立即吸引访问者注意力的好方法.

产品的价格应该是您的访问者在产品名称之后看到的下一个内容.即使您通过精心编写的描述和出色的产品页面让他们完全投资于产品的价值，过高的价格也可能会破坏交易.所以，把它放在前面和中间.

此外，如果您提供特别折扣，请将其放在原价旁边——不要害怕使用明亮醒目的颜色来引起人们对节省成本的注意.

7.评分和评论

Leesa eCommerce Product Page
产品评级的简单显示如何脱颖而出并提供帮助的一个很好的例子"销售"产品，无需多言.

尽管实际的客户评论或客户推荐不应位于产品页面顶部附近的任何位置，但星级和评论数量应该.社交证明是电子商务领域中非常重要的一部分，因为客户无法轻松地事先测试产品，因此这些需要放在此处的某个地方——更高的在页面上，更好.

当然，星级评定对于您提供的产品类型可能并不总是有意义.如果它是一种商业服务，推荐会更有意义.如果是酒店或餐厅预订，那么您可能希望选择这样的方式，告诉访客有多少其他志同道合的消费者正在考虑购买:

Priceline eCommerce Product Page
Priceline 以不同的方式进行社交证明，但它适用于这种电子商务风格.

请记住，您的产品有可能一开始就不会收到正面评价，这没关系.这就是为什么在产品描述下方提供实际的报道.访问者可以向下滚动并自行阅读投诉，以决定它们是否有效，并查看背后的公司是否倾听并回应这些投诉.

8.产品说明

Harry's eCommerce Product Page
Harry's 包含了一个简洁的描述，重点是客户实际上将从产品.

正如我之前提到的，最好让您的产品页面在文字上保持清晰，尤其是首屏.我建议在描述中使用非常简短的、价值驱动的消息传递.当然，您应该简要解释一下产品是什么，但在这里花点时间实际销售产品很重要.这意味着突出优势并让客户有理由查看页面的其余部分.

9.变化

Ikea eCommerce Product Page
这些变体最好的一点是，当您选择不同的变体时，照片在左侧更新以匹配它们.

并非您在线商店中的每种产品都会提供可供客户选择的变体.但是，如果它们确实存在，让他们从可用选项中进行选择变得非常容易，并提前让他们知道哪些选项不可用.没有什么比找到他们想要的产品，选择尺寸，然后点击 CTA 却发现该产品不再存在于该变体中更让客户烦恼的了.

因此，在设计此元素时，首先要使其易于使用.如果您有五个以上的选项可供显示，下拉菜单就很棒.然后，当然，使用一个明确的指标来告诉客户哪些变体是可用的.将文本变灰与完全删除不可用产品的变体一样有效.

Johnny Cupcakes eCommerce Product Page
Johnny Cupcakes 使用灰色文本来显示售罄的版本.

而且，由于我正在谈论这个主题，这是激发访客紧迫感的好方法.假设某个受欢迎的商品很快就会以某种尺寸缺货.与其等到它变灰变灰，不如在它旁边贴上一个鲜红色的警告，让访问者知道你的库存不足和/或很快就会补货.这可能会促使更多客户尽快采取行动.

10.号召性用语

Barnes and Noble eCommerce Product Page
Barnes & Noble 将他们的 CTA 放在首位.另外，请注意他们如何使用幽灵按钮来对比此处价值较低的 CTA.

CTA 按钮显然在电子商务转化过程中扮演着重要角色，这就是为什么您不能真正尝试在哪里放置您的号召性用语.当涉及到产品页面时，该按钮需要位于前面和中间.它还需要精心设计、大胆着色，并准确告诉客户点击它时会发生什么.

  • "添加到购物车"会将商品放入他们的购物车，以便他们继续浏览商店.
  • "立即购买"将启动购买流程.
  • "添加到愿望清单"会将产品转储到列表中并保存以备后用.

如果您的产品页面很长，并且您想确保将购买的想法放在首位，您可以使用以下技巧(即顶部粘性栏)让按钮始终显示:

>

Barnes and Noble eCommerce Product Page Scroll
这是一个很好的接触，而不是您经常在电子商务网站上看到的东西.

在此部分中要做的另一件事是在 CTA 附近放置相关的购买详细信息.例如:

  • 预计发货日期.
  • 关于退货和退款政策的简短声明.
  • 与购买相关的任何费用或税费.
  • 保修声明.

11.社交媒体

Poo-Pourri eCommerce Product Page
Poo-Pourri 产品页面上社交图标的简洁外观是一个很好的接触.

理想情况下，您应该在 WordPress 网站的每个页面上都显示社交媒体图标.如果它们尚未存在，请务必将它们放在您的电子商务产品页面上——特别关注对图像友好的平台.这意味着 Pinterest、Instagram、Facebook，甚至 Twitter.这将使您的客户能够轻松地与他人分享他们喜爱的产品.

12.产品特点

Fitbit eCommerce Product Page
像 Fitbit 这样的小工具需要空间来展示它们的技术规格，这个例子看起来很棒.

如果产品描述是您简要讨论产品价值的地方，那么产品功能是您可以深入了解更多技术细节的地方.尺寸规格、保养和维护说明、组装要求、所含零件等应放在此折叠部分内.如果您有很多地方需要覆盖，请使用标签将信息整合到一个空间中，让您的客户不必滚动得太远.

13.相关产品

Pottery Barn eCommerce Product Page
并非每个相关产品部分看起来都一样.对于某些人来说，只需产品图片、名称和星级就足够了.如果您想减少客户的点击次数，这也是一个不错的选择.

使用有关您的产品、常见购买趋势以及客户在您网站上的个人购物习惯的数据，您可以创建一个有用的"相关产品"部分.这是一个很好的机会，不仅可以对他们已经感兴趣的产品进行追加销售或交叉销售，而且也是一种向他们提供替代建议的好方法，以防该特定产品不可行.

使用上述元素完成电子商务产品页面的设计后，不要忘记使用 WordPress 插件来优化其性能.即使您的页面看起来很棒并且您确定了完美的布局，但如果页面加载时间过长或访问者看到安全警告，这可能会让您付出代价.所以，如果你的网站上还没有安装这些，请确保有一个像 Hummingbird 这样的性能优化插件和一个像 防御者就位.

电子商务产品页面优化-最后提示

除了产品页面设计方面的考虑，例如改进布局和确保您的内容充分说明您产品的优点和功能(并与您的公司建立信任)之外，还要寻找实施心理触发因素的方法来引导消费者的注意力添加到购物车按钮.

使用上述方法确定电子商务产品页面设计后，请确保A/B 测试您的页面，看看是否存在是访问者更容易接受的其他元素或布局.亚马逊模式是一个明智的选择.它将产品的详细信息按逻辑顺序排列，将页面保持在可管理的长度，并确保整个网站的结构一致.

标签:

电子商务(6)网站(144)页面(70)
♥赞3

相关文章

发表回复