美文网首页电商产品设计设计
移动电商中的产品详情页设计

移动电商中的产品详情页设计

作者: 企业官网设计精选 | 来源:发表于2016-10-13 12:00 被阅读419次

产品详情页在电商网站或app的转化率上都有着至关重要的作用。在用户做购买决策时,方便地查看和了解产品信息起着关键的作用。

以下有几个方法可以优化产品页面设计,促进用户购买:

一、产品详细信息和购买选项

全面的产品信息可以激发用户购买欲望、消除购买疑虑,让他们快速了解各种购物选择。用户想要看到app或网站展示这些产品信息:库存情况、大小、颜色选择、产品描述、产品图片、评价等。

产品详细信息清晰直观

产品描述应该方便浏览(了解大概情况)和细看(查找特定信息)。下面左图例子中用户可能会被不完整的产品信息所困扰:

•        尺寸:不清楚某些尺寸是否有提供,还是当前没货; 不清楚“XL”实际尺寸是多少。

•        颜色:颜色选项没用视觉直接呈现; 小文字描述没有提供足够信息说明该颜色在现实中看起来如何。

•        库存情况:没有库存及送货时间信息。

•        没有产品的详细信息。

不完整的产品信息可能会让用户感到困扰。图片来源:thinkwithgoogle

把包含各种必要信息的产品详情页压缩到适合手机屏幕操作确实是一件难事。不过一些商家实践表明也是可以做到的:

图片来源:ometria

尽量不让用户打字

移动应用上的大部分错误发生在输入栏。打字有较高的互动成本,即使全键盘打字也容易出错且消耗时间(在触摸屏上更严重)。理想情况下,在产品页面上所有输入的地方禁止用户输入原始数据。通过限制选项数防止用户犯错:使用单选按钮和步进控件,让用户只能选择明确的选项。

用户界面中的步进控件

二、产品图片

产品图片可以直接带动销售。无论是卖电脑还是T恤,产品图片都是页面上最重要的元素。好的图片起到两个非常重要的作用:1、建立好印象;2、提供产品信息。

使用高品质大图

要让图片发挥效果,需要放高品质的大图。特别是服装类,消费者更关心细节。下图是服装产品页面大图应用的例子。

缩放控件要做大以便用户注意到。图片来源:ctshirts

​确保图片不会模糊像素化。原始图片和放大的图片都需要保持高品质。用户放大图片时,要确保提供更高分辨率的图。

左:像素过低的图 右:大小合适的图

下面是图片缩放问题的一个例子:虽然Overstock支持图片放大,但产品图片分辨率太低导致根本无法使用该功能。

图片来源:ometria

让用户控制缩放级别

产品图片给用户的感觉是文字描述永远做不到的。很多时候用户会根据图片来评估产品的功能和细节,如果图片缩放只能预设级别,可能会给客户造成困扰。

缩放功能限制在特定位置。图片来源:thinkwithgoogle

​应该允许用户按照自己喜欢的方式去控制缩放。

深度和区域由用户控制。图片来源:thinkwithgoogle

产品图片的数量

一般来说,产品图片越多越好。不过为了优化产品相册的使用,应尽量让图片跟产品描述中强调的亮点相关。以下是产品相册的一些建议:

•      提供有细节和功能信息的实物照片。例如功放设备背面的输入端口,让用户了解设备都能做什么。

用图片来传达信息。图片来源:Yamaha

•      一些相关图片对用户也会有帮助。例如Harry’s 使用图片来讲述品牌故事。

图片来源: ometria

相册要支持左右滑动

用户要能够快速水平滑动查看产品图片,而不用向下滚动查看一系列图片。

图片来源:Dribbble

支持捏合与双击手势

用户经常在移动端产品页面使用捏合、双击等手势放大图像。有些支持缩放手势的网站则没提示用户。提示可以使用手势能够帮助用户利用该功能。

图片来源:baymard

三、产品价格

价格是一个很理性的事情,需要花点时间做好产品定价策略。以下是两种不同价格策略及其价格的摆放位置。

•      跟对手比价格:如果价格比竞争对手低,就要在价格信息展示上多做文章,放在产品图片和名称之后:

•      如果比的是其他方面(例如卖一款独特的产品),那么就不要强调价格,把它放在产品优势、好处等信息之后

四、产品库存情况与配送方式

用户放弃购买的一个最大原因是很多产品页面没有列出配送方式和运费。配送信息的缺乏导致用户跳转到其他页面去查找,背离推动用户购买产品的意图。

显示店内库存情况

对于想要到店购买或者自提的用户,店内库存情况是很重要的信息。尽量自动获取用户位置,匹配显示当地库存信息,同时允许用户选择其他地区。一个常见的错误是默认用户位置,但不能方便地修改位置。

店内库存信息应在产品页面上呈现。图片来源:thinkwithgoogle

运费和配送日期

用户希望看到明确的运费和配送时间信息,他们购物时会权衡运费和送货速度。

图片来源:thinkwithgoogle

​理想情况下,免费送货、准时送货当然是最好的。记得要在产品页面设计中列出可选的配送方式及费用。

五、有用的产品评价

网上购物讲的是信任,用户倾向于相信其他用户的意见。客户评价有两种不同用途:

•     评价有助于用户评估该产品质量和服务水平 。用户想要确定产品页面上说的都是真的。

•     评价帮助用户找到一些产品页面上找不到的细节问题的答案。这种信息的实用性就跟咨询销售人员一样,甚至更好。

如果能够积累一批好评,产品的可信度将会增加,从而帮助产品的销售。

用户评价要允许筛选

允许用户进行排序和筛选,以获得产品的“真实”信息。

图片来源:thinkwithgoogle

不要隐藏任何负面评价&展示评价总数

如果所有评价都过于正面会导致用户质疑其有效性。

另外在展示产品时,确保显示评价总数,让评价更具参考价值。

六、降低跳出率

通过提供额外内容与用户保持互动,把用户留下来:提供其他相关或热门产品信息。当用户想看其他产品或再买产品时,他们会喜欢这些推荐信息。可以尝试在页面底部用醒目的方式推荐相关产品。

在浏览过程中提供相关的建议可以帮助用户的购买决策

结论

在移动购物体验没有得到优化的情况下,买家放弃交易的比例高达30%。移动电商App或网站,特别是产品页面,首要任务是设计一个达到PC端电商转化率水平的移动购物体验。产品页面应该推动购物者的转化,因为购买越方便,购买的可能性就越高。

原文by Nick Babich

翻译by @企业官网设计精选

原文链接:点击访问(请自行翻墙)

相关文章

网友评论

    本文标题:移动电商中的产品详情页设计

    本文链接:https://www.haomeiwen.com/subject/zhywyttx.html