剖析一个有效的产品页面设计

WebFX总统。Bill在互联网营销行业有超过25年的经验,擅长SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

任何的目标新的电子商务的网站似乎是要挑战(并超越)亚马逊。我们当中见多识广的人会说,这是一项不可能完成的任务,任何提出不同意见的人都过于雄心勃勃或疯狂。然而,有了这些雄心壮志,许多在线企业的网站根本就没有努力创建一个可以挑战互联网巨头亚马逊的网站——更不用说推翻它了。

那么问题是什么呢?

主要问题在于产品页面许多电子商务网站。产品页面本来就很复杂,可能包含很多不同的元素,这样的页面很容易成为设计的杂耍。

虽然电子商务网站中的其他页面会影响转化率,但是产品页面是任何转换中的强链接。正是这个页面必须说服人们购买特定的产品。然而,许多网站只显示获得销售所需的最基本的信息,他们认为这就足够好了。

它不是。在一个离你最近的竞争对手只有一步之遥的世界里,你需要确保说服你的客户从你这里购买是正确的选择。在本指南中,我们将讨论您希望在产品页面中看到的一些元素、最佳实践和常见设计模式是什么,并给出一些电子商务网站的示例。

产品页面的必需元素

我们有一个简短的视频产品页面设计如果你想通过这种形式了解它。

为了在网上销售任何产品,在设计你的电子商店的产品页面时,有一些东西是不能忽略的。缺少这三个要素中的任何一个肯定意味着没有销售,如果你碰巧在没有这三个要素的情况下获得了一笔销售,那你就该庆幸自己是幸运的了。这些都是常识性的东西,但诀窍不是简单地把它们呈现在你的产品页面上,而是要把它们很好地呈现出来。

产品名称

很明显,用户必须知道他们在看什么。确保你的产品名称是描述性的、简短的、针对搜索引擎和用户优化的,这一点很重要。例如,产品名称“金戒指”更适合“18ct金结婚戒指”。

后一个产品名称描述性更强,但仍然简洁。理想的情况是每个产品名称都是唯一的,这样当客户浏览产品列表时,他们可以清楚地识别每个产品之间的差异。

价格

价格宜家除非你碰巧是亿万富翁,否则你不太可能在没有明确价格指示的情况下购买一种产品。当然,一页的信息可能会让你相信产品应该只卖1美元,但如果没有任何明确的确认,你永远无法确定你不会被收取100万美元。所以价格必须在产品页面,它应该突出,而且,价格应该位于按钮,这样当用户最初浏览页面时,他们的目光自然地从产品名称流向价格,然后按钮。

按钮

CDNow您已经知道了产品名称和价格,但是电子购物者将如何购买它?这个决策是关于按钮主要取决于大小、颜色和文字。这些会根据不同的地点而改变,有时地理位置也会改变,比如特定的颜色和元素在不同的文化中有不同的意思

例如,在英国,有一个添加到购物篮按钮更适合美国版本添加到购物车.参见Amazon.co.uk和Amazon.com之间的措辞差异:Amazon.com和amazon . co . uk按钮。理想情况下,一旦做出这些决定,你的按钮应该放在页面的上方,最好是在折痕上方。

当然,折叠在网站上是不存在的,但是把它隐藏在页面下面,让你的客户努力购买你的产品是没有意义的。有一个例外按钮,当产品脱销时。在这些情况下,在页面上显示脱销消息以及隐藏或禁用按钮,减少混乱和烦恼。

想要获得设计灵感,请查看这些添加到购物车按钮的例子

产品页面的重要元素

与上述必备要素不同,当缺少以下要素时,人们仍然可以轻松购买产品,但这并不一定意味着他们会购买。对于绝大多数的客户来说,这些元素都应该出现,因为它们对帮助他们决定产品是否是他们想要购买的很重要。

图片

伯顿在查看产品页面时,客户首先要验证页面上的产品是否是他们想要的。无论产品名称多么具有描述性,大多数客户都会使用产品图片来验证该产品就是他们真正想要购买的产品。下面是展示产品图片的一些技巧。

图像的大小应该合适。提供一个合适大小的图像是非常基本的事情;如果客户不能清楚地识别产品是什么,那么就没有理由展示图像。然而,一般显示器的可用空间是有限的,所以有时,使用额外的东西让客户更近距离地观察是有帮助的。使用模态窗口(通常称为lightbox)以放大缩略图,放大功能。

看看这张清单jQuery插件用于处理图像新蛋网显示适当大小的图像。提供多个图像。

考虑展示一个图片库,而不是依靠一个图片来销售。通过图库,您可以从不同角度展示产品的许多图像,也可以展示正在使用的产品。有些产品非常复杂,用户可能会寻找产品上最小的细节(例如,在消费电子产品中,设备控制在哪里和什么);您要确保这些文件可以查看。

有些网站更进一步:他们允许以前的顾客上传他们为产品拍摄的照片。这可以为你节省时间和金钱,而且客户很可能会填补你尚未发现的重要空白。这也是社会证明;也就是说,用户更倾向于相信中立的同伴。

用户提交的亚马逊产品照片。展示实际产品的照片。我遇到过几次这种情况,我相信你也遇到过;当你进入一个产品页面时,图片并没有显示名称和描述所描述的产品。

该图像要么显示多个产品,要么是不完整的,没有显示产品集合中的所有内容。这可能是在产品有多种型号的情况下(例如有多种颜色的鞋子)。确保图片反映出你要运送给买家的产品是一个很好的做法。

产品描述

亚马逊在大多数情况下产品描述是很重要的。它提供了一个简短,简洁的产品描述是什么,可以写得很好,说服客户购买该产品,并可以提高搜索引擎优化的产品页面。许多电子商务网站在为网站上的每个产品创建自己的内容时失败了,因为这是一个巨大的任务。

许多网站会简单地从制造商那里复制内容,这虽然不是完美的,但聊胜于无。然而,投入时间和资源在撰写自己的产品描述让您的网站从浩瀚的在线商店的海洋中脱颖而出。

量的选择

奥巴马设计如果客户想订购同一产品的10件商品,而不能选择数量,那么他们必须单击按钮9倍。如果在每次点击之后,客户都从产品页面导航到他们的购物篮,那么这样做的挫败感就会更大。总是给予修改数量的能力。

省略一些占用如此小的屏幕空间却可能导致更大的购买的内容是对产品页面的一个很好的补充。一个常见的设计模式是将数量框放置在按钮作为文本输入或选择框。另一种设计模式是在结帐摘要页面放置数量框,其中列出买家购物篮中包含的商品。

然而,后一种选择似乎类似于当你已经在杂货店收银台排队时,修改你想购买的罐头汤的数量。然而,在产品页面上有数量框可以确保你让买家在罐头汤的货架上仍然可以设置他们想要的数量。

产品页面的有用元素

一旦您浏览了产品页面中必需的和重要的元素,您就会看到那些有用的元素。这些信息的存在可能并不适用于所有的产品,但在很多情况下,这些可能只是帮助你完成销售的最重要的信息。

制造商的名字

Zappos苹果公司生产最好的MP3播放器,而佳能公司生产最好的数码单反相机——至少我是这么认为的。很多顾客对他们购买的产品都有类似的想法。随着品牌意识和品牌忠诚度的提高,很多人会首先寻找他们知道的品牌来购买特定的产品。

因此,由于客户对产品的制造商或制造工艺印象如此深刻,产品页面应该提供视觉线索,以确认他们正在查看的产品是由某个特定的公司制造的。提供这些视觉线索的两种最流行的方法是通过制造商标识的存在或通过在产品名称中包含制造商名称(如上面Zappos的照片所示)。

产品的选择

DesignByHumans在某些情况下,产品的规格可能差异很大,足以保证提供产品的选项/变体。例如,像t恤或鞋子这样的东西可能有各种颜色、样式和大小,可以通过修改它们的选项和属性而受益。由于有多种产品可供选择,您必须决定如何将它们最好地集成到设计中。

根据选项是什么,您可以使用选择菜单或无线电输入。当某些选择是相互排斥时,多个选择可能会导致并发症,但这是需要克服的必要挑战。用这种方式展示产品的主要好处是减少了网站上产品页面的数量,从而使在长长的产品列表中搜索变得简单得多。

例如,如果您正在销售一款有20种不同颜色的鞋子,那么您可以将其减少到一个页面,而不是20个产品页面。例如,当顾客点击到恰巧相同但尺寸或颜色不同的产品时,拥有选项还可以减少他们的挫败感。

大小和尺寸

hmv.com如前所述,一些有用的东西取决于产品的类型。虽然尺寸可能与食物(比如咖啡豆)没有太大关系,但尺寸对于家具或绘画之类的东西很重要——如果不是必需的。维度不仅仅是物理上的。

考虑一下电影的播放时间或CD的曲目列表;从某种意义上说,这些都是“维度”。该信息为客户提供了一个尺寸指示,他们可以据此确定物有所值。想象一下,以正常的价格买了一张CD专辑,但后来发现它只有一首单曲;大多数顾客在销售后发现这一点会很失望。

可用库存

Winestore展示商品的剩余数量是为了创造一种紧迫感,这可以利用买家的冲动。然而,客户也可能感谢能够在知道产品稍后可能缺货(然后无法进行购买)的情况下做出决定。就设计而言,传达低库存的紧迫性才是真正重要的。

如果库存水平很高,客户就不太关心这个信息。由于只剩下几个产品,或者当一个产品脱销时,此信息与客户的相关性就大得多,因此需要对其进行设计和定位,以便客户能够很容易地看到通知。

产品页面的可选/额外元素

以下元素越来越多地出现在产品页面中,以提高转化率或单次消费。它们提供了关于特定产品的额外信息,在某些情况下,它们的加入可以很好地成为网站利润高增长的催化剂。

顾客评论

索尼美国风格客户评论让之前的买家能够提供他们购买的产品的证明,从而让其他客户对产品的偏见减少。然而,问题是这个部分在许多较小的网站上停滞不前,很少有客户会费心添加评论。最理想的情况是遵循eBay的买方/卖方反馈模式。

当你收到一封要求反馈的电子邮件时,许多人认为这是购买过程的必要过程。简单地用电子邮件提醒客户,让他们对最近购买的商品提出意见,就可以完成你的评论部分。但是你应该问什么信息呢?

理想情况下,你要求尽可能少的信息,以尊重审查员的时间。我建议只询问他们的名字、简短的评论、他们的评级和评论的标题。评论标题可以省略,但许多较大的网站要求这样做,以便读者可以更容易地找到他们想要阅读的客户评论。

最后一个在显示评论时添加的功能是询问评论是否有帮助;这看起来像是一个小小的增加,但当使用它来排序你的评论时,你可以确保只有最有帮助的评论才能排在最前面,而那些没有帮助的评论则会排在最下面。

加入愿望清单

马口铁墙贴花有些顾客很果断,而有些则会花时间考虑是否要买东西,可能要花上几个小时甚至几天。在这段时间里,他们可以简单地忘记他们正在看的产品,或者最终去其他地方购买。但是,包括让他们在愿望清单中添加产品的功能,我们提供了增加他们回头率和购买率的最佳方式。

有了一个他们以后可以回到的地方,他们就可以很容易地买到他们保存的产品。位于页面顶部附近的链接或按钮可以放在产品页面中。对买家来说,这是第二重要的可操作元素,所以它应该是可见的,但绝不应该以这样的方式设计,分散了客户对主要可操作元素的注意力,也就是按钮。

节约成本

ties.com和商业街一样,许多电子商务网站全年都会定期打折,或者全年都打折。有些网站为了简单起见,只显示价格,而另一些网站则将建议零售价与实际价格并列。在你的产品页面的某个地方,你应该包括客户将节省的金钱价值和百分比。

如果客户所做的节约值得大声疾呼,那么你必须大声疾呼。我们之所以加上一个百分比和一个货币价值,只是因为许多人对百分比储蓄反应更积极。你或你的朋友是否曾经在打折后花了比平时更多的钱买了一件东西,但仅仅因为它写着75折就买了下来?

与其看你花了多少钱,你还不如关注你节省了多少钱。以百分比的形式显示价格差异是最有效的沟通方式。

交货的细节

戈代娃对许多网站来说,这是网上购物的隐性成本。所以很多电子商务网站只会在结帐时告诉你送货的费用,除非网站会自豪地宣布它有免费送货.现在那些知情人士敏锐地意识到了这一点免费送货通常意味着“我们已经把它隐藏在产品的成本中了”,但这样做的作用是,它消除了未知的元素。

那么我们能做些什么呢?在产品页面中显示运输成本是第一件事。如果你有固定的送货费用(无论成本或目的地),那就显示出来;如果是每件产品,那就显示出来。

如果在最高和最低价格和地点方面有些复杂,那么为什么不显示平均配送成本,并链接到一个更好的收费描述页面呢?从本质上说,你需要在人们点击购买之前尽可能多地向他们提供有关预期送货成本的信息。交货时间对很多人来说也很重要。

在你们的网站上可以次日送达吗?如果你销售的产品有较长的交货时间,那可能是什么情况?一些电子商务网站的一个不幸的事情是,你可以在没有发货时间信息的情况下购买产品,尽管你已经做好了等待的准备,但你仍然每天都在热切地等待它到达,直到它最终到达。

如果顾客急需某样东西,他们会想知道自己能及时得到它。如果你的网站做不到这一点,那么他们就会去别的地方——通过对你的能力的坦率和诚实失去一个客户比得到一个失望或愤怒的客户要好得多。

其他产品

花蜜从表面上看,把其他产品和你想卖的产品放在同一个页面上似乎很奇怪。当然,这会分散顾客购买他们想要的产品的注意力,对吗?但这并不一定是事实。

相反,你可以把这句话想成“你要配薯条吗?”电子商务网站的元素。你不是真正劝阻客户购买产品,而是让他们购买更多他们原本打算购买的产品。额外的产品实际上可以有几种形式。

  • 所需物品:这些产品可能需要确保主要产品功能正确;想想硬件的螺丝,电子产品的电池。
  • 相关项目:相关道具不一定是必需的,但却是一套道具的一部分;也许是一个与五斗橱风格相匹配的橱柜。
  • “人还购买了…”:这本质上是一种众包的产品推荐,在购买展示的产品时向客户展示其他人已经购买过的产品,希望当前的客户可能会发现他们可能喜欢的额外产品。

为了获得额外收益,你可能希望在页面中显示这些高内容,但它们必须像用户评论一样呈现出来;下面任何其他产品信息。额外的项目可能是重要的,所以可能在页面上方的链接将是有益的。除此之外,您有一张空白的画布来做您想做的事情,但是与其他产品列表保持一致的风格将有助于用户快速识别这些部分是什么。

为什么选择我们

著名的第四街饼干公司这是我最近才发现的,它对不太知名的网站很有效。有时客户对产品和价格感到满意,但对网站本身不确定。当我们遇到从未使用过的网站时,就会自然而然地对它缺乏信任。

许多网民害怕把自己的私人信息和财务信息泄露给不知名的网站。“为什么选择我们”面板是一个有用的方式来定义为什么一个网站是值得信任的,为什么它是购买该产品的最佳选择。通常情况下,你可能会有这样的信息散布在网站的其他地方,例如关于页面,但是能够看到这些页面的客户比例非常低。

在销售过程的关键时刻,强化诸如优秀的送货服务、价格、保证或退货政策等理念,可能正是获得这笔销售的入场券。

社交媒体整合

无线的社交媒体规模很大,如果你整合了诸如此类的东西,会有很多好处社交媒体的按钮在你的产品页面上。最初,电子商务网站有一个电子邮件的一个朋友在产品页面上展示自己的特色,这样客户就可以快速地告诉朋友他们发现了一个很棒的产品。随着推特和脸谱网在美国,许多网站现在给你机会推特或喜欢一个给定的产品。

如果你确实在你的产品页面中包含了这样的社交媒体方面,那么它必须是一个更广泛的社交战略的一部分,通过它你可以真正参与并试图建立一个在线社区。

挑战:解决信息过载问题

我和所有其他设计师发现的挑战是:如何将如此多的信息塞进一个单一的web页面?我们必须确保我们的产品页面看起来不拥挤,我们必须显示在一个合适的信息层次结构这样重要的信息就在顶部,其他的信息自然地在页面下方流动。布局产品页面没有快速的答案——您可以使用图库视图或选项卡内容在更少的空间中容纳更多的信息,或者您花更多时间在线框图阶段在开始设计之前先把事情做好。

有时这些东西有用,有时它们就是不合适。这是在不同的网站、不同的市场、不同的客户和客户工作的挑战。我有一个建议,那就是针对极端情况进行设计。

当我们设计这样的页面时,我们倾向于只考虑完美的场景:所有内容都在可管理的大小内。相反,考虑一下页面在某些区域缺少元素或内容多于(或少于)您预期的情况下如何工作。这样做将确保您得到一个设计良好的页面,无论客户端如何填充它。

设计的喜悦

一旦产品页面布局正确,并设计了所需的、重要的、有用的和可选的/额外的产品页面元素,为您的页面添加一些乐趣。如果人们访问你的网站,发现他们对网站的一些他们从未想过会存在的小部分微笑,那么他们就会更倾向于购买并一次又一次地返回。要有创意,要大胆,要独特,要分享你的故事,要发展你的网站形象。

克服最基本的问题

网上购物的主要问题一直在于,我们忽略了线下购物的一个基本要素——即触摸或尝试产品的能力。这是许多产品和许多客户的强烈愿望,目前还没有一种技术可以模仿这种触感和沉浸式体验。为了克服这个问题,我们必须比我们的实体店做得更好——好得多。

我们必须确保在购买前向客户提供尽可能多的信息,确保价格具有竞争力,确保提供完美的用户体验。

相关内容

WebFX职业

加入我们的使命,为全球的企业提供业界领先的数字营销服务,同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!