常见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个商品?而京东登录后若想保存商品需要主动点击“寄存”?
作者:老虫子
常见B2C网站购物车的设计的更多相关文章
- 购物车(Shopping cart) —— B2C网站核心产品设计 (二)
购物车是做什么的? 我们先来看一下现实超市中的购物车,一个带四个轱辘的铁筐子,客人推来推去,看到什么东西喜欢,就扔进去,觉得东西差不多了,就推到收银台. 那B2C网站中的购物车又是一个什么东西呢? 从 ...
- 大型B2C网站高性能可伸缩架构技术探秘
大型B2C网站高性能可伸缩架构技术探秘 2010-07-21 08:51 狂放不羁 JavaEye 字号:T | T 向您介绍大型B2C网站高性能的网站架构技术,包括缓存的使用.应用程序和数据库的拆分 ...
- 网站app原型设计工具:axure,Mockups,墨刀
网站app原型设计工具:axure,Mockups,墨刀 Balsamiq Mockups 3 网站原型设计工具非常高效,非常简单,几分钟就能搞定比axure好用很多 墨刀 - 免费的移动应用原型与线 ...
- App6种常见的数据加载设计
App6种常见的数据加载设计 设计师在进行APP设计的设计时,往往会更加专注于界面长什么样,界面和界面之间怎么跳转,给予用户什么样的操作反馈,却偏偏特别容易忽略掉一个比较重要的环节,就是APP数据加载 ...
- 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变
查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...
- 大型网站的架构设计问题—-大型高并发高负载网站的系
转载:http://www.cnblogs.com/cxd4321/archive/2010/11/24/1886301.html 随着中国大型IT企业信息化速度的加快,大部分应用的数据量和访问量都急 ...
- 一、常见PHP网站安全漏洞
对于PHP的漏洞,目前常见的漏洞有五种.分别是Session文件漏洞.SQL注入漏洞.脚本命令执行漏洞.全局变量漏洞和文件漏洞.这里分别对这些漏洞进行简要的介绍. 1.session文件漏洞 Sess ...
- 【FUN】——英文版面青年教育网站策划&GUI设计
写在前面:这个教育网页一共分为四个页面,首页.课程.活动.空间.是我在学习网页设计与策划的时候作为知识应用练习做的,主要使用Photoshop软件设计构图,其中图片素材与部分灵感来源于网络. 一.网站 ...
- web网站的url设计
通常再web网站设计url时是按功能模块设计url,然后再control层一个功能模块对应一个control层类,每个control类中的方法映射相应的url请求. 如果遇见另一个功能模块需要实现同样 ...
随机推荐
- UI_APPEARANCE_SELECTOR 延伸
iOS后属性带UI_APPEARANCE_SELECTOR 可以统一设置全局作用 例如: 1>开关控件 @property(nullable, nonatomic, strong) UIColo ...
- TCP三次握手中,为什么需要第三次握手?
为什么客户端A还要发送一次确认呢?(为什么需要第三次握手) 这主要是为了防止已失效的连接请求报文段突然又传送到了B(服务器端),因而产生错误. 所谓"已失效的连接请求报文段"是这样 ...
- 顺序栈和链式栈(C++实现)
顺序栈,是一种基于数组的存储表示. 实现类代码如下: template<class T> class SeqStack{ T *element; int top; int maxSize; ...
- SpringMVC的@ModelAttribute注解简单使用(用户修改信息)
例如有一个User对象,我们要修改他的值,但是不能修改他的密码!通过表单提交数据之后,password为null,会把原对象的passwod覆盖掉.这时候可以用@ModelAttribute注解处理. ...
- 《JavaScript高级程序设计》读书笔记 ---Date 类型
ECMAScript 中的Date 类型是在早期Java 中的java.util.Date 类基础上构建的.为此,Date类型使用自UTC(Coordinated Universal Time,国际协 ...
- Linux常用操作
1. Latex参考文献格式 http://blog.163.com/sunkun_hust/blog/static/204454119201482524222283/
- Linux的cron和crontab
一 cron crond位于/etc/rc.d/init.d/crond 或 /etc/init.d 或 /etc/rc.d /rc5.d/S90crond,最总引用/var/lock/subsys/ ...
- hdu_5810_Balls and Boxes(打表推公式)
题目链接:hdu_5810_Balls and Boxes 题意: 如题,让你求那个公式的期望 题解: 打表找规律,然后推公式.这项技能必须得学会 #include<cstdio> #in ...
- onkeyup事件
当用户释放键盘按钮时执行Javascript代码. 上代码: <input type="text" id="frame" onkeyup="my ...
- JS 之完美运动框架
完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getE ...