意见反馈

5500字入门电商购物车设计

WitMagician
1274 阅读
4

大家好,我个人近几年都在负责购物车功能模块,这里更大家分享下这几年对电商产品购物车的总结 。


1 

基础认知及功能要素

 

1.购物车是什么:

购物车(这里特指购物车前台)是用户在电商平台购物过程的黄金流程中非常重要的一环(在京东把”搜索“”商详“”购物车“”结算“”收银台“”订单“叫做黄金流程),它连接了购物的前后环节,确保用户能够顺利进行结算和支付。


2.购物车的定位:

  • 暂存:用户在购买商品的过程中用户暂存商品,这个购物车的功能对标线下场景,就像是我们去商场或者超市,进门先推一个购物车,用户在持续“”的过程中将心怡的商品暂存在购物车中。同时线上电商平台的购物车也承载了部门收藏/关注商品的功能,可以滞后购买或者只是收藏,同时像京东和淘宝都同时有专门的关注/收藏商品功能(京东APP端为“商品关注”,淘宝APP为“收藏夹”);

  • 对比:用户会将很多同类的替代品一起加入购物车,在下单购买的时候进行对比,用于横向对比商品的各种属性,包括不同商品之间的价格,不同时间的价格,不同商品属性的物流和库存等;

  • 促销:购物车页面有自己独特的排序和归堆逻辑,主要归堆逻辑为“店铺>促销>单品”,排序主要是根据勾选和时间逻辑,这里不详细展开,后面我会单独讲。在购物车页面会对相同店铺下按照各种促销活动对商品进行归堆促销。例如京东常见的”凑单““满购”“满赠””满减““换购”“加价购”“跨店铺优惠”等等促销,还会对于不同地区和时间进行物流和配送优惠,对于不同地区不同单品下的特定的促销等,同时在购物车下方会有商品推荐页面,这个地方不展开;

  • 结算:这个地方主要是指批量结算,在购物车页面可以更改要下单商品的附加服务(保险,保修,包装等),商品订单数量,配送地址,然后批量勾选部分商品进行结算跳转。


3.前台购物车和其他系统的关联(主要是与后台): 

  • 订单系统:加车/上架/下架的商品是什么?

  • 库存系统:加车的商品还有多少?数量多少显示库存不足?

  • 营销系统:加车的商品有优惠吗?如何组合?

  • 价格系统:价格是如何变化的?如何提醒?

  • 会员系统:会员再购物车价钱/排序/归堆/物流会有哪些不同?

  • 门店系统:门店地上架/下架/状态如何?如何影响归堆?

  • 结算系统:如何结算?给结算提供哪些信息?

4.前台购物车存在的意义:

  • 转化率:如何提高购物车的结算转化率?

  • 客单价:如何提高商品的客单价?

  • 加车率:如何引导用户更顺利的将商品加入购物车?


所以我们要努力做的事情就是:

  • 在空购物车情况下,让用户更顺利地将商品加入购物车;

  • 在满购物车情况下,推动用户更多的去结算;


5.购物车的基本信息


  • 基本信息:缩略图,库存,名称,属性,价格、数量,其他附属信息等。


  • 基本标签:对于店铺,标题,图片等的各个方位不同的标签,例如”店铺图标“”京东超市“等。


 

6.从哪来?到哪去?

从哪里跳转来?

  • 商城主页底部TAB直接跳转;

  • 商详(商品详情页),属于用户购买的黄金流程;

  • 商品列表页面,如京东超市商品列表页;

  • 购物车列表最下方推荐页面;

  • 之前收藏/关注的商品页面;

  • 我的订单页面的的再次购买;

  • 线下场景:扫码/NFC等直接加入购物车;

  • 各种活动页面,如京东秒杀;

 

跳转到哪里去?

  • 结算页;

  • 商品所属店铺页;

  • 商详页;

  • 收藏/关注页;

  • 删除;

  • 商品列表页,如京东看相似;

  • 消息页,京东APP右上角;

  • 其它,如编辑,选服务,等等。

 

2

 

重要功能设计逻辑总结


现在的设计逻辑只是当下的一种解决方案,需求的满足是不断迭代改进的,如果你有好的解决方案欢迎一起讨论。

1.为什么京东购物车页面有非常多的标签和组合优惠卷?而淘宝页面很少非常简洁?

 

5500字入门电商购物车设计

(京东和淘宝购物车页面)

 

在第一部分里面我列举过京东的各种促销活动,而这些满目琳琅的促销活动或者优惠卷基本都会在购物车页面体现出来,而淘宝的页面似乎看起来特别简洁,主要的原因和区别在于淘宝是C2C的,而京东是B2C的,淘宝用户都是独立的小商家,各个商家之间利益分散,无法利用联合结算设计综合的促销体系,而京东的大部分自营商品都算是“自家的”,京东平台可以综合管理,设计统一的促销体系,相比于淘宝依靠流量和服务的盈利模式,京东主要的盈利模式是赚差价(以及物流服务),为了提高自己的利润,设计复杂的营销体系是完全必须的。

 

京东和天猫的模式主要盈利模式对比:

京东:平台入驻费,广告和竞价词,销售提成,进出货差价,精准营销,仓储和配送,支付和金融服务,售后服务(投诉反馈);

天猫:除去上面的进出货差价,仓储和配送和售后服务。

 

2.购物车页面商品的排序和商品归堆逻辑是怎么样的?为什么排序会经常变动?

 

购物车的排序和归堆逻辑是一个非常重要的问题,里面涉及了店铺,促销,单品,服务,时间,物流,仓储等多条排序逻辑,往往一个改动就会让排序改动很大从而产生新的用户体验问题,所以对于购物车功能设计的产品经理来说,这里是一个需要持续优化的核心要点。

 

  • 购物车商品的排序和归堆逻辑:

5500字入门电商购物车设计

如上图所示,购物车商品的归堆逻辑为:

 

店铺>促销>单品

(每层逻辑内部按照时间倒序排列)

 

即商品先按照时间倒序进行店铺的归类,然后在店铺中按照活动/单品的时间倒序进行归类,在活动下的商品按照时间的倒序排列。

这只是商品排序的大概分类逻辑,针对不同平台结合自己的促销,服务,赠品,物流等还有更加复杂的分类和排序逻辑,这里不做详细描述。

 

  • 为什么商品的排序会经常变动:

假设新加入一个商品M,那么他会添加到哪里呢?如果商品M不属于店铺A和B则直接按照时间倒序,按照自己属于的店铺添加到购物车最上方;

 

但是若新加入的商品属于店铺B,则商品及店铺排序都会发生大的改变,店铺A及其活动商品整体下移到店铺B后面,而新加入的商品M归于店铺B按时间倒序和所属活动排在店铺B中,试想店铺B中的商品很多,那么店铺A中的商品将会一直下沉到下面,商品位置发生了重大改变,对用户体验非常不友好;

 

很多电商平台同时会将无货商品沉底导致商品排序和促销归类发生变动,导致用户找不到原来的商品位置,对用户体验不友好。

 

以上损害用户体验的问题都是在考虑了用户其他体验的情况下妥协所导致的,如何能够在保证利益的同时更少的损害用户体验,是我们需要持续努力的方向。

 

还有一个问题就是加购物车商品的自动勾选策略,如何方便用户直接购买,较少用户重复勾选,同时又不至于勾选过多,需要用户手动逐个取消勾选。

 

3.在非登陆状态下用户可以添加购物车进行购买商品吗?为什么?

 

前置试想这样的场景:当你正在一个平台看重一件商品,当你点击了加入购物车时候,这时候却需要你马上对平台进行注册/登陆等一系列繁琐的流程才能成功将此商品加入购物车,然后继续浏览下一件商品。这是多么扫兴的事情,对用户的正常“逛”的行为和“逛”的心里进行突然的,用户有可能注册繁琐/或者不成功而放弃购买,而用户再挑选了很多自己爱不释手的商品之后,注册/登陆流程繁琐一些用户也是可以接受/忍受。

 

4.在你点击将商品加入购物车的时候是如何计算库存的?为什么有时候会出现加入购物车有库存但是下单显示库存不足的情况出现?

 

用户在将商品加入购物车时如何计算库存不同的平台根据不同的情况有不同的做法,在这里我们比较一下下单减库存和付款减库存。

 

  • 下单减库存:用户将商品加入购物车的时候会减掉库存,意味着下单在没有付款的情况下这个单就是你的了,用户可以延迟付款,用户体验较好。但是如果有大量的用户将购物车当作收藏夹,下单之后不付款,会对商家造成无法出货的损失,如果有大规模恶意退单行为,就会损害其他用户的体验,造成商品提早下架,损失浪费;

  • 付款减库存:用户将商品加入购物车时候不会减库存,只有当用户付款完成的时候才减库存,可以防止水军吊单,但是对于相同加购物车的商品,用户下单秒杀的速度取决于网络状况等客观因素,导致有些人成功将商品加入了购物车,但是进行结算的时候被告知库存不足;针对部分最少件数起购的商品,在结算时候也有可能会因为剩余库存没有达到起购件数而不能购买;

  • 特殊情况:无限库存的虚拟商品等情况。

 

像唯品会,聚美优品和小红书等平台会则会定期清空购物车,就是为了减小库存压力,加入购物车库存就会减一,这意味着短时间如果用户不下单就会浪费库存。

 

5.购物车添加商品数量有上限吗?为什么?上限是多少?

 

目前京东和淘宝的最大添加商品上限都是120件,120件商品上限指的是购物车中每个SKU,根据“+”和“-”所添加的商品,以及赠品中的商品数量是不计算在其中的,而且目前都是添加至满120件商品时才会提醒,这时候用户以及不能够继续添加商品了。我们想一想为了更好的用户体验可不可以在快要添加满商品的时候提前告知用户呢,可以有利于用户对已经添加商品的下单转化率,也可以使用户更加容易控制自己想要添加的商品的选择。

 

目前确定120件商品上限的原因除了技术阈值的限制之外还有就是大部分用户根本用不到120件数量的空间,这个数据我也想看一下具体分布,同时有助于估计将购物车充当收藏夹功能的用户有多少。在618和双11购物节的时候,平台会利用PLUS会员的特权等手段将购物车可增加数量上限提高。

 

6.商品的关注和收藏功能是基于什么场景的?如何更好的提升用户体验?

京东和淘宝都有类似的商品关注和收藏功能,在购物车页面,用户可以直接将商品移入/加入关注。

加入关注:商品在购物车和关注同时存在;

移入关注:将商品从购物车移除到关注页面;

 

猜测用户在以下场景下需要用到关注/收藏功能:

  • 将喜欢但是暂时不购买/下单的商品放入关注/收藏;

  • 将经常购买的商品放入关注/收藏方便下次购买;

  • 将自己使用体验好的商品放入关注/收藏方便推荐给朋友;

  • 更多场景欢迎大家补充…

 

 

3 


京东平台多端功能比较


5500字入门电商购物车设计

(以上截图从左到右分别为:APP端,微信小程序端,微信端,手Q端,M端)

5500字入门电商购物车设计

(PC端)

整体设计颜色不同,根据各端的环境限制,购物车在不同平台有不同的表现形式。

以下梳理APP端和其他移动端的不同设计以及可以借鉴学习的设计:

 

  • 非编辑状态可以修改SKU:京东APP端只能通过点击编辑才能更改加车商品的SKU,而其它移动端都可以在商品陈列详情页面点击修改商品的SKU;

  • 显示目前所选地址:京东APP端选择地址之后再购物车页面不显示(尤其对于新建暂存地址的情况),而其它移动端都会在购物车页面顶部显示所选地址的缩略字段;

  • 可以在购物车页面新建地址:京东APP顶部购物车后面有地址icon,点击可以添加暂存地址但是不能新建地址,而微信端,手Q端和M端都可以直接在购物车页面新建地址;

  • 分享购物车功能:微信端和手Q端可以直接分享勾选的商品作为整体购物清单,对方打开分享页面可以进行点赞或者直接加入自己的购物车;

  • 降价商品点击显示:在微信端,手Q端和端点击降价商品的通知栏时候,会直接标注啊跳转到了第几个降价商品,而京东APP端点击只显示跳转上一个或者下一个商品,PC端点击降价商品提醒之后不能直接跳转第二个降价商品;

  • 价格总计颜色突出:除了京东APP端的其它移动端商品的总计价格会用红色字体突出显示,同时建议将立减金额进行突出显示。

  • 加入关注功能:PC端相比移动端以及拥有的移入关注/收藏功能(将购物车商品移入关注/收藏后购物车内将不在显示此商品)增加了加入关注/收藏功能,即可以将此商品在关注/收藏页面和购物车中同时显示。

 

4

 

各大电商购物车功能对比分析


以设计和优化京东APP端的购物车功能为目的,以京东APP为中心进行购物车功能对比分析:

主要竞品:淘宝,京东,天猫,唯品会,蘑菇街,苏宁易购

 

浏览购物车页面跳转顶部功能:

  • 京东:右下角会显示直接跳转顶部按钮,同时点击底部购物车Tab会直接跳转顶部并同时进行并显示更新;

  • 淘宝:每次切换到购物车首次页面快速下滑的时底部Tab建会提示“点这里快速会顶”,同一页面不跳转则第二次不会提醒,点击底部购物车Tab建会快速回到顶部;

  • 天猫:无此功能;

  • 苏宁易购:右下角会显示直接跳转顶部按钮;

  • 蘑菇街:无此功能;

显示折扣价/拼团价格:

  • 蘑菇街:显示两个购物车显示两个价格,售价和原件同时显示,原折扣价置灰并添加删除线;

  • 唯平会:同时显示优惠后价格和原价格,优惠后价格置灰;

显示拼团标签:

  • 蘑菇街:可拼团商品在价格前面显示拼团标签;

显示配送地址:

  • 唯品会:在购物车上方显示目前所在地址;

  • 苏宁易购:购物车页面顶栏显示当前所选配送地址;

直接删除商品:

  • 唯品会:点击X直接删除商品;

结算横栏显示运费:

  • 苏宁易购:去结算横栏直接显示和计算运费;

去结算横栏上方会员广告:

  • 苏宁易购:横栏上方显示会员开通入口;

删除确认按钮:

  • 唯品会:部分加购物车商品删除会弹出toast提示“XXX人真正盯着该商品,删除后可能会被抢走哦”,可以选择“先留着”和“删除”选项;

  • 京东:长按后选择删除,直接删除;

  • 苏宁易购:和京东相同;

  • 天猫:和京东相同,交互不同;

分享购物车功能:

  • 天猫:可以勾选已买过/购物车/收藏夹中的商品进行分享;

5

 

更多想象力,更多可能性

 

B2C:近年来垂直电商,社交电商和B2C的新电商模式开始繁荣,那么购物车在这种模式下又会变成什么样子呢?

 

线下:线下门店或者商场的扫码购物(扫码加购物车批量结算),线下硬件触碰(NFC等)直接添加商品到购物车等?

 

共享:将自己的购物车清单共享出去,或者对于各种团体和组织提供像亚马逊和爱彼迎一样的心愿清单功能,支持私密或者开放?

对比:我们购买商品的时候经常需要将同类商品进行对比,可是又不能同时打开两个商品的商详页面,也许这里可以借鉴罗永浩的“无限屏”理念呢?

上面聊的购物车的设计不能单独从一个购物车的角度看,要考虑不同的的平台,不用的模式,不同的端,不同的商品和服务种类等,要具体问题具体分析,同时要考虑用户在购物商品整个购物流程和场景,不能单独的割裂开来。