电商购物车设计(附案例学习)
2023-08-03 09:39:21 来源:哔哩哔哩
只要是电商类产品,购物车这个功能一定是绕不开的,它可以说是电商类产品设计的标配功能。作为平台交易转化最重要的环节之一,每一个细节的调整可能都会带来数据的波动。
因此更需要我们对其有深入的思考、小心的求证。
【资料图】
购物车的产品结构
业务逻辑
l购物车解决什么问题
在前面 Pattern 划分的时候,购物车被归入到了业务类型。也就是说它的设计是分层的,除了基础(default)的设计之外,我们还需要叠加上一层业务的特性,它最终的呈现也与业务有着很强的关系。
购物车是平台用于促进用户购买的一个功能模块。
表面上来看它是用来暂存用户想要购买的商品,但更抽象一步来看它是用来桥接用户“逛”与“买”之间的间隙。而在这个间隙中,我们需要从最基础的功能角度出发,一步步的去放大购物车的价值。
上图截取了 4 个不同平台的购物车界面。可以看到从左至右购物车界面的信息、功能的复杂度在一步步在递增。
如果从纯表现层面看,有很多设计我们很难解释为什么需要?为什么要这么做?
但如果将购物车的设计做拆分,就会发现一部分功能是购物车模式所必须的,一部分是因为业务特性附加。
l购物车基本框架
对于有明确定义、用户认知的功能模块,它的设计需要具备一定的普适性。
先将业务部分抛开,最基础、常见的购物车界面会是如下图所示。用来对商品信息、价格、总价的展示及用户召唤。
扩大一下范围,多找来几个不同产品的购物车界面,就会发现每个购物车界面都会有的共同信息。比如:商品标题、图片、数量、单价、总价…
这些“同类项”让我们清晰的发现了购物车界面的基础界面框架。用户日常所接触到的购物车基本都包含这些元素、这样布局。
当为一款新的产品设计购物车界面时,它应该成为开始的基础,确保用户最小的学习成本、更高的效率。
基础框架告诉我们购物车基本需要解决的问题是“告知用户想要购买的商品有哪些、什么规格、数量多少,以及整体的总价并引导进行支付操作。”
购物车界面基本框架能够让用户在购物平台完成购物。
作为交易路径最为重要环节之一,购物车同时还需要将用户转化率不断放大。因此,我们需要对购物车界面进行装饰,提升用户购买意愿、购买数量。
设计进阶:催你买单的购物车
购物车因为种种原因放弃率很高,通常有效降低用户放弃率的方法有:
l发放优惠券
l配送下限调到最低
l运费减免或凑单
l发送营销短信/邮件
1小时内发送首条挽回短信/邮件客户完成交易的概率高达%,延迟至24小时之后,成交率会降至%。
设计进阶:会当销售的购物车
l来凑个吧单
用户决定购卖一个商品时有两种选项:
1.一是立即购买
2.一是加入购物车
如果用户本身需求较多,想一次购买多种商品,或者参与到优惠活动中(满减、满赠等),这时候会将多个商品加入购物车进行批量购买。
此时,购物车设计中加入“凑单”提示,推荐用户可能感兴趣的商品,就能够让用户增加商品购买数量。
例如京东的凑单设计,结合运费减免,激励用户选择更多的商品以达到免运费的总价要求,购物车就这样在无形中销售了更多的商品。
l购物车里的促销小传单
购物车里的促销小传单很多,这些促销优惠活动都是为了提高客单价,刺激客户消费的。用户把商品加入购物车后,当前商品的促销小传单就以各种提示方面显示在购物车的商品列表中了,这些小传单中的活动包括:
l满减
l满赠
l秒杀
l优惠券
l组合商品优惠
l…
用户受到当前商品促销活动(满减、满赠)的引导,不但可以查看自己的订单是否满足优惠条件,优惠之后的金额(不包含优惠券)。还可以针对活动继续购物,购买更多的商品获得活动优惠。
购物车的功能设计
一、主要功能设计
购物车基础功能包括:
l商品编辑(数量增减或删除)
用户会选择多件商品放到购物车里,也会对购物车内的商品买多或减少几件,甚至后悔删除某些商品。最后勾选所有或部分商品下单。商品编辑功能就满足了用户商品选择的操作。
设计要点:
1)商品数量的增加、删除的极限值,最大不能超过商品的最大限购数或库存数(看谁比较小就以谁为准),最小也不能小于1;
2)交互设计中,有些平台倾向把功能隐藏起来(如淘宝),也有直接显示功能的(如京东、苏宁),产品经理应根据平台对于商品编辑功能的引导方便决定在交互中如果设计。
l商品失效管理
商品失效管理是对失效商品的处理设计。失效原因有很多,例如:
1)加入购物车商品的SKU卖完了
2)商品下架
3)用户购买数量已经达到最大限购数
设计要点
1)对失效商品的处理常见模式是将失效商品置于界面最底端,提供一键清空功能
2)同时考虑到用户对些类商品的需求,提供“找相似商品”功能。
案例学习
1)淘宝在设计中显示了商品失效原因;
2)京东没有把失效商品单独放置,在原有位置显示失效及失效原因,清除失效商品做得较隐避。
总结:每个产品在细节处理上都有细微的不同,但商品失效管理功能的设计的核心在于提示用户购物车内的某些商品无法购买了,不因为商品突然不见或无法购买而造成困惑。
l促销引导/提示
对商品的促销信息提示是每个购物车的标配,如:
1)降价
2)商品可以使用的优惠券
3)商品正在参加的活动
交互形式类似,目的都是为了帮助商户更好的提高商品销量,鼓励用户以更优惠的价格购买商品。
l凑单
购物车中准备购买的商品有时正在进行营销活动,如:
1)满300包邮
2)满400减100
3)…
如果购物车商品距离优惠条件还有一段距离,这时平台购物车将提示“凑单”选择。
设计要点
1)凑单页面可以看到该商户除了购物车商品以外的其它活动商品
2)可以将它们加入购物车统一结算
3)凑单页面商品通常按用户感兴趣的指数进行排名
案例学习
京东的凑单页面显示了当前店铺概况,还可以按销量、价格等条件筛选想看的商品。
l拆单
平台销售的商品越多,商品下单到后台的逻辑就越复杂。很多商品不能在一张订单中下单,如:
1)全球购商品涉及进口税或需要使用国际支付等原因不能跟国内渠道商品一起下单
2)药物类商品因为国家管制不能和非管制商品一起下单
在这种复杂的业务逻辑下,购物车的下单功能必须具备拆单能力。
案例学习
1)淘宝、京东在拆单功能中提供引导性的提示,让用户按需求点击“去结算”功能进行拆单结算
2)苏宁弱化了提示性动作引导,仅以提示信息的方式告之用户无法下单商品,用户需要手动去除不能一起下单商品完成结算。
l个性化推荐
用户加了大量商品在购物车时,个性化推荐功能可以提供更多类似商品的选择机会,同时促进相关商品的销量。
案例学习
1)淘宝在个性化推荐中提供了用户可能感兴趣的商品,而且还通过源头商品的展示让用户知道自己为什么对这类商品感兴趣
2)京东、苏宁则设计的比较简单,仅提供可能感兴趣的商品列表。
二、购物车列表设计
购物车列表设计要点:
l购物车选中策略
购物车的选中策略有三种:默认全选、默认全不选、勾选用户最近一次选择的商品。策略3是常见应用方式。这是因为有时用户把购物车当做收藏夹、意向商品库来用,这时购物车中会留存大量商品。
这时用户最近一次选择的商品很有可能是购买优先级最高的,列表中提供最近一次选择的商品的自动勾选为用户快速购物提供准备。
l商品排序
商品在购物车列表中的显示纬度包括:
1)商家店铺:不同店铺不同商品分开展示
2)活动优惠:将优惠活动相同的商品聚合在一起展示
3)加入时间:按照加入购物车的时间倒序排列,最近添加的商品排列在前
购物车内的列表商品排序应将最近添加的商品放在前面,虽然把历史商品放在前面提醒用户下单,唤醒历史购物需求没有错。
但对于销售这件事来说,购物需求也具备时效性,用户最近的购物需求应更容易触发。
l商品购买金额合计
按照店铺合计商品销售金额是惯例做法,底层逻辑是批量选择店铺商品结算后能够对应到统一物流和商家。
添加的商品存在排序、合计购买金额间的矛盾时,一般做法可以将最新添加商品的所在分类排到前面来。
l上限商品数量
京东购物车上线数量是200件,唯品会是同款商品限购2件。对于上限商品数量没有统一标准,应根据商品具体业务规则确定。
l购物车列表展示信息
购物车商品展示时,基本的展示信息包括:
1)商品标题
2)商品图片
3)价格
4)数量
5)规格(颜色、尺码等)
6)商家(自营或店铺)
7)库存状态(库存紧张/缺货)
如果是跨境商品,还需要显示税费。
l多端同步更新
打开、刷新购物车时,商品信息应保证多端(APP、web)数据同步,同步信息包括:
1)商品信息、促销信息同步更新。
2)购物车云端同步选中状态(不同设备打开时继承上次选中记录)。
3)用户购物车数据应记录在数据库中,保证APP、web端同步,下次登录不丢失。
l离线购物车
离线购物车指用户未登录状态下把商品加入购物车而形成的购物车数据,一般通过创建虚拟用户实现。
离线购物车是为了在用户下单前,不打断用户购物行为,允许未登录先将商品加入购物车的操作。
用户确定购买意向,发起下单申请后,产品提示用户登录,此时涉及离线购物车和用户在线购物车的合并,在产品处理上应注意:
1)用户登陆时应首先判断是否有离线购物车
2)将离线购物车数据与在线购物车数据合并
l库存监控
商品库存发生变动会影响用户购物车列表中的商品可买状态,如下架、缺货、促销等原因都会让购物车商品处于异常状态,
因此,购物车商品列表应对商品库存数量进行监控,一但异常就发出提醒,促进用户快速购物。库存紧张、无货时,列表应具备的功能:
1)购物车更新时应查询对应的商品库存,判断当前商品的数量,小于提醒值时提醒用户库存不足。
2)库存数量为0时,提醒无货。
3)商品下架提示商品无效。
4)不可购买商品应在列表中显示不可用状态并提示说明,同时设置不可勾选状态。
5)不可购买商品可设计无效商品列表,设计批量清除功能。
l价格监控
购物车商品价格变动时提示用户,如:降价20元。提示信息可能会刺激用户完成下单行为。
l商品编辑
编辑购物车列表时的主要操作包括:
1)删除商品
2)加减商品数量
3)更改商品规格
三、购物车设计的其它思考
l登陆注册放在购物流程的哪一步?
淘宝、京东、美团平台有离线购物车,用户未登陆也可以操作“加入购物车”功能,登录注册放在“提交订单“时。唯品会的登录注册放在“加入购物车”时。
过早让用户登陆注册可能会打断用户购物过程,结算时登录可以必免这个问题。
但不登录加入购物车的设计对于PC端用户来说,如果用户清理了浏览器cookieo数所,己选商品记录就随之被删除。
l购物车入口设计
购物车入口指能与购物车交互的入口。在用户的购物场景中应按需设计。入口设计的目的在于让用户基于不同场景将商品添加到购物车或者到购物车结算。
购物车入口通常放置的页面包括:
1)搜索列表页
2)商品详情页
3)秒杀、专题等活动页
4)收藏夹
5)历史订单
这些页面中的用户有一个共同的特点是在完成购买决策,放置购物车入口可以帮助用户完成购买。另外收藏夹、历史订单页面的入口设计是对反复购买场景的销售机会挖掘。
l购物车与其他系统的关联
1)购物车与订单系统:购物车下单后,需要把购物车里面的商品信息提交到订单系统。
2)购物车与库存系统:如果业务需要加入购物车后减少库存数量,则要考虑库存系统加减商品数量的操作。
3)购物车与价格系统:商品加入购物车后,商家调整价格系统中商品价格时,购物车商品价格也应做调整。
4)购物车与促销系统:购物车应关联该系统中商品的优惠信息。
l如何减库存
购物车设计中减库存功能设计要点是:何时减少库存?减少库存的常见做法有三种:
1)加入购物车减库存
2)下单减库存
3)支付减库存
减少库存的时间点选择,与商品的库存量、购卖频率有关。如:
1)库存商品有限且短时间购买数量较大的商品,适合加入购物车时就减库存,如秒杀商品
2)下单减库存和支付减库存都适合商品库存数量多,购买频率较为稳定的商品
不同购买步骤的减库存设计,除了库存增、减功能,通常用户端会加入“有效购买时间”提示,促进用户完成购物
案例学习
京东自营某商品无货状态下,添加商品进购物车会提示无货。同时,已下单的同类商品订单中,产品设计提示:要求用户在24小时内支付,否则商品将被释放。另外,如果用户主动或被动取消订单,这个商品恢复库存。
唯品会商品加入购物车后就减库存,同时产品提醒用户20分钟内提交订单。另外,用户提交订单后产品提醒用户30分钟内完成支付,否则商品会释放。
关于陪学网():我们6年来专注于产品管理类课程的开发与制作,志在为产品经理、交互设计、平面设计、需求人员分享最新、最好的产品类课程。学员遍布国内外知名互联网产品团队:百度、新浪、腾讯、领英等
标签:
相关阅读
- (2023-08-03)电商购物车设计(附案例学习)
- (2023-08-03)双色球爆11注头奖 内蒙古一人独揽3044万
- (2023-08-03)悼念赵有亮老师兼重温《孽债》:沈若尘的“电车难题”
- (2023-08-03)没有告别?马内INS简介将效力球队由拜仁改为利雅得胜利
- (2023-08-03)iPad mini 7:A16芯片,影像大升级
- (2023-08-03)哔哩哔哩-W(09626.HK):8月2日南向资金增持41.36万股
热点推荐
- (2023-08-03)电商购物车设计(附案例学习)
- (2023-08-03)曝曼联收购谈判仍在进行!格雷泽可能暂停出售,改为接受部分投资
- (2023-08-03)38小时5000万元经济效益,海上石油无人平台是怎样的存在?
- (2023-08-03)湖南株洲:开展成品油质量、加油机计量专项执法行动
- (2023-08-03)也门“萨菲尔”号油轮原油转运工作已完成一半
- (2023-08-03)自主研发钨合金镀层油管完井技术首次成功应用
- (2023-08-03)世界500强出炉!中国12家石油石化企业上榜
- (2023-08-03)微信正在测试“小绿书”功能 可集中查看图片
- (2023-08-03)双色球爆11注头奖 内蒙古一人独揽3044万
- (2023-08-03)美国将2家中国企业列入有关实体清单 商务部:坚决反对
- (2023-08-03)悼念赵有亮老师兼重温《孽债》:沈若尘的“电车难题”
- (2023-08-03)盈康生命(300143):8月2日北向资金增持34.28万股
- (2023-08-03)没有告别?马内INS简介将效力球队由拜仁改为利雅得胜利
- (2023-08-03)新宝股份(002705):8月2日北向资金减持1.91万股
- (2023-08-03)iPad mini 7:A16芯片,影像大升级
- (2023-08-03)直线的斜率公式怎么推导(直线的斜率公式)
- (2023-08-03)哔哩哔哩-W(09626.HK):8月2日南向资金增持41.36万股
- (2023-08-03)联想ThinkBook 14+ 2023锐龙版,配R7-7840H版好用吗?值得买吗
- (2023-08-03)皓庭新风是什么(皓庭新风)
- (2023-08-02)人民日报谈李铁 起底李铁体育集团 基本情况讲解
- (2023-08-02)Xbox科隆展计划公开 现场可游玩《装甲核心6》《潜行者2》
- (2023-08-02)大众为GTI标志申请新商标 或成电动时代性能车新标志
- (2023-08-02)增速5.3%!上半年淄博市经济运行向好
- (2023-08-02)立陶宛打开国门,把自己港口推出去,普京精心布局,即将崩盘
- (2023-08-02)因保险业务数据记录不真实等,太保寿险咸阳中心支公司合计被罚12.4万元
- (2023-08-02)A股第四次“工业革命”又来了?超导概念冲高回落,室温超导投资群从组建到维权仅需半天
- (2023-08-02)中电兴发:取得施耐德电气新能源行业数字能效集成认证级合作伙伴授权
- (2023-08-02)布冯已合作过四对父子档球员,包括维阿父子和西蒙尼父子
- (2023-08-02)伽马数据:上半年中国电竞产业收入759.93亿元 环比增长11.74%
- (2023-08-02)温暖山东丨山东救援队员深夜水中充饥,颤抖的手让人泪目
- (2023-08-02)中山大学本科招生网官方网址(中山大学本科招生网)
- (2023-08-02)未央今日播报:央行明确下半年六大工作重点
- (2023-08-02)生物新能源 低碳可持续
- (2023-08-02)沪上阿姨新增多位股东 沪上阿姨增资至1162万
- (2023-08-02)金羊网评:筑牢防汛救灾“生命防线”,积极应对汛期大考
- (2023-08-02)沪指跌逾1% 近3400只个股下跌
- (2023-08-02)安徽肥西县桃花镇多措并举下好“五经普”先手棋
- (2023-08-02)邮储银行惠州市分行开展暖心拥军慰问活动
- (2023-08-02)吉林桦甸农商行围绕“田园牧歌·小菜园”项目试水场景营销
- (2023-08-02)打好服务“组合拳”创优营商新环境
- (2023-08-02)江西乐平推动交通运输执法领域专项整治工作走向深入
- (2023-08-02)国际油价收缩涨幅,需求端发力不能只依赖少数国家
- (2023-08-02)河北省暴雨永定河泛区启用
- (2023-08-02)Word中文档的修订功能怎么用 word修订功能如何使用
- (2023-08-02)荣耀Play7T 续航时长多久
- (2023-08-02)邮报Simon Jones:曼联希望以2500万...
- (2023-08-02)千城胜景|万亩龙湖美 清凉沁荷香
- (2023-08-02)迈瑞通过收购布局德国市场,IVD行业“出海”前景几何?
- (2023-08-02)利好英镑!英银加息25基点可能性约为62%,投行称也有希望加息50个基点
- (2023-08-02)抖音、美团、华为“巧”搅支付春水
- (2023-08-02)手机蓝牙连不上体脂秤 手机蓝牙连不上体脂秤蓝牙
- (2023-08-02)孟德尔传:被忽视的巨人(关于孟德尔传:被忽视的巨人简述)
- (2023-08-02)正构烷商品报价动态(2023-08-02)
- (2023-08-02)协议离婚不行怎么办
- (2023-08-02)成都4家本土企业入围世界500强,通威集团首次上榜
- (2023-08-02)格灵深瞳:对多模态大模型以及生成式AI的重视程度已经提升到战略层面
- (2023-08-02)韩国7月通胀率降至两年多来新低 但未来或再度回升
- (2023-08-02)药石科技:终止投建创新药物工艺开发及中试平台项目
- (2023-08-02)全球十大金融科技风险投资机构
- (2023-08-02)搭建一流平台 引进优秀人才(让更多基础研究人才竞相涌现)
- (2023-08-02)香港恒生科技指数跌超3%,恒生指数现跌2.2%
- (2023-08-02)博德之门3第一滴血短剑在哪
- (2023-08-02)让“归雁”成为乡村振兴“领头雁”(干部状态新观察)
- (2023-08-02)宝山这些公交线路有调整,是你常乘坐的吗?
- (2023-08-02)2023年巢湖市公办小学报名登记时间是什么时候?
- (2023-08-02)净水机能治病?多名老人信了 售后人员承诺3天内进行退货退款处理
- (2023-08-02)子排炖萝卜(关于子排炖萝卜简述)
- (2023-08-02)江汉油田在红星地区新层系勘探取得突破
- (2023-08-02)(成都大运会)参赛代表团成员在成都圆“大熊猫梦”
- (2023-08-02)润滑油公司联合丰田发布新能源车润滑油新成果
- (2023-08-02)长岭炼化应用机器人进行罐区除垢
- (2023-08-02)零售银行大转折:房贷走下「神坛」
- (2023-08-02)存量房贷利率下调空间尚待开启:房奴期待,银行畏难,还需央行指导
- (2023-08-02)采摘
- (2023-08-02)步进电机与驱动器接线方法 西门子200smart编程程序
- (2023-08-02)特变电工(600089) 涨跌幅:0.55% (08/01)
- (2023-08-02)重庆路桥:8月1日融资买入718.99万元,融资融券余额2.34亿元
- (2023-08-02)载重15.5万吨!中国海油这一超级油轮抵达巴西
- (2023-08-02)国内首套120方超低温储罐通过验收
- (2023-08-02)英国石油公司第二季度利润同比下滑70%
- (2023-08-02)中油技服智能支持“远程钻井”
- (2023-08-02)南昌西站收2元“停车费”遭司机、乘客双方投诉 收费公司是何来头江南都市报
- (2023-08-02)洗头用洗发水沐浴露合适吗?
- (2023-08-02)德州一地最新人事任免!
- (2023-08-02)港股概念追踪 | 利好不断!应用场景持续拓宽 数字人民币步入快速发展期(附概念股)
- (2023-08-02)聂磊人品_聂磊老婆周新萍现状
- (2023-08-02)云梦伍洛镇:甲鱼养殖富一方 乡村振兴勇担当
- (2023-08-02)广东技术师范学院白云校区平面图(广东技术师范学院白云校区)
- (2023-08-02)劲仔食品(003000):8月1日北向资金减持19.21万股
- (2023-08-02)天蝎座女生感情观(解析天蝎座女生的爱情观)
- (2023-08-02)张雨霏率队夺大运会中国游泳首金:“这个主场冠军我们必须要拿”
- (2023-08-02)强电井施工图集(砖砌强电井施工做法)
- (2023-08-01)尼克尔一千零一夜80:轻巧、高速——Nikon Series E 100mm f/2.8
- (2023-08-01)挺进失联村庄贾沟村 门头沟城区大部分群众已完成安置
- (2023-08-01)某科学的悖论引擎(6)
- (2023-08-01)蔚来7月交付20462台创新高
- (2023-08-01)罗马诺:斯卡马卡同意加盟国米,后者下份报价预计达到2500万欧
- (2023-08-01)走近国之重器“昆仑号”:架桥如同搭积木
- (2023-08-01)扬子新材被证监会处以450万元罚款 时任总经理10年证券市场禁入
- (2023-08-01)青岛民宿(青岛民宿)