你的产品页面是你在线商店的收入驱动器。

一个执行良好的产品页面设计可以极大地改变你的业务。

与此同时，一个设计不当的产品页面可以扼杀它。

在本指南中，您将学习如何创建一个产品页面设计，从而销售更多的产品，创造回头客，并使您的在线商店向更好的方向发展。

继续读下去。

一个面向电子商务品牌的营销自动化平台发现，只有8% 的产品页面流量转化为销售。

这仅仅是25个人中的2个。

但这并不是这项研究的有趣之处。

是这样的:

年收入超过10万美元的在线商店的盈利比年收入低于10万美元的在线商店的盈利要高得多。

(“ PCR”是“产品页面转换率”)

年收入超过100万美元的店面的 PCR 值略高于年收入10万美元的店面。

不同之处在于，每年100万美元的在线商店获得了更多的流量。

但是，对于一家年收入超过100万美元的商店来说，9% 的 PCR 是非常低效的。(想想所有被浪费的营销资金!)

看看下一栏。

一些“独角兽”商店的转化率接近50% 。

这意味着几乎有一半的人在他们的页面上购买了东西。

让我们铭记这一点。

如果你的产品页面转化率从9% 上升到50% ，你的业务会发生怎样的变化？

如果你的销售额是原来的5倍，你会投资什么？

本指南的目标是帮助你到达那里。

我们发现提高转化率可以归结为几个关键因素:

本指南中的策略将帮助您改进消息传递，建立信任，并减少单击“添加到购物车”的摩擦

继续读下去。

即使是建在劣质地基上的漂亮建筑也会倒塌。

你的产品页面设计ーー你如何安排你的页面ーー和它的内容一样重要。

为什么？

因为人们以特定的方式浏览页面。如果最重要的东西不在他们的视线范围内，你就把钱放在桌子上了。

在这一章，你将学习如何创造一个电子商务成功的蓝图。

人们如何浏览产品页面

早在2006年，尼尔森诺曼集团就发现人们以 f 形的模式浏览网站。

像这样:

(看看如何描绘每个图像上带有红色的 f 形状?)

这意味着左上方就是你的钱的地方: 那是我们的眼球最先落地的地方。

这种阅读模式是所有网页设计的基础，包括你的产品页面设计。因为地理位置很重要，所以你要把重要的元素放在你确信消费者会看到的地方。

高转换率产品页面设计的5个部分

你的页面应该包括哪些部分？

当然是产品的详细信息ーー但那里应该有什么? 屏幕上还应该有什么？

在本章中，我们集中讨论最佳实践。您将了解产品页面设计的标准组件是什么，以及如何最大限度地利用每个组件。

第一部分: 产品详情

第二部分: 附加细节

第三部分: 相关产品

第四部分: 社会认同

第五部分: 市场推广/商业

第一部分: 产品详情

最好的产品详细信息部分包括产品图像、任何相关的产品信息和添加到购物车按钮。

在产品页面设计方面做得很好:

注意一些关键的惯例:

1. 图片在左边，文字在右边

像几乎所有的电子商务商店一样，Calpak 遵循亚马逊的布局: 图片在左边，文本在右边。 

2. 遵循 f 型模式

人们的扫描方式是 f 形的。这意味着图像的顶部ーー所有的方向ーー是视觉上最突出的部分。因此，您应该将您的标题放在坚持最佳实践的位置。

下面是 f 模式在这张图片上的工作原理:

我们不会立即从产品图像中看产品。

卡尔帕克明白标题是这个公园最重要的部分。这就是为什么他们把它放在你的眼睛首先遇到的东西之一。

3. 产品细节符合图像的形状

卡尔帕克战略性地使用手风琴作为他们的产品页面设计的一部分，把文字收起来，这样它就不会溢出和超过图像的高度。

这样可以保持页面整洁，并且在各部分之间建立清晰的分隔。

产品细节只是最直接相关的细节。

以下是赫歇尔提供的产品细节分析:

名称: 你们产品的名称。

描述: 产品的简要描述。

定制: 如果有定制选项，把它们放在这里。

CTA: “添加到购物车”按钮。

社会认同: 赫歇尔把社会认同放在 CTA 旁边，以帮助建立品牌和购物者之间的信任。

第二部分: 附加细节(可选)

为了保持产品页面设计的简洁，一些公司在手风琴和选项卡出现之前，会将附加的细节和规格信息整理出来。

在 Smoko 上，人们可以在描述、特性列表和更普通的产品规范之间切换。

这样可以避免产品详细信息部分变得过于庞大，也可以使用购物车按钮。

在 zacharyprell 的产品页面设计中，购物者可以阅读简短的产品说明。为了防止屏幕太长，扎卡里 · 普雷尔将额外的规格压在手风琴下面。想要获得更多信息的购物者可以扩展这个标签。

Briogeo 在产品详细信息部分使用选项卡，以避免产品页面设计变得混乱。

 

第三部分: 相关产品

您总是希望购物者点击并查看商店中的其他商品。

(这就是所谓的“交叉销售”)

这就是你的相关产品部分的作用。

有时候这很简单，就像《光滑进化》(EOS)所做的:

但是一个更好的方法是在你的页面上展示产品的补充内容，就像 Zachary Prell 所做的:

当我们设计 Briogeo 的产品页面时，我们决定展示一些补充页面销售的产品的项目。

以补充为中心的设计使购物者更容易选择与页面主要产品相匹配的商品。

当然，这改善了购物体验… … 但也增加了 Briogeo 的平均订单价值。

更大的转换意味着利润。

第4部分: 社会认同和用户生成内容

社会证明是最强大的工具之一，在你的支配。

为什么？

因为一个关键的营销原则:

像我们这样的人会做这样的事。

猴子看，猴子做。

(不要叫你的客户为猴子，只是为了说明一个观点。)

当你的理想客户看到其他人像他们一样喜欢你的产品，你还需要什么？

这一部分可以尽可能的简单，看看无花果中的这个例子:

没有图片，没有颜色，只有星星，日期和文字。

仍然有效。

(尽管我们不建议给人们在没有确认他们确实购买了产品的情况下离开评论的选择权。)

第五部分: 市场推广/业务(可选)

即使你没有在这个页面上做销售，这并不意味着你必须永远失去这个潜在的客户。

使用这一部分作为一个机会，抓住你的访客的联系信息(通常是一个电子邮件地址)。即使他们什么都不买，你仍然可以给他们发送相关信息和市场信息。

简单的解决办法是在页面底部添加一个 opt-in 选项。

Nice Laundry 使用一个简单的栏(甚至没有一个完整的栏)来推销(我们猜测是一双特别版的奖励袜子) ，并让你订阅他们的时事通讯。

这没什么，虽然不是很出色，但总比什么都没有强。

Ouai 甚至没有提供任何东西——他们只是含糊地说了一句“随时更新”

这几乎肯定比 Nice Laundry 的做法更糟糕ーー这仍然是一个模糊的提议，但他们并没有提供任何动机让你告诉他们你的电子邮件地址。

粘性组件如何保持重要信息在视图中

在你的产品页面设计中，有一些东西你需要一直保留在视图中。

为什么？

有时是为了建立信任，或者让购物者更容易找到问题的答案。

其他时候，这是因为你想保持在屏幕上的关键元素，如一个特别优惠或购物车按钮。

帮助按钮

如果你想把任何东西弄得粘粘的，应该是一个帮助按钮。

为什么？

2012年，eConsultancy 和 BoldChat 报告称，31% 的在线购物者表示，他们更有可能在实时聊天体验后进行购买。

– 有多大可能性?-还不清楚。

但是我们会抓住这个机会。

MeUndies 的订阅框页面右下角有一个粘贴的实时聊天按钮:

如果购物者有一个产品页面设计没有回答的问题，他们可以使用实时聊天来得到这些问题的答案。

信任? 建立。

摩擦力? 没了。

的粘贴帮助按钮提供了常见问题解答和实时聊天。

包括一个常见问题可以减少你的现场支持的负载，它也节省了你的访客宝贵的购物时间。

记住: 建立信任，减少摩擦。保持你的帮助按钮(和在线聊天)始终在视野中是一个伟大的方式来做这些事情。

添加到购物车按钮

当你向下滚动页面时，Boll 和 Branch 会在导航栏中添加一个新的栏。

尽管存在视觉缺陷，但将 CTA 保持在视图中意味着保持购物者的选择权开放。Boll 和 Branch 在产品页面设计方面做得很好的一件事就是缩小可选项的数量。

选择是让人失去动力的; 如果你打算像这样引入棘手的 cta，最好把它作为页面上唯一的选择。

你可能忽略了你的导航。

但是导航是产品页面设计中最重要的部分之一。

如果没有一个简单的方法来遍历网站，搜索他们正在寻找的东西，检查他们的购物车，你的理想客户可能会迷路。或者更糟—- 沮丧。

在本章中，你将学习如何构建一个导航，使购物者能够轻松找到他们正在寻找的东西。

How Menu Items Standardize the Shopping Experience

菜单项如何标准化购物体验

主要的导航是购物者如何浏览你的商店，你想展示一些必需品而不是让他们有太多的选择。

如果你有一些剩余的空间，你可以添加链接到网页，帮助你把浏览器变成购买者。

看看 Briogeo 的菜单:

链接，如突出的“头发问答”按钮帮助 Briogeo 引导访客到特定的网页。

购物者参加一个测试并接受个性化产品推荐:

当然，这属于导航的一部分ーー它可以帮助你为人们提供最好的产品！

但这并不是唯一的方法。

您还可以使用导航来复制店内体验，并重新创建在店内不同区域的感觉。

我们喜欢 Revolve 将他们的导航分割成男人/女人的衣服:

注意导航项目是如何根据你要购买的衣服类型而变化的？

这样可以避免购物者误入错误的区域。

使用智能搜索引擎为畅销书提供搜索渠道

你的导航应该有一个搜索栏，可以帮助购物者快速找到他们想要的东西。

Briogeo 的搜索栏会根据你在搜索栏中输入的内容(如果有的话)来推荐项目。

点击搜索图标，然后画一个空白，这种情况并不少见。建议给了他们一个出发点。

(这也有助于 Briogeo 推广特定产品ーー特别是卖得好的产品。)

优化您的视图购物车按钮的最大转换

购物者不断地查看他们的购物车。

你不希望潜在的买家离开你的产品页面，因为他们想查看他们的购物车。

相反，设计你的购物车视图，使其覆盖产品页面设计，但不导航购物者远离产品。

如果你让用户保持在你的产品页面上，你就让他们保持浏览模式。

把他们直接带到结账页面并不会强迫他们进入结账过程，但是这确实会把他们带出浏览过程。

高质量的图片是产品页面设计中最重要的部分之一。

显然，你的产品图片对你的产品页面设计有很大的影响。

但是产品演示视频、社交媒体图片和作为社会证明的众包内容会影响你的销售量。

在本章中，你将学习如何创建能够产生最大影响的视觉效果。

如何通过改变图像大小来提高感知价值

照片尺寸影响人们对产品价值的认知。

研究所在2016年对此进行了研究。他们将产品分为“搜索商品”(基于规格的商品，如电脑)和“体验商品”(服装、美容产品)。

更大的图片让搜索商品看起来更有价值。

对于体验商品来说，恰恰相反: 更小的图片和更多的空白区域使得体验商品看起来更有价值。

一张照片的大小会对你的产品页面设计产生多大的影响？

当我们设计 Ironside 计算机的产品页面，我们使用大，霸气的产品图像。

但是当我们为 Mission Stone & Tile 创建产品页面设计时，我们知道基于体验的产品(比如石头和瓷砖)更适合使用更小的产品图片和更多的周围空白。

如果你销售的产品介于“规格驱动”和“体验驱动”——类似耳机——之间，你可以在产品页面设计中尝试这两种方法。大尺寸的产品图片和大量的空白。

显然，这对苹果公司是有效的。

通过调整图像大小来鼓励参与

研究所研究了图像大小如何影响人们花在产品页面设计上的时间。

研究结果与之前的研究结果一致。

具有大图像的体验产品比那些具有小图像的产品获得的参与度更低。

具有大图像的规格产品比具有小图像的产品更受欢迎。

(值得注意的是，这些影响在统计学上并不显著，有可能这些发现是偶然的/随机的，仅此而已。)

但是这里有一个警告。

订婚并不是万能的。

尽一切办法，测试，以增加参与度和时间在页面上。这可能是更多的参与导致更好的转化和更少的购物车抛弃。

但是优化参与度不应该是你的目标。

相反，为感知价值进行优化。如果参与度没有跟上，你可能需要做一些调整。

播放视频鼓励消费

如果一张图片胜过千言万语，那么一段视频又有什么价值呢？

还有很多。只要有一个视频(即使没有人看) ，就足以提高你的转化率。

在某些行业，尤其是时尚行业，视频可以在产品销售中发挥关键作用，尤其是在社交媒体上。

视频让购物者想象一件特定的物品在他们身上会是什么样子。超过静态图像，视频捕捉真正的运动。离试衣间很近。

无花果使用一个简短的视频，显示一个模特穿着他们的产品跳舞。

报道说，74% 的消费者通过观看视频来说服自己购买产品。

如果这还不足以成为在产品页面设计中包含视频的理由，我们不知道什么才是。

也就是说，如果视频不是很明显，那就不是好东西。

在这张来自 Peak Design 的截图中，有一段视频ーー但它隐藏在图片库的末尾。

如果消费者只花几秒钟在产品页面设计上，他们不会找到那个视频。

如果他们找不到… 那就没用了。

把你的视频放在前面和中间。

处理销售前的反对用户生成内容

如果你能让你的顾客知道他们喜欢你的产品..。

他们还能有什么其他的反对意见呢？

像我们这样的人会做这样的事。

归根结底就是回答销售前的反对意见。

另一个因素是消费者相互信任多于那些想赚钱的品牌。

可以让消费者在评论中添加照片。这是我们见过的最好的用户生成内容之一ーー不仅评论总体上是正面的，而且你可以从照片中看到这个产品在起作用。

对于他们的评论还有另一个好处: 他们询问顾客关于他们的头发。

然后他们让购物者过滤符合他们头发类型的评论。

把评论变成了一个额外的销售工具。

不错。

产品页面设计中的副本可以像图片一样卖得很好。

是的，你的产品描述很重要，但是你展示的社会证明也很重要。

即使是呼叫操作按钮上的文本也可以戏剧性地改变你的转化率。

在这一章中，你将学习如何写出引人入胜的副本，创造欲望，销售更多的产品。

AIDA:你不知道自己需要的文案公式

You may have seen this clip from Glengarry Ross:

你可能看过这个来自 Glengarry Ross 的视频:

AIDA is a real copywriting formula. And it works.

AIDA 是一个真正的文案公式，而且很有效。

Attention. Interest. Desire. Action.

注意力，兴趣，欲望，行动。

在构建产品描述时坚持这个公式。

看看这个来自 Briogeo 的产品页面设计例子:

产品形象和标题吸引你的注意力。卷发魅力。定义 Shelfie Essentials 套件。

这个描述会立刻抓住(或拒绝)你的兴趣，告诉你这是给谁的: 那些波浪卷发、卷发和卷发的质地。

剩下的描述通过描述好处来创造欲望。这个产品清洁，定义和控制，同时仍然保持运动和弹性，弹性，圆滑，长期持久的卷发。你可以两全其美。

最后，该区域底部的按钮起到了有效的行动调用的作用。

AIDA 无处不在，因为它有效。

最大影响的产品说明格式

研究所研究了人们如何参与产品描述。

他们发现:

• 人们阅读带项目符号的文本多于段落文本
• 文本格式对特殊产品(如 tech)比对体验产品(如服装)更重要

但是核心外卖呢？

你的电子商务产品描述很重要。

还记得我们说过的 f 形阅读模式吗？

如果没有人读你的描述，那么它有多引人注目并不重要。

将你的主要描述保持在4行以下。

使用手风琴，让人们访问细节，没有通过削减。

改变你的产品描述内容，在重要的地方发挥重要作用

But what should your description actually say? How should you talk about your products? What gets people to buy—facts or feelings?

但你的描述实际上应该说什么呢？你应该如何谈论你的产品？是什么促使人们购买ー事实还是感觉？

研究所也对此进行了研究，尽管结果好坏参半。

结果喜忧参半。他们发现，享乐主义的描述使人们认为像咖啡机或搅拌机这样的低端物品更有价值。但人们认为价值1000美元的真空吸尘器更有价值，因为它有一个实用的描述。

这两个发现在统计学上都没有意义，而且他们也没有研究“体验”商品(服装、美容产品、家具等) ，所以你可能在自己的生意中看不到这些结果。

我们建议测试您的电子商务产品说明之间的利益为重点和实用性为重点和衡量您的销售。

社会证明: 火箭式的转变

根据 Yotpo 的数据，评论—- 一种社会认同的形式—- 增加了161% 的总转化率。

毫无疑问，你应该在你的产品页面上包含社会证明。

但是你应该把它放在哪里呢? 它应该说什么呢？

紧挨着紧张点。

看看赫歇尔的这个例子:

把顾客评论放在行动电话旁边，或者放在任何其他紧张的地方，可以减少顾客的恐惧，建立你和顾客之间的信任。

换句话说，它可以极大地提高转化率。

(但是在这个例子中，顾客评论的数量很少表明这个产品卖得不好。要注意，因为有时候这种透明度也会对你不利。)

有时候，在你的客户评价上有创意是值得的，比如展示一星级的评价来避开那些不适合你的人，吸引那些适合你的人:

但是在大多数情况下，你应该展示你的好产品评论。

在完善产品页面的外观和感觉上很容易停滞不前。

但是你的产品页面的视觉效果应该起到一些作用。

引导购物者采取特定的行动。

使页面易于扫描。

突出一个特定的行动。

在本章中，您将学习如何使用商店的视觉效果来最大化产品页面上的购物车点击次数。

Keep reading.

继续读下去。

 

Use Color to Draw Attention

使用颜色吸引注意力

色彩是有趣的，它使我们注意。

看看这两个不同的产品页面设计，一个来自 Evolution of Smooth，另一个来自 Fresh。

即使产品图像中只有“真正的”颜色，黑色和灰色的“添加到购物篮”按钮仍然显眼，因为它是页面上最暗的元素。

与 Fresh 的产品页面设计形成对比:

像 Evolution of Smooth 一样，Fresh 也使用了大部分白色的配色方案。但在这里，“添加到袋子”按钮在视觉上并不突出，因为它与页面上的其他元素的颜色相同。

那么，如何有效地利用颜色来吸引顾客的眼球呢? 这有什么关系吗？

首先，让我们打破某些颜色更有利于转换的神话。有太多相互矛盾的研究证明一种颜色比另一种颜色能更好地转换。

重要的是你如何在你的设计中使用颜色。

看看我们的主页设计:

您应该点击的位置非常清楚: 与绿色背景和白色文本对比的粉色按钮。

扎卡里 · 普雷尔在这方面做得很好:

很明显点击哪里: 巨大的橙色按钮。

这是另一个例子: Dormify。

尽管我们不喜欢按钮在页面上的位置太高，但是粉红色与网站上的白黑色对比鲜明。

使用巧妙的间隔减少摩擦

留白使页面更容易处理。

为什么？

因为我们为了理解信息而组织信息。

这就是所谓的邻近完形原则，它看起来像这样:

注意到右边的行星看起来很明显是分组的，而左边的不是吗？

这就是你希望你的产品页面设计达到的效果。

引入空白使分块过程更加容易。

看看这个来自4moms 的电子商务产品页面设计:

粉色盒子里的所有信息? 那只是一小块。

(这是一个很大的过程!)

你可能漏掉了很多关键信息，比如:

• 产品评论的数量
• 免运费
• 付款计划
• 所有的问题和答案

我们的眼睛直接跳到添加到购物车按钮，跳过了该块中的所有其他信息。

对比一下来自 kiith 的产品页面设计:

在图片和文字周围有大量的空白。你可以直观地对标题、尺寸、添加到购物车按钮、细节等部分进行分组。

在 Kith 的产品页面设计中，摩擦较小，因为信息很容易理解。

因为它的认知要求较少，点击“添加到购物车”感觉不像是一个承诺，因为你的潜在客户不会因为页面的设计而感到压力。

(记住——减少摩擦是你的目标之一!)

动画是反馈。

购物者总是想知道:

我可以点击这个按钮吗？如果我移动到这里，图像会变大吗？如果我有一个问题，我可以扩展这个部分来得到答案吗？

但是动画是如何增加你的收入的呢？

简单。反馈创造了一个无缝的购物体验。

在本章中，你将学习动画是如何改善你的商店的体验… 以及他们是如何让你得到更多的顾客。

鼓励参与动画制作

你可能认为动画是设计虚荣，但动画可以帮助你卖出更多。

首先，动画是一种反馈。你能点击这个按钮吗？那件东西放到你的推车上了吗？这个链接带你到一个新的页面，还是只是滚动到一个新的部分？

看看这个来自《光滑的进化》(EOS)的小动画:

当消费者看到鼠标悬停时按钮的颜色发生变化时，他们明白他们可以点击按钮。

反馈减少了不确定性。

通过出口意向弹出窗口获取新客户

弹出窗口(或 lightbox)非常烦人。

他们在将访问者转化为线索(以及将购物者转化为顾客)方面也非常有效。

扎卡里 · 普雷尔在侵入性的 lightbox 和吸引人的优惠之间找到了一个很好的平衡点，当你试图离开他们的商店时，只显示弹出窗口:

这种弹出式的非侵入式动画让你的在线商店更加有趣。

在这个例子中，zachyprell 推销一个“私人销售”，但你不必这样做。

你可以打折。

或者提供独家内容访问权限。

你可以问一个问题。

关键是这个弹出窗口是退出-意图。

这意味着它不会破坏购物体验。直到购物者表明他们已经准备好走出大门，它才会出现。

用手风琴减少压倒

手风琴——那些遮蔽或显示文本的选项卡式下拉菜单——保持页面整洁，同时让购物者获得他们想要的信息。

Ouai 在他们的产品常见问题部分使用这些。

而 Boll & Branch 使用它们来提供额外的产品细节:

如果你的文本太长(像 Boll & Branch 的) ，手风琴是一个干净和直观的方式给购物者提供他们需要的所有信息，而不会压倒他们。

显然，你的产品页面设计应该卖出你的产品。

但是，那些只是随便看看的人呢? 如果他们现在还没有准备好购买呢？

当他们从你的店里走出来的时候… 他们已经走了，可能永远都走不了了。

在本章中，我们将向你展示如何将失去的潜在客户转化为未来的销售。

 

用弹出窗口交换电子邮件地址

我们已经向您展示了 Zachary Prell 的退出意图弹出窗口。

但这并不是唯一的弹出策略。

同样的道理，当顾客进入你的实体店面时，你可以给他们一张优惠券，在入口处的弹出窗口可以一石二鸟，通过提供派对礼物和收集他们的电子邮件地址。

无花果提供15% 的折扣，如果你注册他们的通讯。(尽管我们确实希望这个人的性别与其背后的性别服装相匹配。)

我们喜欢定制选项: 如果一个女人是为自己购物，她不会想要关于男人衣服的电子邮件—- 发给她，那是垃圾邮件。

这是最简单的方法. . 但提供折扣可能会削减你的利润率。

让我们看看另一个例子。

好洗衣店为你的电子邮件地址提供了一双免费的袜子，原因如下:

1. 它会激励你放弃你的电子邮件地址
2. 如果你在尼斯洗衣店的网站上，你可能正在寻找袜子。寄给你一双免费的袜子可以让你在买之前尝试一下ーー Nice Laundry 打赌你会喜欢这种体验并且想要买更多

(我们不喜欢底部的确认/羞辱。这可不好。这不仅仅是糟糕的市场营销或糟糕的网站设计—- 这是卑鄙的。你不应该故意让人们因为没有注册你的通讯或者购买你的产品而感到难过。)

Revolve 有我们见过的最好的欢迎弹出窗口之一:

他们突出了优惠(10% 折扣) ，给了你一个赞美(“嘿，好看!”)，让你选择自我识别(虽然它是不错的，如果它是清楚的，你的性别偏好将用于) ，和 CTA 是超级清楚(“得到我的优惠券”)。

更重要的是，他们能更好的处理拒绝，一句简单的“不用了，谢谢，让我来买吧”就足够了。

抓住缺货机会

大多数“缺货”的产品页面设计如下:

没关系。它的基本工作是让人们知道他们现在不能订购他们想要的产品。

但这也意味着一个错失的机会。

你怎么知道你感兴趣的商品什么时候又有库存了呢？

一旦产品还有库存，ThirdLove 就会给你一个电子邮件通知的选择。

这不仅是一个更明智的销售策略: 它还可以让你开始与新的电子邮件订阅者建立关系。