常见B2C网站购物车的设计

对于大部分B2C网站来说,购物车是网站的咽喉之地,订单是白花花的银子,所有银子都必然流经购物车,购物车不能有失。优秀的购物车设计至少需要完成两项使命:一是方便用户多买货多掏银子;二是帮用户保管好待购的货品,方便下次接着掏银子。

购物车是个较复杂的系统,一般会跟订单、商品、库存、会员和促销等模块有暧昧关系,也算是牵一发而动全身。所以,在不了解购物车前,不宜轻易的指挥你的程序员修改购物车。

说了这么多,进入正题。本文较长,请耐心观看。

什么叫购物车,有何作用?

传统的购物车一般指超市中顾客去结算前暂时存放所选商品的一种手推车。1937年6月美国人Sylvan Goldman 发明了第一辆购物车,随后购物车风行各国卖场。在中国,大家熟知的是以“沃尔玛“为代表的“美式购物车”和以“7-Eleven”为代表的“日式购物车”。

购物车存在的价值是:1、便于客户在选购商品到结算完成前存储商品,解放客户的手。实际上是让用户多购买商品,提高客单价。2、不仅可存放选购好的商品,还附带了婴儿车的功能,让带小孩的父母方便购物。3、沃尔玛在2007年率先于超市中采用无线射频技术(RFID),每件商品打上电子标签,放入购物车中的商品能被追踪,结算时无需扫描每件商品,购物车经过特殊的扫描装置后即可计算出最终的总价格。购物车被广泛用于分析用户的购买行为。

在线购物车,这里是指用户点击按钮“加入购物车(add to shopping cart)”到点击“去结算(check out)”按钮之间的过程。值得注意的是,购物车不仅仅指“shopping cart page”!

大概在传统购物车被发明60年后,1995年,美国人Mark Mumma (web site designer)发明了第一个Online Shopping Cart(这里指的是购物系统),而至于本文提到的购物车的在线购物车的发明者,在线没有考证出来(对这段历史有了解的欢迎联系我:QQ:80411154)。1999年4月,又是美国人Juliette Harrington 发明了一项专利:虚拟购物车,该技术使在线用户能够用一个通用的虚拟购物车从不同的网站采购商品和服务,最后仅仅在一个地方付款(没记错的话,2008年亚马逊网站使用了该项专利,具体可以查看:https://payments.amazon.com/sdui/sdui/business/cba/shoppingcart#features)。

在线购物车主要作用在于:1、和传统卖场类似,方便用户一次选择多件商品去结算。2、充当临时收藏夹的功能。3、对于商家来说,购物车是向用户推销的最佳场所之一。

什么时候可以考虑不要购物车?

在传统的的小超市和商店是没有购物车(或购物篮)的,因为距离短、空间小等原因。电器城、电脑城也没购物车吧?因为代送货&顾客东西买得少吧?和在线购物车对应的另一个功能是“立即购买”,也就是一次只能选择一件或一套商品去支付。理论上没有购物车是能走通流程的,现在的ebay和当年的淘宝是只有“立即购买”没有购物车的。

以下情况可以考虑用“立即购买”代替购物车:

1、SKU数少,当年的减肥产品“绿瘦”的官网很典型;

2、商品结构单一,比如只卖杯子,不卖其它产品,你的用户大部分情况下也就只会买一个杯子(当然,你可以通过套装功能组合销售卖多件,但不需要购物车)。

3、通过数据分析,发现用户订单平均商品数无限接近1(当然这有关联销售不力的可能)。

4、你非常期望你的用户每次只买一件商品就滚蛋,不要磨蹭!

购物车入口有哪些?

购物车入口是指把商品加入购物车的途径。常见的有:在商品详情页把商品加入购物车、在收藏夹把商品加入购物车、在已购买成功的订单把商品加入购物车、在已取消的订单把商品加入购物车、把购物车页面的关联推荐商品直接加入购物车。

由于购物车直接跟库存和促销有关系,所以不同的入口,存在不同的处理逻辑。这里举2个例子,抛砖引玉,我不展开写:

1、对已成功完成的订单,点击“重新购买”或“重新加入购物车”,若部分或全部商品没有库存该如何处理?原来送赠品现在不送了,该如何处理?

2、同理用在已取消的订单上,若有商品被删除或下架了,如何处理?若目前可供购买的数量小于原订单,该如何处理?

同时,我们还需考虑不同的购物车入口的交互方式。如在商品详情页,商品加入购物车后,是直接进入购物车?迷你购物车下拉提示?弹出层让用户选择去购物车or继续购买? 哪种做法适合你的网站?购物车的入口处理我暂时写到这里,提供一篇很精彩的文章供大家继续研究:http://blog.csdn.net/youshandeyang/article/details/5316568

购物车的出口

有入口必然有出口,我把购物车的出口解释为:商品移除购物车的途径。常见的方式有三种。

1、购物车商品被携带去结算,并成功提交订单;这是最常见的方式这里需要重点考虑一个问题:若登录前商品A被加入购物车,实际上登录状态下用户的购物车保存了商品B和C。在购物车点击“去结算”,要求用户登录,登录后被携带去结算的商品是A,还是A+B+C? 或者让用户自己选择(shopex的做法)?

2、购物车商品被删除;

3、购物车商品被加入收藏夹。若购物车中商品能被加入收藏夹么?加入收藏夹后,购物车中该商品记录要被同时删除么?

下面进入解说具体功能的阶段,设计功能前得明白产品的核心功能是什么,扩展功能是什么?核心功能上可以做哪些延展,扩展功能又能做哪些延伸。先理解购物车的主要作用:1、方便用户携带多件商品一起去结算;2、临时商品储存地。而购物车次要作用有:1、让用户多买东西,提高客单价(网站价值观不同,有的网站期望用户赶紧进入下一步去结算)。

购物车核心功能&延展功能

见下图,由用户需求推导出购物车核心功能需求。下图是一个购物车应该满足的功能需求,当然,根据自身网站情况可增减。

购物车扩展功能&延展功能

文字懒得写了,还是画图快。

购物车的状态

这是一个较容易被忽略的点,一般情况,用户常见到的购物车状态是登录前或登录后购物车有商品。实际上还包括登录前或登录后购物车为空、登录前或登录后购物车有商品(部分或全部)被下架、库存为零等状态。

登录前购物车有商品:这是一种很好理解的状态,对于有会员等级还享受会员折扣的站点,要考虑的问题是登录前和登录后商品的价格可能不一致,如果在购物车使用优惠券,登录前能否使用?

登录后购物车有商品:这种状态是最常见的,就不说了

登录前购物车为空:首先要考虑的一点是,如果购物车没有商品,是否允许用户点击进入购物车页面?如果允许,购物车要做的工作有哪几件?我总结了下,常见的提示有:

1)告诉用户购物车为空,并给出返回首页继续购物的快捷链接

2)告诉用户未登录可能导致购物车为空,提示用户登录;

3)推荐商品给用户。

登录后购物车为空:参照登录前为空的第2和第3点

登录前或登录后购物车商品全部或部分被下架或库存为零:这是一种非常特殊的状态,至少得解决2个问题:

1)告诉用户有商品被下架或库存为零;

2)用户是否能继续去结算?如果阻止用户去结算,用户需要做什么?

购物车数据的保存方式

这段是稍偏技术的话题,但仔细看看也较好理解。在看这段文字前,你需要简单理解“cookie、session和数据库”三个概念。当然,这里我就不解释了,自己去google一下吧。购物车数据的保存是一个非常细节的体验,但同样非常重要,实际上数据的保存方式直接影响用户收藏商品的体验。用户常会有这么3个疑问:

1、网站A,为什么我加入购物车的商品,第二次登陆该网站后,商品消失却消失了?

2、网站B,为什么我换一台电脑,购物车中的商品却没了?

3、网站C,我没有往购物车添加商品呀,谁用了我的电脑呀?

根据每个网站实际情况,一般需要考虑以下情况:

1、登录前,往购物车添加了商品,商品数据该保存在哪?cookie or 会话方式?

2、登录后,往购物车添加了商品,商品数据该保存在哪?cookie or 会话方式 or 数据库?保存多久?

3、家谁未登录状态下往购物车添加了商品,保存方式为A,后来登录了,保存方式为B。A和B应该是怎样一种关系。用户退出登录后A和B又怎样一种关系、怎样一种处理逻辑?

4、如果在使用cookie保存数据,假设用户浏览器禁用了cookie,如何处理?

5、假设用cookie保存数据,什么情况下cookie保存的数据会被系统清除(注意是系统而不是人为)?

6、假设用数据库保存购物车数据,什么情况下数据库保存的数据会被系统清除?

再同时,可以结合数据的保存方式,考虑购物车数据营销:

1、某A注册用户放弃购物车了,是否可以考虑一个星期后触发邮件提醒对方?

2、如果购物车数据要被系统清除,在这之前,是否考虑邮件提醒用户?

3、如果用户对你的邮件提醒无动于衷,是否考虑给点优惠勾引?如给优惠券,给折扣!

迷你购物车

较多的是考虑交互、信息组织和界面问题,此处略。

最后,送一副心智图,欢迎传播

有些遗漏或小错误,已懒得修改,有好想法请Q我:80411154

课外思考:

1、为什么新版京东购物车页面参考淘宝做法增加了check box(商品复选)?

2、为什么淘宝登录前只能保存20个商品,登录后能保存50个商品?而京东登录后若想保存商品需要主动点击“寄存”?

作者:老虫子

时间: 2024-08-27 21:43:38

常见B2C网站购物车的设计的相关文章

购物车(Shopping cart) —— B2C网站核心产品设计 (二)

购物车是做什么的? 我们先来看一下现实超市中的购物车,一个带四个轱辘的铁筐子,客人推来推去,看到什么东西喜欢,就扔进去,觉得东西差不多了,就推到收银台. 那B2C网站中的购物车又是一个什么东西呢? 从广义上说,购物车在B2C网站里无处不在,当客人进入一个B2C网站时,他就相当于推着购物车开始逛超市了,只是客人暂时看不到购物车,直到进入购物车(Shopping cart page)页面,然后去结算,下单成功.本文讨论的购物车是狭义的购物车,是指客人在点商品页面的“加入购物车”(Add to car

购物车的设计

大型网站购物车的设计 基于session技术: 基于cookie+Db技术: 购物车包括那些项: 购物项(产品+样式) 配送信息/联系人信息 配送方式(物流信息+特殊要求配送时间) 支付方式 提交订单(最后一步才保存到数据库里)

常见的网站服务器架构有哪些?

1. 初始阶段的网站架构 一般来讲,大型网站都是从小型网站发展而来,一开始的架构都比较简单,随着业务复杂和用户量的激增,才开始做很多架构上的改进.当它还是小型网站的时候,没有太多访客,一般来讲只需要一台服务器就够了,这时应用程序.数据库.文件等所有资源都在一台服务器上,网站架构如下图所示: 2. 应用服务和数据服务分离 随着网站业务的发展和用户量的增加,一台服务器就无法再满足需求了.大量用户访问导致访问速度越来越慢,而逐渐增加的数据也会导致存储空间不足.这时就需要将应用和数据分离,应用和数据分离

轻开商贸企业入门级电子商务 B2C网站公共版

1      背景 1.1  企业初涉电子商务面临的困扰 1.1.1   不知从何入手 一般企业的IT水平大多处于基本应用阶段,如打字(Word).统计(Excel).交流(发邮件.QQ等).上网(浏览网页.搜索)等等,要上电子商务时,门在哪里是个现实的问题 1.1.2   没有配套的管理系统 需要专门的进销存及库管系统 1.1.3   成本太高 建设成本高.配套系统成本高.专业团队成本高 1.1.4   回报无期 巨大的投入以后,能不能卖得好又是一个现实的问题,卖得好才能确保企业的预期的回报,

分享大牌网站是如何设计Mega menu 菜单,仅供参考!

Mega menu(大幅网页菜单)是在网页界面设计中非常常见的元素之一,用于引导用户进入下级页面.但是,正因为mega menu十分常见,所以如果总是一成不变的设计,就容易显得乏味. 本文收集了一些优秀的大牌网站mega menu设计案例,有的设计细节到位美观,有的动效细腻流畅,相当值得参考!下面一起来欣赏吧,Enjoy! Moosejaw Moosejaw.com是一家在线实体零售商,专门从事户外休闲服装和滑雪板.攀岩.远足和露营装备.该网站的mega menu里尽可能全面地罗列了网站的各分类

建设自己拥有的B2C网站一般需要什么样的插件以及大体花费

许多客户咨询建立自己的B2C网站,一般需要什么样的插件以及大体的花费金额.现在大体为朋友们做一简单介绍: 1. mycncart系统本身是免费的,有了自己的域名和服务器空间后,将其安装后,就可以使用默认的mycncart所带模版,加上上传商品.更换网站logo等就可以开张营业了. 关于域名费用,一般是每年几十人民币,站长个人建议在 www.net.cn上购买.至于服务器空间,国内客户许多选择阿里云的,当然你也可以选择其他供应商的. 2. 如果您不喜欢使用mycncart默认自带的模版,那你可以在

换主页轮播的主题图片(3、保存添加)---轻开电子商务系统(企业入门级B2C网站)

接上一博 文件:site/links/img0_add.html中的表单(第4行) <form id=save action="@{sys:face}site/links/img0_add_up1.chtml" onsubmit="return false;" target=_self method=post enctype="multipart/form-data"> <input type=hidden name=reUrl

换静态图片---轻开电子商务系统(企业入门级B2C网站)

一共3个文件: 显示及上传文件:site/links/img_one.html 保存图片文件:site/links/img_one_up1.chtml 导航菜单文件:site/links/menu.html 在轻开电子商务系统(企业入门级B2C网站)的site/links/目录下 显示图片信息且上传表单:site/links/img_one.html 显示标题(从menu.html文件传过来的标题) <tr><th colspan=2>.<font class=listTit

换今日特价图片---轻开电子商务系统(企业入门级B2C网站)

跟换主页轮播图片一样,一共4个文件: 列表显示文件:site/links/img2.html 添加图片文件:site/links/img2_add.html 添加保存图片文件:site/links/img2_add_up1.chtml 删除图片文件(跟删除主页轮播图片共用一个文件,用记录we_id识别):site/links/img0_del.chtml 在轻开电子商务系统(企业入门级B2C网站)的site/links/目录下 1.列表显示文件:site/links/img2.html <lin