电子商务产品页面的用户体验设计技巧

出色的产品页面是实现更高转换的第一步。每个电子商务网站的存在是为了赚钱,所以你想要设计一个网站,易于使用,并鼓励销售。

当然,您需要重点关注从用户购物车到输入付款信息的结帐过程。

但是产品页面对于确保访问者能够准确地找到他们要找的东西也是至关重要的。在这篇文章中,我将介绍一些用户体验技巧,为任何一个ecomm站点在产品页面上打造良好的体验。

明确价格和特点

也许任何产品最重要的是价格。

所以在页面上保持总价清晰和突出。确保在页面顶部和产品标题/照片附近尽早澄清。

还要确保提到与购买相关的可选功能。例如,不同尺寸和颜色的t恤。在定价附近突出这些选项,如果某些选项需要额外花费,则相应地更新价格。

你的目标应该是透明度与潜在客户。对成本要坦率,不要试图隐瞒任何事情,以期诱使人们购买。

kidkraft产品定价

KidKraft网站就是一个清晰产品页面的绝佳例子。每件商品的标题都很清楚,价格在最上面用粗体字标出。

这个定价文本也比其他的更黑暗,所以它真的从页面中脱颖而出。

您还会注意到,在定价周围也有很多空白。这使得访问者可以快速浏览所有内容,包括总评论、总价格和总功能。

快速浏览是大多数交互设计的关键,所以这是一个优秀的设计趋势。但是,您也可以尝试像下面的JBL示例那样处理颜色和位置。

jbl电子耳机产品

请注意,定价文本很大,并且清晰可见,但也有与CTA匹配的鲜红色。

事实上,这个设计似乎是围绕着这个红色的阴影来吸引人们的注意力。如果你想让你的定价融入到你的布局中,这绝对是一个很好的策略。

如果你改变了颜色,字体,大小,位置,等等。只要确保价格是容易看到,并清楚地访问从页面顶部。

顾客评论

建立信任的最好方法之一是通过审查。不幸的是,你的品牌并不是评价自己产品的最佳选择;但是其他的顾客是。

确保你有客户评论突出在页面上有自己的部分。除非你引用了某些评论的片段,否则不应该出现在最上面。

但我确实建议在页面顶部添加一个小链接或一个整体的星级评级。这可以让访问者快速查看平均客户评级,并链接到完整的评论列表。

亚马逊顾客评论之星

我必须把亚马逊包括在内,因为他们是电子商务之王。毫无疑问,亚马逊已经对他们的产品页面进行了多次测试,以调整小功能以获得高回报。

他们的评论区非常清晰,每个人都知道要查看亚马逊的评论。客户可以根据最近的评论或最有帮助的评论进行排序,并根据特定的星级进行排序。

请注意平均星级评级总是在每个产品页面的顶部。如果可以的话,尽量把这句话写进去,因为这对与你的听众建立信任大有帮助。

wayfair星评产品

实际上我也喜欢Wayfair网站上的风格。他们的星星占据了很多额外的空间,并且会立刻吸引你的注意力。

这对于建立访问者的信任很有帮助,因为他们可以快速浏览总体用户评级并据此工作。另外,他们的定价部分非常清楚,这与我提到的另一个趋势是一致的。

真正的Wayfair的产品页面是一个风格设计选择的金矿,你可以复制和测试自己的商店。

添加出售的图像

这似乎是显而易见的,但图像确实卖得好。问题是找到正确的图片类型,吸引注意力,让访问者确切地知道你的产品的外观。

你可以选择一堆不同的照片和角度,或者只是一个伟大的照片。不管你有多少张照片(虽然更多通常更好)。最终的目标是展示产品,让人们在数字上体验产品的样子。

宜家产品照片变焦

我认为宜家的产品页面非常棒,有两个非常重要的照片功能:

  • Click-to-zoom
  • 缩略图画廊

每一张照片都相当大,占据了页面的很大一部分,所以你可以真正检查照片。更不用提它的缩放功能了,这对任何一个买家具的人来说都是超级方便的。

但是请注意照片的质量和它们在页面上的感觉。你想要非常相似类型的照片为您自己的网站&尽量匹配的质量水平太。

现在,如果你销售的产品有特定的用途,你也可以包括动作镜头。这些照片可能是某人在做饭时用你的刀或过滤器的照片,也可能是某人用你店里的床单铺床的照片。

无线的产品拇指

这家名为Threadless的服装店有很多不同款式衬衫的图片。这样你就可以看到不同颜色、不同尺寸、不同款式的衬衫在男女服装中的效果。

图片质量取决于你推销的具体产品。某些类型的图片更适合某些类型的产品,而你的工作就是找出如何捕捉最好的图片,为你的客户增加价值。

Skimmable产品描述

我之前提到过大多数人是如何浏览网页的。这意味着你可以通过以一种简洁的格式来展示产品信息来吸引更多的注意力。

注意,在Redbubble页面中,你会在主产品标题下面找到产品特性列表。

redbubble产品页面

这是一个分享你的产品相关信息的好方法,而不需要大段大段的阅读。

它甚至有一个强大的“功能”标题,这样客户一眼就能看出这个列表是关于什么的。很酷!

另一个例子是Skinny Ties产品页面,每张照片下面都有一个小功能框。

瘦领带产品说明

你可以找到关于领带的面料、尺寸和宽度/高度的快速信息。这些数据不应该被埋没在产品描述中,这样就可以很好地放入可分解的盒子中。

同样,您的产品描述将根据您销售的产品类型而有所不同。但是用这些例子来考虑所有的可能性。

性感的产品信息

Zazzle示例是我最喜欢的示例之一,因为它主要依赖于文本,但是很容易略读。

产品描述分为两栏:产品信息和设计信息。这两个领域对潜在买家非常重要,所以把它们都放在一个地方是有帮助的。

一个明确的“加入购物车”CTA

当有人准备购买你的产品,他们需要添加到他们的购物车和检查。这通常发生在单击一个称为CTA按钮的按钮时。

你的工作是设计一个清晰、易读、可访问的CTA。一般来说,这意味着使用强烈的颜色、独特的按钮样式、有意义的按钮文本和靠近页面顶部的位置。

检查cta按钮

Hayneedle使用亮橙色的CTA实现了所有这些想法。按钮文本是“添加到购物车”,这是电子商务商店的典型选择。

注意这个按钮从第一个页面加载开始就吸引了你的注意力。它几乎包含了所有的主要功能,比如用户评论、产品价格和总数量。

使用类似的东西来吸引注意力,鼓励人们点击。通常橙色/黄色/红色是更明亮的“行动”颜色,但你也可以看到成功的软颜色。

以使用亮蓝色CTA的Ugmonk产品页面为例。

购物车按钮

这个按钮的旁边甚至还有一个小的加号(+)。这个加号直观地告诉用户这个按钮的功能。

尝试一堆不同的风格为您的CTA不同的颜色,复制,图标,大小,任何东西。如果你A/B测试结果,你可能会惊讶地发现某些cta表现得更好,并随着时间的推移增加你的总销售额。

前进

在你的设计过程中采用所有这些技巧,并尝试应用那些有意义的技巧。你可能不会发现所有这些建议都是有用的,因为它可能是特定于你销售的产品类型和电子商务网站的设计。

但不要害怕尝试新事物,看看什么是有效的!电子商务的空间是巨大的,如果你足够幸运能分一杯羹,你会惊讶于小小的UX调整会对你的底线产生多大的影响。

2020-01-04 17:29
相关热门